Can't build because of ´Module not found: Error: Can't resolve 'react/jsx-runtime'´

[jmne]

Describe the bug

When trying to build Docusaurus an error is thrown. I'm using the standard configuration based on the installation instructions.

Expected behavior

Building and serving Docusaurus successful.

Current behavior

The following error is thrown:

Module not found: Error: Can't resolve 'react/jsx-runtime' in '..\website\node_modules\react-live\dist'
Did you mean 'jsx-runtime.js'?
BREAKING CHANGE: The request 'react/jsx-runtime' failed to resolve only because it was resolved as fully specified
(probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, a '.mjs' file, or a '.js' file where the package.json contains '"type": "module"').
The extension in the request is mandatory for it to be fully specified.
Add the extension to the request.
Attempted import error: 'Highlight' is not exported from 'prism-react-renderer' (imported as 'Highlight').
Attempted import error: 'themes' is not exported from 'prism-react-renderer' (imported as 'themes').
[ERROR] Client bundle compiled with errors therefore further build is impossible.

Possible solution

Maybe check compatibility with other packages?

Steps to reproduce

Use standard config for Docusaurus and docusaurus-openapi-docs with the following package versions:

"@docusaurus/core": "^2.3.1",
"@docusaurus/preset-classic": "^2.3.1",
"@docusaurus/plugin-ideal-image": "^2.3.1",
"@easyops-cn/docusaurus-search-local": "^0.35.0",
"docusaurus-plugin-openapi-docs": "^2.0.0-beta.3",
"docusaurus-theme-openapi-docs": "^2.0.0-beta.3",
"@mdx-js/react": "^1.6.21",
"@svgr/webpack": "^5.5.0",
"clsx": "^1.1.1",
"file-loader": "^6.2.0",
"prism-react-renderer": "^1.2.1",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"url-loader": "^4.1.1"

Screenshots

Context

Docusaurus can't be build.

Your Environment

• Version used: 2.0.0-beta.3 // Docusaurus v2.4.0
• Environment name and version (e.g. Chrome 59, node.js 5.4, python 3.7.3): Node v18.13.0
• Operating System and version (desktop or mobile): Windows 11
• Link to your project:

[welcome-to-palo-alto-networks]

🎉 Thanks for opening your first issue here! Welcome to the community!

[SuperManito]

has same problems

[cryptodam]

same here

[sserrata]

It appears react-live may have introduced a breaking change in 4.0.0. I was able to get my site to build after adding this this to package.json:

"resolutions": {
    "react-live": ">=3.1.1 <4.0.0"
  }

[sserrata]

Actually, the breaking change was introduced in 4.1.0, so the following should suffice as a workaround for now:

"resolutions": {
    "react-live": ">=3.1.1 <4.1.0"
  }

[sserrata]

Ah...it looks like react-live 4.1.0+ now requires react/react-dom 18. After upgrading both to 18.0.2 I was able to successfully build.

So, in summary:

• Upgrade to react/react-dom 18
• If you cannot upgrade to React 18, implement resolutions as mentioned above

[SuperManito]

Ah...it looks like react-live 4.1.0+ now requires react/react-dom 18. After upgrading both to 18.0.2 I was able to successfully build.

So, in summary:

• Upgrade to react/react-dom 18
• If you cannot upgrade to React 18, implement resolutions as mentioned above

Are you sure React v18 is compatible with Docusaurus？

[drwelby]

Trying various versions of react/react-dom/react-live hasn't gotten this plugin to run with the betas and Docusaurus 2.4.1. Has anyone found the magic combo to get it running?

[jmne]

@drwelby Using the declarations suggested by @sserrata works for me:

package.json

"dependencies": {
"@docusaurus/core": "^2.4.1",
"@docusaurus/preset-classic": "^2.4.1",
"@docusaurus/plugin-ideal-image": "^2.4.1",
"@easyops-cn/docusaurus-search-local": "^0.35.0",
"@mdx-js/react": "^1.6.21",
"@svgr/webpack": "^5.5.0",
"@graphql-markdown/docusaurus": "^1.18.1",
"@graphql-tools/graphql-file-loader": "^7.5.17",
"graphql": "^16.6.0",
"docusaurus-plugin-openapi-docs": "^2.0.0-beta.3",
"docusaurus-theme-openapi-docs": "^2.0.0-beta.3",
"clsx": "^1.1.1",
"file-loader": "^6.2.0",
"prism-react-renderer": "^1.2.1",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"url-loader": "^4.1.1"
},
"overrides": {
"react-live": ">=3.1.1 <4.0.0"
},
"resolutions": {
"react-live": ">=3.1.1 <4.0.0"
},

[IanVS]

@sserrata react 17 is a peer dependency of docusaurus (up until the 3.0 beta at least, which I think this tool does not support).

Is it not possible to lock the version of react-live within docusaurus-theme-openapi-docs itself?

[aamir1995]

Using the beta.3 with docusaurus 2.4.1:

"overrides": {
"react-live": ">=3.1.1 <4.0.0"
},
"resolutions": {
"react-live": ">=3.1.1 <4.0.0"
},

didn't work for me.

Still the same error:

Module not found: Error: Can't resolve 'react/jsx-runtime' in '/docs/node_modules/docusaurus-theme-openapi-docs/node_modules/react-live/dist'
Did you mean 'jsx-runtime.js'?
BREAKING CHANGE: The request 'react/jsx-runtime' failed to resolve only because it was resolved as fully specified
(probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, a '*.mjs' file, or a '*.js' file where the package.json contains '"type": "module"').
The extension in the request is mandatory for it to be fully specified.
Add the extension to the request.

[danvy]

"overrides": {
"react-live": ">=3.1.1 <4.0.0"
},
"resolutions": {
"react-live": ">=3.1.1 <4.0.0"
},

In package.json worked for me. At least, I was able to compile using 2.0.0-beta.3.

[IanVS]

@sserrata I think this should be re-opened and addressed by pinning react-live within docusaurus-theme-openapi-docs so that users don't need to resort to overrides/resolutions. Any reason not to do that?

[sserrata]

Agreed. We'll make sure to test with the latest Docusaurus before baking the change into our stable release.