Webpack errors in versions > 4.1.0
cjseattle opened this issue · comments
It looks like the module property in the react-live package.json changed from dist/index.es.js to dist/index.mjs as of version 4.1.0. When I try to upgrade to version 4.1.0 and up, Webpack gives the following complaint:
ERROR in ../node_modules/react-live/dist/index.mjs 57:0-46
Module not found: Error: Can't resolve 'react/jsx-runtime' in '/Users/ccox/projects/cxe/pattern-library/node_modules/react-live/dist'
Did you mean 'jsx-runtime.js'?
BREAKING CHANGE: The request '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.
If I understand correctly, when using the mjs extension, we need to use fully specificied paths. This is solvable by setting fullySpecified: false in the Webpack config, but seems less than ideal.
There are also issues importing from prism-react-renderer:
ERROR in ../node_modules/react-live/dist/index.mjs 75:4-13
export 'Highlight' (imported as 'Highlight') was not found in 'prism-react-renderer' (possible exports: Prism, default, defaultProps)
ERROR in ../node_modules/react-live/dist/index.mjs 78:28-43
export 'themes' (imported as 'themes') was not found in 'prism-react-renderer' (possible exports: Prism, default, defaultProps)
It looks like the package is expecting version 2 exports, but the version requested in the react-live package is...
"prism-react-renderer": "*",
...for me this is installing version 1.3.5 (probably because that's what's in my cache).
If my interpretation sounds right, and anyone else can confirm a repro, I'm happy to try putting up a PR to fix if the Formidable team doesn't jump on it.
We can look into this. I know there are some changes with how react/jsx-runtime changed from React 17 to 18 with libraries.
Without testing this out it might be worth trying adding the file extension to the import if we are importing the file in question. If not that likely means it’s a package.json:exports issue which we probably don’t have control over…
@ryan-roemer We're not, this is internal to React when you use JSX.
When we moved Nuka and Spectacle over to React 18 peer dep + tsup it requires CJS to be fully specified when being imported into ESM. Similar to how we have to be fully specified with the extension with the themes in Spectacle → https://github.com/FormidableLabs/spectacle/blob/main/packages/spectacle/src/components/code-pane.tsx#L23
Please check out our test repo → https://github.com/FormidableLabs/react-live-webpack-test
Thanks for bringing this up and we will fix the package.json in React Live to make sure the peer dep requirements are set.
Hey @carloskelly13, I tried out the test repo, and everything works. If I then install React 17.02, which is what my app happens to use, I get the Webpack message about the jsx-runtime, Error: Can't resolve 'react/jsx-runtime'. So it seemingly is down to React versions.
I can try to get updated to React 18 to unblock my particular situation. In a perfect world, this would probably work in both versions, but I'll leave that to you as a maintainer to prioritize. 🙂
Chris, thanks for all the feedback here. We've fixed the peer dependency version and seeing if we can leverage some of the esbuild configuration options available to use in tsup to maintain backwards compatibility, but from our research it looks like some of the more modern tooling does do cjs → esm imports differently.