1

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

2
  • Possible reasons are 1. you didn't load React.JS into your page, 2. you loaded it after the above script into your page. Solution is load the JS file before the above shown script. P.S Possible solutions. If you mention react in externals section inside webpack configuration, then you must load react js files directly into your html before bundle.js Make sure you have the line import React from 'react';
    – Y_T
    Commented Dec 2, 2022 at 7:29
  • React is a frontend library, it doesn't go about changing your config files. For details about tsconfig, you should read the docs
    – Zac Anger
    Commented Dec 2, 2022 at 7:30

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Browse other questions tagged or ask your own question.