How to solve Error: Cannot find module 'react/jsx-dev-runtime' when upgrading to Next.js 11?

Question

I'm upgrading packages in my Next app, including Next 11 and React v17. I tried everything I could find online but still getting this error.

Here's full console output.

Error: Cannot find module 'react/jsx-dev-runtime'
Require stack:
- /Users/wk/repo/.next/server/pages/_document.js
- /Users/wk/repo/guest/node_modules/next/dist/next-server/server/require.js
- /Users/wk/repo/guest/node_modules/next/dist/next-server/server/load-components.js
- /Users/wk/repo/guest/node_modules/next/dist/next-server/server/api-utils.js
- /Users/wk/repo/guest/node_modules/next/dist/next-server/server/next-server.js
- /Users/wk/repo/guest/node_modules/next/dist/server/next.js
- /Users/wk/repo/guest/node_modules/next/dist/server/lib/start-server.js
- /Users/wk/repo/guest/node_modules/next/dist/cli/next-dev.js
- /Users/wk/repo/guest/node_modules/next/dist/bin/next
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:957:15)
    at Function.mod._resolveFilename (/Users/wk/repo/guest/node_modules/next/dist/build/webpack/require-hook.js:4:1855)
    at Function.Module._load (internal/modules/cjs/loader.js:840:27)
    at Module.require (internal/modules/cjs/loader.js:1019:19)
    at require (internal/modules/cjs/helpers.js:77:18)
    at Object.react/jsx-dev-runtime (/Users/wk/repo/.next/server/pages/_document.js:227:18)
    at __webpack_require__ (/Users/wk/repo/.next/server/webpack-runtime.js:33:42)
    at eval (webpack-internal:///./src/pages/_document.js:5:79)
    at Object../src/pages/_document.js (/Users/wk/repo/.next/server/pages/_document.js:66:1)
    at __webpack_require__ (/Users/wk/repo/.next/server/webpack-runtime.js:33:42) {
  code: 'MODULE_NOT_FOUND',
  requireStack: [
    '/Users/wk/repo/.next/server/pages/_document.js',
    '/Users/wk/repo/guest/node_modules/next/dist/next-server/server/require.js',
    '/Users/wk/repo/guest/node_modules/next/dist/next-server/server/load-components.js',
    '/Users/wk/repo/guest/node_modules/next/dist/next-server/server/api-utils.js',
    '/Users/wk/repo/guest/node_modules/next/dist/next-server/server/next-server.js',
    '/Users/wk/repo/guest/node_modules/next/dist/server/next.js',
    '/Users/wk/repo/guest/node_modules/next/dist/server/lib/start-server.js',
    '/Users/wk/repo/guest/node_modules/next/dist/cli/next-dev.js',
    '/Users/wk/repo/guest/node_modules/next/dist/bin/next'
  ]
}

Would appreciate any suggestions. Thanks!

EDIT I already tried removing node_modules, yarn.lock file etc.

Migsar Navarro · Accepted Answer · 2021-08-05 09:51:23Z

0

Updating react and react-dom didn't work?

I had the same problem after updating next, I removed the .next folder before updating react and react-dom and after that it worked. I am not sure that removing the folder is needed.

I updated both react and react-dom to 17.0.2.

answered Aug 5, 2021 at 9:51

Migsar Navarro

3642 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

mameurer · Accepted Answer · 2021-12-02 23:46:48Z

0

I also ran into this issue, and simply removing the webpack folder from .next solved the issue.

answered Dec 2, 2021 at 23:46

mameurer

7851 gold badge5 silver badges5 bronze badges

Comments

Li Zheng · Accepted Answer · 2023-06-27 02:26:25Z

0

Below can resolve the problem:

add fullySpecified: false

into webpack.config.js ref to https://docs.dynamic.xyz/docs/react-17-with-dynamic-react-sdk-0140

or into config-overrides.js ref to https://github.com/flyskywhy/GCanvasRNExamples/commit/bd58e9f0ccf10195c27adaba47fa31d68864943b which comes from react-app-rewired and react-native-web ref to https://github.com/flyskywhy/g/blob/master/i%E4%B8%BB%E8%A7%82%E7%9A%84%E4%BD%93%E9%AA%8C%E6%96%B9%E5%BC%8F/t%E5%BF%AB%E4%B9%90%E7%9A%84%E4%BD%93%E9%AA%8C/%E7%94%B5%E4%BF%A1/Tool/%E7%BC%96%E7%A8%8B%E8%AF%AD%E8%A8%80/JavaScript/React%E4%BD%BF%E7%94%A8%E8%AF%A6%E8%A7%A3.md#upgrade-to-react-scripts5-and-add-web-workers-support

answered Jun 27, 2023 at 2:26

Li Zheng

7511 gold badge8 silver badges13 bronze badges

Collectives™ on Stack Overflow

How to solve Error: Cannot find module 'react/jsx-dev-runtime' when upgrading to Next.js 11?

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related