Emotion: Module not found: Error: Can't resolve '@emotion/core/jsx-runtime.js'

[maxguzenski]

Using { runtime: 'automatic' } at "@emotion/babel-preset-css-prop" as describe here: https://github.com/emotion-js/emotion/blob/master/packages/core/CHANGELOG.md

I got:
Module not found: Error: Can't resolve '@emotion/core/jsx-runtime.js'

Environment information:

• react 17.0.1:
• emotion/core : 10.1.1
• @emotion/babel-preset-css-prop: 10.1.0

babel.config.js:

module.exports = (api) => {
  // This caches the Babel config
  api.cache.using(() => process.env.NODE_ENV)

  const presets = [
    [
      '@babel/preset-env', {
        useBuiltIns: 'usage',
        corejs: '3.6',
        modules: 'auto',
        debug: false
      }
    ],
    [
      '@babel/preset-react', { runtime: 'automatic' }
    ],
    [
      // let use css={} on components
      // minify and crate sourcemap on production
      '@emotion/babel-preset-css-prop', { runtime: 'automatic' }
    ]
  ]

  const plugins = [
    !api.env('production') && 'react-refresh/babel',
    ['@babel/plugin-transform-runtime', { regenerator: true }],
    '@babel/plugin-proposal-class-properties',
    '@babel/plugin-proposal-json-strings',
    '@babel/plugin-proposal-export-namespace-from',
    '@babel/plugin-proposal-numeric-separator',
    '@babel/plugin-proposal-throw-expressions',
    '@babel/plugin-proposal-export-default-from',
    '@babel/plugin-proposal-optional-chaining',
    '@babel/plugin-proposal-nullish-coalescing-operator',
    '@babel/plugin-proposal-do-expressions',
    '@babel/plugin-transform-strict-mode',
    //'babel-plugin-graphql-tag'
    //'emotion' -- not needed with preset @emotion/babel-preset-css-prop,
  ].filter(Boolean)

  return { presets, plugins }
}

[Andarist]

Please ensure that u are using the latest version of @babel/helper-builder-react-jsx-experimental. This is not a direct dependency but rather a dependency of @babel/plugin-transform-react-jsx which both @emotion/babel-preset-css-prop & @babel/preset-react depend on. As it's not a direct dependency of your you might need to force this update somehow by manipulating your lock file or something.

Unfortunately, Babel does not release dependant packages if they didn't change so you can't just bump your direct dependencies (their highest version is still the same) 😢

BTW. Please do not use both @babel/preset-react & @emotion/babel-preset-css-prop at the same time. They both have the JSX plugins and this might lead to some weird issues. Just use the Emotion's preset.

[Justkant]

BTW. Please do not use both @babel/preset-react & @emotion/babel-preset-css-prop at the same time. They both have the JSX plugins and this might lead to some weird issues. Just use the Emotion's preset.

Should the @emotion/babel-preset-css-prop's README.md be updated ?

It's a bit misleading because of this sentence:

If you use @babel/preset-react or @babel/preset-typescript ensure that @emotion/babel-preset-css-prop is inserted after them in your babel config.

---

~I wonder as well, do we need to manually include @babel/preset-react's syntax plugins after removing the preset ?~
You'll probably need to add @babel/plugin-transform-react-display-name if you rely on it.

Should @babel/plugin-transform-react-display-name be added to the @emotion/babel-preset-css-prop when using { runtime: 'automatic' } to match @babel/preset-react if we need to remove it ?

[dcastil]

I'm also confused regarding the new JSX runtime. When I yarn add @emotion/[email protected], the jsx-runtime and jsx-dev-runtime directories are missing and I can't find the functions for the automatic runtime anywhere in the dependency directory.

[Andarist]

@Justkant it might be because it's late but it's hard for me to focus on your questions right now. Could you rephrase them in a way that the whole context would be included for each? For example when you mention "should this be added..." - I'm not sure what this actually points to here.

@dcastil As far as I can tell both directories are correctly published and unpkg reflects that:
https://unpkg.com/browse/@emotion/core@10.1.1/

---

As to the original issue with the .js suffix. Nicolo from the Babel team has prepared releases of all dependants of the faulty package, outside of their regular release flow. So it should be possible to fix this particular issue by just upgrading your JSX-related packagess/presets to their latest versions.

---

Releasing @emotion/babel-preset-css-prop with the runtime option might have been a mistake. I have thought that Babel plugins just override the same plugins that have been configured before them as this is what Babel docs mention here. Unfortunately, this is not true across presets - therefore we land with 2 JSX plugins applied if we mix any two of: @babel/preset-react, @emotion/babel-preset-css-prop, next/babel and anything else that includes the JSX plugin. This is causing some problems because they fight over the inserted auto-imports, resulting in a broken code.

While I'm going to talk with the Babel team about the possibility to change their logic to actually deduplicate those plugins, this probably won't be included in Babel 7 anyway as one could rely on the current behavior (it has been there for quite a long time). Given that our preset was just adding auto-imports to files and configuring our Babel plugin and the former is now implemented in the @babel/preset-react there is no much need for our preset (unless you are still stuck using the classic runtime).

So the current recommendation of mine would be to just use this:

module.exports = {
  presets: [
    ['@babel/preset-react', { runtime: 'automatic', importSource: '@emotion/core' }],
  ],
  plugins: ['babel-plugin-emotion'],
};

[Justkant]

@Andarist No problem, I just edited my questions, tell me if you need any other modification or precision.

Edit: Your recommendation seems to be the better option, I just gave it a try and it works well, thanks.

[dcastil]

Thanks for clarifying @Andarist! I tested it again and the jsx-runtime directory is there. I guess VS Code somehow missed to show the directory correctly last time. 🤷 Sorry for the confusion!

[Andarist]

@Justkant the recommendation is to not ise our preset - im going to add a deprecation warning for the runtime option today. Just use the React’s preset + our plugin

[Justkant]

@Andarist exactly what I meant in my last edit. Thanks for your help

[Andarist]

Given that the original issue in this thread has been addresses and Ive answered follow up questions im going to close this issue. Feel free to open a new one if you encounter any problems.

[Emiliano-Bucci]

@Andarist Hi! I'm having the same issue (after updating emotion to version 11), and i'm also having issues tryng to update @babel/helper-builder-react-jsx-experimental dependency. Is there a proper way to do it? Because i've also try to manually set the version of the package to the latest one - which is 7.12.4 but without luck (even doing npm i --package-lock-only). Thanks a lot

[Andarist]

I'm not sure what's the best way to do it - it also might depend on the package manager you are using. With Yarn 1 I'm just removing the entry containing a particular package from the lock file and run yarn - this regenerated the lockfile by reading the latest compatible version of a package that I've removed without regenerating the rest of the lockfile. You could also try to uninstall all dependants of this package (this should lead to this package being removed from the lockfile) and reinstalling those dependants (which should lead to this package being readded but using the latest compatible version).