When I try to run the react project the tsconfig
file has been automatically changed "jsx": "react-jsx"
to "jsx": "preserve"
after that i'm getting this kind of errors
×
←→1 of 3 errors on the page
ReferenceError: React is not defined
App
C:/Users/AntonyPraveenkumarMo/01_antony/Personalspace/fullstack/React MUI/react-mui-demo/src/App.tsx:6
3 | import CustomRoutes from './components/Routes';
4 |
5 | function App() {
> 6 | return (
7 | <div className="App">
8 | {/* <MuiTypography /> */}
9 | <CustomRoutes />
View compiled
renderWithHooks
C:/Users/AntonyPraveenkumarMo/01_antony/Personalspace/fullstack/React MUI/react-mui-demo/node_modules/react-dom/cjs/react-dom.development.js:14141
14138 | ReactCurrentDispatcher$1.current = HooksDispatcherOnMountInDEV;
14139 | }
14140 | }
> 14141 | var children = Component(props, secondArg); // Check if there was a render phase update
| ^ 14142 |
14143 | if (didScheduleRenderPhaseUpdateDuringThisPass) {
14144 | // Keep rendering in a loop for as long as render phase updates continue to
View compiled
mountIndeterminateComponent
C:/Users/AntonyPraveenkumarMo/01_antony/Personalspace/fullstack/React MUI/react-mui-demo/node_modules/react-dom/cjs/react-dom.development.js:17432
17429 | }
17430 | setIsRendering(true);
17431 | ReactCurrentOwner$1.current = workInProgress;
> 17432 | value = renderWithHooks(null, workInProgress, Component, props, context, renderLanes);
| ^ 17433 | hasId = checkDidRenderIdHook();
17434 | setIsRendering(false);
17435 | }
View compiled
beginWork
C:/Users/AntonyPraveenkumarMo/01_antony/Personalspace/fullstack/React MUI/react-mui-demo/node_modules/react-dom/cjs/react-dom.development.js:18728
18725 | switch (workInProgress.tag) {
18726 | case IndeterminateComponent:
18727 | {
> 18728 | return mountIndeterminateComponent(current, workInProgress, workInProgress.type, renderLanes);
| ^ 18729 | }
18730 | case LazyComponent:
18731 | {
View compiled
HTMLUnknownElement.callCallback
C:/Users/AntonyPraveenkumarMo/01_antony/Personalspace/fullstack/React MUI/react-mui-demo/node_modules/react-dom/cjs/react-dom.development.js:3733
3730 | function callCallback() {
3731 | didCall = true;
3732 | restoreAfterDispatch();
> 3733 | func.apply(context, funcArgs);
| ^ 3734 | didError = false;
3735 | } // Create a global error event handler. We use this to capture the value
3736 | // that was thrown. It's possible that this error handler will fire more
View compiled
invokeGuardedCallbackDev
C:/Users/AntonyPraveenkumarMo/01_antony/Personalspace/fullstack/React MUI/react-mui-demo/node_modules/react-dom/cjs/react-dom.development.js:3777
3774 | // errors, it will trigger our global error handler.
3775 |
3776 | evt.initEvent(evtType, false, false);
> 3777 | fakeNode.dispatchEvent(evt);
| ^ 3778 | if (windowEventDescriptor) {
3779 | Object.defineProperty(window, 'event', windowEventDescriptor);
3780 | }
These errors only happen when I try to install the package npm i @mui/styles
.
My project is typescript project please help me to solve this. and one more request please explain about the tsconfig
and it's use
tsconfig
, you should read the docs