Can't resolve '@emotion/react/jsx-runtime'

[kushagra51]

Current behavior:

Scenario: I am creating a package which exports react screens, and that package is then consumed by a container react application that consumes the screens and renders them. But I am getting the below error while running the container application.

Can't resolve '@emotion/react/jsx-runtime' in '/Users/test/Desktop/conatiner-app/node_modules/my-package'
Did you mean 'emotion-react-jsx-runtime.browser.esm.js'?
BREAKING CHANGE: The request '@emotion/react/jsx-runtime' failed to resolve only because it was resolved as fully specified
(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"').
The extension in the request is mandatory for it to be fully specified.
Add the extension to the request.

Note: The catch here is the error only occurs if I am keeping @emotion/react in peer and devDependencies of the package in order to not include it in the bundle, because I have kept @emotion/react in dependency in the container application.

But if I keep @emotion/react in dependency in my package and as well as in dependency in my container application then it works, but doing this isn't a good idea as I don't want to ship the unnecessary @emotion/react code with my package's bundle.

Bundled code of my package which imports jsx from @emotion/react/jsx-runtime:

Environment information:

• react version: 17.0.2
• @emotion/react version: 11.9.3

[yarv-dev]

Have the same issue, would like a fix

[AfLosada]

Same issue here

[dondxniel]

+1

[arnoob16]

+1. I am giving up coding.

[ullaskunder1]

O god, any one with solution?

[geyang]

Here is a fix

import react from '@vitejs/plugin-react-swc';
import mdx from '@mdx-js/rollup';
import vike from 'vike/plugin';
import { UserConfig } from 'vite';
import { cjsInterop } from 'vite-plugin-cjs-interop';
import { ParserConfig } from '@swc/core';

export default {
  plugins: [
    vike({
      prerender: true,
    }),
    mdx(),
    react({
      jsxImportSource: '@emotion/react',
      devTarget: 'es2022',
      tsDecorators: true,
      plugins: [['@swc/plugin-emotion', {}]],
      // parserConfig(id): ParserConfig {
      //   let parsed;
      //   if (id.endsWith('.mdx')) parsed = { syntax: 'ecmascript', tsx: true };
      //   return parsed as ParserConfig;
      // },
    }),
    cjsInterop({
      // List of CJS dependencies that require interop
      dependencies: [
        'react-helmet-async',
      ],
    }),
  ],
  resolve: {
    preserveSymlinks: true,
    alias: {
      "@emotion/react/jsx-runtime": "react/jsx-runtime",
    }

  },
} as UserConfig;

[Andarist]

It's not a fix - it's a workaround that makes using the css prop impossible. I can't say what a fix is since nobody has shared a repro case here