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

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

About this issue

Original URL
State: closed
Created 4 years ago
Comments: 22 (2 by maintainers)

Most upvoted comments

As of now, this fixes it for me…

yarn add @types/react

npm install @types/react

+29

cforsyth68 on Aug 25, 2021

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

+25

mverissimo on Nov 18, 2020

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.

+17

KevinGhadyani-minted on Jan 7, 2021

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.

+10

mverissimo on Nov 18, 2020

@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 🤩.

shubham-dentsu on Nov 24, 2020

how do you solve this problem in codesandbox.io.

I’m still waiting for someone to answer this

YusufSanusi on Jan 16, 2022

how do you solve this problem in codesandbox.io.

twalibnurrein07 on Jan 13, 2022

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

moimikey on Dec 24, 2020

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 ?

shubham-dentsu on Nov 19, 2020

Upgraded everything to React 17 and Emotion 11. Took quite a while to get it done since some projects used Enzyme, and we had to update that too.

I’ve never gotten a project with Emotion 10 to run side-by-side with Emotion 11 even from transpiling it in the bundle.

KevinGhadyani-minted on Aug 17, 2021