"React is not defined" when using a custom _app.tsx and .babelrc using React 17

Bug report

After upgrading to React 17, I can no longer compile my project with a custom .babelrc file without importing React in every *.tsx file. Having a _app.tsx file seems to be required to reproduce the issue. The error returned is:

Error occurred prerendering page "/". Read more: https://err.sh/next.js/prerender-error
ReferenceError: React is not defined
    at MyApp.render (/home/bruhno/projects/react-not-defined/.next/server/pages/_app.js:297:70)
    at d (/home/bruhno/projects/react-not-defined/node_modules/react-dom/cjs/react-dom-server.node.production.min.js:35:231)
    at bb (/home/bruhno/projects/react-not-defined/node_modules/react-dom/cjs/react-dom-server.node.production.min.js:36:16)
    at a.b.render (/home/bruhno/projects/react-not-defined/node_modules/react-dom/cjs/react-dom-server.node.production.min.js:42:43)
    at a.b.read (/home/bruhno/projects/react-not-defined/node_modules/react-dom/cjs/react-dom-server.node.production.min.js:41:83)
    at exports.renderToString (/home/bruhno/projects/react-not-defined/node_modules/react-dom/cjs/react-dom-server.node.production.min.js:52:138)
    at Object.renderPage (/home/bruhno/projects/react-not-defined/node_modules/next/dist/next-server/server/render.js:50:851)
    at Function.getInitialProps (/home/bruhno/projects/react-not-defined/.next/server/pages/_document.js:273:19)
    at loadGetInitialProps (/home/bruhno/projects/react-not-defined/node_modules/next/dist/next-server/lib/utils.js:5:101)
    at renderToHTML (/home/bruhno/projects/react-not-defined/node_modules/next/dist/next-server/server/render.js:50:1142)

I’m not sure if TypeScript is related to the issue, but I’ve simply copy pasted minimal configuration from my own project which is where I experienced the issue.

To Reproduce

I’ve created the following repo to reproduce the error: https://github.com/NBruhno/nextjs-react-not-defined

1. run yarn
2. run yarn dev or yarn build
3. See error in the terminal and on the rendered page

Expected behavior

I could before React 17 run my repo without having to import React in my .tsx files unless explicitly referring to some functions, with my own custom .babelrc file.

System information

• OS: Windows running WSL: Ubuntu-20.04
• Version of Next.js: 9.5.5
• Version of Node.js: v12.17.0

[vasco3]

I’m getting a similar error but i’m not using TS

[PabloSzx]

A workaround is to modify your .babelrc adding "@babel/plugin-transform-react-jsx" plugin manually, you don’t need to add it to your package.json, since Next.js itself has it as a dependency

{
  "presets": ["next/babel"],
  "plugins": [
    [
      "@babel/plugin-transform-react-jsx",
      {
        "runtime": "automatic"
      }
    ]
  ]
}

---

It doesn’t seem to work all the time, and _document.tsx has problems too