ReferenceError: React is not defined

[looeee]

System

Windows 10, tested on FF and Chrome.

Steps to reproduce:

1. run npx create-react-app appName
2. run npm install --save-dev craco-esbuild @craco/craco
3. Change scripts:

"scripts": {
    "start": "craco start",
    "build": "craco build",
    "test": "craco test",
    "eject": "react-scripts eject"
  },

4. Create craco.config.js:

const CracoEsbuildPlugin = require("craco-esbuild");

module.exports = {
  plugins: [
    {
      plugin: CracoEsbuildPlugin,
      options: {
        esbuildLoaderOptions: {
          loader: "jsx",
          target: "es2015",
        },
      },
    },
  ],
};

5. Run npm start

Also tested with simpler craco.config.js:

const CracoEsbuildPlugin = require("craco-esbuild");

module.exports = {
  plugins: [{ plugin: CracoEsbuildPlugin }],
};

Expected result

Should show the standart CRA page.
Everything works correctly if I change the start script back to "start": "react-scripts start"

Actual Result

Browser displays the following error message:

ReferenceError: React is not defined
App
C:/dev/craco/app/src/App.js:5

  2 | import './App.css';
  3 | 
  4 | function App() {
> 5 |   return (
  6 |     <div className="App">
  7 |       <header className="App-header">
  8 |         <img src={logo} className="App-logo" alt="logo" />

./src/index.js/<
C:/dev/craco/app/src/index.js:7

   4 | import App from "./App";
   5 | import reportWebVitals from "./reportWebVitals";
   6 | 
>  7 | ReactDOM.render(
   8 |   <React.StrictMode>
   9 |     <App />
  10 |   </React.StrictMode>,

./src/index.js
http://localhost:3000/static/js/main.chunk.js:446:30
__webpack_require__
C:/dev/craco/app/webpack/bootstrap:856

  853 | 
  854 | __webpack_require__.$Refresh$.init();
  855 | try {
> 856 | 	modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));
      | ^  857 | } finally {
  858 | 	__webpack_require__.$Refresh$.cleanup(moduleId);
  859 | }

fn
C:/dev/craco/app/webpack/bootstrap:150

  147 | 		);
  148 | 		hotCurrentParents = [];
  149 | 	}
> 150 | 	return __webpack_require__(request);
      | ^  151 | };
  152 | var ObjectFactory = function ObjectFactory(name) {
  153 | 	return {

1
http://localhost:3000/static/js/main.chunk.js:576:18
__webpack_require__
C:/dev/craco/app/webpack/bootstrap:856

  853 | 
  854 | __webpack_require__.$Refresh$.init();
  855 | try {
> 856 | 	modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));
      | ^  857 | } finally {
  858 | 	__webpack_require__.$Refresh$.cleanup(moduleId);
  859 | }

checkDeferredModules
C:/dev/craco/app/webpack/bootstrap:45

  42 | 	}
  43 | 	if(fulfilled) {
  44 | 		deferredModules.splice(i--, 1);
> 45 | 		result = __webpack_require__(__webpack_require__.s = deferredModule[0]);
     | ^  46 | 	}
  47 | }
  48 | 

webpackJsonpCallback
C:/dev/craco/app/webpack/bootstrap:32

  29 | 	deferredModules.push.apply(deferredModules, executeModules || []);
  30 | 
  31 | 	// run deferred modules when all chunks ready
> 32 | 	return checkDeferredModules();
     | ^  33 | };
  34 | function checkDeferredModules() {
  35 | 	var result;

(anonymous function)
http://localhost:3000/static/js/main.chunk.js:1:59
This screen is visible only in development. It will not appear if the app crashes in production.
Open your browser’s developer console to further inspect this error.  Click the 'X' or hit ESC to dismiss this message.

Misc

I also tried using https://github.com/pradel/create-react-app-swc and I get exactly the same error message.

[justrhysism]

I think this is a dupe of #7

[pradel]

You are right, closing it in favor of #7