Emotion: Cannot find module 'react/jsx-runtime'

[mverissimo]

Current behavior:

I've upgraded to v11, I received the following error when the run the test suite.

  ● Test suite failed to run

    Cannot find module 'react/jsx-runtime' from 'node_modules/@emotion/react/jsx-runtime/dist/emotion-react-jsx-runtime.cjs.dev.js'

    Require stack:
      node_modules/@emotion/react/jsx-runtime/dist/emotion-react-jsx-runtime.cjs.dev.js
      node_modules/@emotion/react/jsx-runtime/dist/emotion-react-jsx-runtime.cjs.js
      packages/react-ui/src/utils/test-utils.js
      jest.setup.js

      at Resolver.resolveModule (node_modules/jest-resolve/build/index.js:306:11)
      at Object.<anonymous> (node_modules/@emotion/react/jsx-runtime/dist/emotion-react-jsx-runtime.cjs.dev.js:14:23)

My babel file:

module.exports = {
  env: {
    test: {
      presets: [
        [
          "@babel/preset-env",
          {
            targets: {
              node: "current",
            },
          },
        ],
        [
          "@babel/preset-react",
          {
            runtime: "automatic",
            importSource: "@emotion/react",
          },
        ],
      ],
      plugins: ["@emotion/babel-plugin"],
    },
  },
};

Environment information:

• react version: 17.0.1
• @emotion/react version: 11.0.0
• @emotion/jest version: 11.1.0
• @emotion/babel-plugin version: 11.0.0

[Andarist]

It means that it doesn't find react/jsx-runtime module as if you would have an older version installed.

Please always try to share a repro case in a runnable form - either by providing a git repository to clone or a codesandbox. OSS maintainers usually can't afford the time to set up the repro, even if exact steps are given (and here they are not).

[mverissimo]

I'm investigating and this looks like a problem with yarn to resolve the dependencies, when I try to run npm install this works fine, but with yarn not.

[mverissimo]

I generated a new lock file and works fine, thanks for the help!

[shubham-dentsu]

Cannot find module 'react/jsx-runtime' from 'Accordion.js'

I'm facing same issue, I removed node_modules and package-lock.json and run npm i.
still getting "Cannot find module 'react/jsx-runtime' from 'Accordion.js'" error.

Any idea ?

[mverissimo]

Hi @shubham-dentsu do you have a repro case?

[shubham-dentsu]

@mverissimo Thanks for reply. Issue is resolved now, I locked my dependency versions so removing node_modules and package-lock.json didn't worked for me 😅.

So I updated my react and react-script version and issue is resolved.

Thanks 🤩.

[moimikey]

this is still an issue with yarn 2 + workspaces + pnp. same with /styled/base not found.

[Andarist]

Please always try to share a repro case in a runnable form - either by providing a git repository to clone or a codesandbox. OSS maintainers usually can't afford the time to set up the repro, even if exact steps are given.

[KevinGhadyani-minted]

Looks like certain versions of Emotion aren't compatible with certain versions of React. In this particular case, I had to upgrade react and react-dom from 16.13.1 to 17.0.1 for Emotion 11 to successfully pass unit tests in one project.