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