[v4]ReferenceError: React is not defined

[yoyo837]

npx create-react-app my-app

then eject it, it report React is not defined

[n3tr]

I have submitted PR #9885 to fix this.

This is because the jsx-runtime configuration gets removed webpack config during the ejection process.

In the meantime, Adding a runtime option to babel in package.json will solve the issue

// package.json
{
  "babel": {
    "presets": [
      [
        "react-app",
        {
          "runtime": "automatic"
        }
      ]
    ]
  }
}

or add presents option back to webpack.config.js (around line 409)

// webpack.config.js
{
  loader: require.resolve('babel-loader'),
  options: {
    customize: require.resolve(
      'babel-preset-react-app/webpack-overrides'
    ),
    // Add this back
    presets: [
      [
        require.resolve('babel-preset-react-app'),
        {
          runtime: hasJsxRuntime ? 'automatic' : 'classic',
        },
      ],
    ],
  }
}

[bradydowling]

Thank you @n3tr! Changing the webpack config as you suggested worked for me.

[trozler]

Thanks, only package.json solution worked for me.
Edit: This didn't fully work as intended.
After trying a few different things, what worked for me was:

1. create a new react app project.
2. Implement @n3tr changes given by his pull request(It's only moving 2 lines of code).
3. Finally ejecting.

I then just copied my source files over.