Module not found: 'react/jsx-runtime'

[Devisione]

Bug report

Describe the bug

Module react/jsx-runtime can't resolve in react-dnd.

Steps to reproduce the behavior

1. install packages "@strapi/design-system": "^0.0.1-alpha.70", "@strapi/plugin-graphql": "^4.0.0", "@strapi/plugin-i18n": "4.0.0", "@strapi/plugin-users-permissions": "4.0.0", "@strapi/provider-upload-cloudinary": "^4.0.0", "@strapi/strapi": "4.0.0",
2. try to run "strapi develop"
3. Got error: Module not found: Error: Can't resolve 'react/jsx-runtime'

Expected behavior

strapi develop is started

System

• Node.js version: 14.17.6
• NPM version: 6.14.15
• Strapi version: v4
• Database: postgresql
• Operating system: MacOS

[Devisione]

its problem in https://github.com/facebook/create-react-app/issues/11769. but mb we can hold version in the major version?

[soupette]

@Devisione you also need to install @strapi/icons as well.

I am closing this issue as we don't have enough informations to reproduce the bug.

[Mweydert]

In case someone else meet this problem again... I was facing the same issue when building my Strapi application:

ℹ Compiling Webpack
#15 231.9 ModuleNotFoundError: Module not found: Error: Can't resolve 'react/jsx-runtime' in '/srv/app/packages/application/cms/node_modules/@strapi/icons/dist'
#15 231.9 Did you mean 'jsx-runtime.js'?
#15 231.9 BREAKING CHANGE: The request 'react/jsx-runtime' failed to resolve only because it was resolved as fully specified
#15 231.9 (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"').
#15 231.9 The extension in the request is mandatory for it to be fully specified.
#15 231.9 Add the extension to the request.
#15 231.9     at /srv/app/packages/application/cms/node_modules/webpack/lib/Compilation.js:2011:28
#15 231.9     at /srv/app/packages/application/cms/node_modules/webpack/lib/NormalModuleFactory.js:795:13
#15 231.9     at eval (eval at create (/srv/app/packages/application/cms/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:10:1)
#15 231.9     at /srv/app/packages/application/cms/node_modules/webpack/lib/NormalModuleFactory.js:275:22
#15 231.9     at eval (eval at create (/srv/app/packages/application/cms/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:9:1)
#15 231.9     at /srv/app/packages/application/cms/node_modules/webpack/lib/NormalModuleFactory.js:431:22
#15 231.9     at /srv/app/packages/application/cms/node_modules/webpack/lib/NormalModuleFactory.js:124:11
#15 231.9     at /srv/app/packages/application/cms/node_modules/webpack/lib/NormalModuleFactory.js:667:25
#15 231.9     at /srv/app/packages/application/cms/node_modules/webpack/lib/NormalModuleFactory.js:852:8
#15 231.9     at /srv/app/packages/application/cms/node_modules/webpack/lib/NormalModuleFactory.js:972:5
#15 231.9 resolve 'react/jsx-runtime' in '/srv/app/packages/application/cms/node_modules/@strapi/icons/dist'
#15 231.9   Parsed request is a module
#15 231.9   using description file: /srv/app/packages/application/cms/node_modules/@strapi/icons/package.json (relative path: ./dist)
#15 231.9     Field 'browser' doesn't contain a valid alias configuration
#15 231.9     resolve as module
#15 231.9       /srv/app/packages/application/cms/node_modules/@strapi/icons/dist/node_modules doesn't exist or is not a directory
#15 231.9       /srv/app/packages/application/cms/node_modules/@strapi/icons/node_modules doesn't exist or is not a directory
#15 231.9       /srv/app/packages/application/cms/node_modules/@strapi/node_modules doesn't exist or is not a directory
#15 231.9       /srv/app/packages/application/cms/node_modules/node_modules doesn't exist or is not a directory
#15 231.9       looking for modules in /srv/app/packages/application/cms/node_modules
#15 231.9         existing directory /srv/app/packages/application/cms/node_modules/react
#15 231.9           using description file: /srv/app/packages/application/cms/node_modules/react/package.json (relative path: .)
#15 231.9             using description file: /srv/app/packages/application/cms/node_modules/react/package.json (relative path: ./jsx-runtime)
#15 231.9               Field 'browser' doesn't contain a valid alias configuration
#15 231.9               /srv/app/packages/application/cms/node_modules/react/jsx-runtime doesn't exist
#15 231.9       /srv/app/packages/application/node_modules doesn't exist or is not a directory
#15 231.9       /srv/app/packages/node_modules doesn't exist or is not a directory
#15 231.9       /srv/app/node_modules doesn't exist or is not a directory
#15 231.9       /srv/node_modules doesn't exist or is not a directory
#15 231.9       /node_modules doesn't exist or is not a directory
#15 231.9       looking for modules in /srv/app/packages/application/cms/node_modules/@strapi/admin/node_modules
#15 231.9         /srv/app/packages/application/cms/node_modules/@strapi/admin/node_modules/react doesn't exist

For context: I could not identify the reason why my build suddenly broke: no changes in my package.json nor my yarn.lock file. The build only crashed when building app in a Docker image.

Specifying @strapi/icons did not fix the issue in my context.

Extending Strapi admin's webpack config to add aliases in order to specify how to resolve this module worked (workaround from this issue).

---

EDIT: the above solution enabled me to pass build phase but led to an issue when accessing Strapi admin panel.

Replacing resolve.alias by a rules as described in this issue did fix both build and Strapi admin panel itself.

// ./src/admin/webpack.config.js

'use strict';

/* eslint-disable no-unused-vars */
module.exports = (config, webpack) => {
  // Note: we provide webpack above so you should not `require` it
  // Perform customizations to webpack config
  // Important: return the modified config

  config.module = {
    rules: [{
      test: /\.m?js/,
      resolve: {
        fullySpecified: false
      }
    }]
  }

  // config.webpack
  return config;
};

[CesarHipolito]

I had the same problem and fixed it using the Node version recommended for the docs and removing @strapi/icons for Node 16

The Strapi Docs recommends using Node 16 for Strapi v4

[Mweydert]

I'll give a try to update to Node 16, I am still facing issue after admin's login page with adding the previous rules I mentioned.

---

Edit: using Node 16 did not help. I finally managed to get everything working by freezing version of @strapi/plugin-graphql, which was specifying a version of @strapi/icons not compatible with the one specified by @strapi/admin.

[mrkariox]

I had the same issue - for me it helped to check what version of @strapi/icons was used in @strapi/admin and add it as dependency in main package.json file in the same version (ex. "@strapi/icons": "1.2.5" NOT "@strapi/icons": "^1.2.5") to force it to use this version.

I was also using yarn not npm.

strapi: 4.4.5 node: 16.14.2 npm: 8.5.0 yarn: 1.22.18 inside docker container

[JoshuaAlzate]

I did every recommendations from the comments in here, but I stilll have no luck. I'm trying to run strapi@4.4.5

[Mweydert]

@JoshuaAlzate what helps me identify which version change induced a conflict was running command yarn why (yarn why @strapi/icons in this case). This command also exists for npm: npm why <pckName>

It may help you to identify conflicting versions of @strapi/icons installed. Then either try to fix the conflict by upgrading one of them or freeze the version that cause issue.

Hope it helps

[JoshuaAlzate]

@mrkariox I skipped strapi@4.4.5 and it worked.

[qvil]

@mrkariox I skipped strapi@4.4.5 and it worked.

@JoshuaAlzate Hi, I'm facing the same issue, Which version did you skip to? Could you tell me what version you used?

[JoshuaAlzate]

@mrkariox I skipped strapi@4.4.5 and it worked.

@JoshuaAlzate Hi, I'm facing the same issue, Which version did you skip to? Could you tell me what version you used?

I installed 4.6.1, and the error was gone. Right now, my app is running at 4.9.0

[TheHuns]

Thanks @JoshuaAlzate your comments helped me a ton. I just needed to update from 4.3.x to 4.9 and for anyone doing a similar jump, just follow the steps as the Strapi docs demonstrate, but know that it likely won't build until you get to 4.6.1

[lukehoang1905]

Thanks @JoshuaAlzate. I installed to dependencies": { "@strapi/plugin-graphql": "^4.9.2", "@strapi/plugin-i18n": "4.9.2", "@strapi/plugin-users-permissions": "4.9.2", "@strapi/provider-upload-cloudinary": "^4.9.2", "@strapi/strapi": "4.9.2",

Worked like a charm. ✨