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

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]

@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'],
};

[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