react-element-to-jsx-string
react-element-to-jsx-string copied to clipboard
The requested module 'react-is/index.js' does not provide an export named 'ForwardRef'
Recent minor release breaks storybook for react compilation. I think the issue exists in 14.3.3 and 14.3.4 versions and my workaround was to add the following to package.josn:
"resolutions": {
"**/react-element-to-jsx-string": "14.3.2"
}
Thanks for reporting that, I will have a look today (ping @Andarist)
I'm not sure of what happens here. The [email protected]
package is exporting the ForwardRef
object: https://unpkg.com/[email protected]/cjs/react-is.production.min.js
Can you check that you have the 17.0.2
version of react-is
?
Everything seems to works in CRA env: https://codesandbox.io/s/clever-haze-tx9di?file=/src/App.js
@malekpour could you provide a repro case?
I just create a repo to reproduce the error. Instead of CRA I am using vite. I can confirm [email protected]
is resolved but the way react-element-to-jsx-string
import it, is not compatible with ESNext bundlers such as vite or snowpack and perhaps webpack@5.
https://github.com/malekpour/vite-react-element-to-jsx-string
clone, yarn
and then yarn run storybook
to see the error.
I'm having the same error, started from scratch creating a new React Vite project @malekpour
+1 on this, new vite react app with storybook + storybook-builder-vite, for anyone doing the yarn berry or canary dance you want the following in your config and then run yarn again to do the resolution step. Thanks, @malekpour for the workaround!
"resolutions": { "react-element-to-jsx-string": "14.3.2" },
I'm sorry but I did not have the time theses days to have a look on this. If someone have hints or want to make a PR I will try to help/review it quickly as I can.
This happens because Vite serves react-is
"as-is" - without transforming it anyhow and Vite relies on native modules in the browser. The "imported" file is this:
'use strict';
if ("development" === 'production') {
module.exports = require('./cjs/react-is.production.min.js');
} else {
module.exports = require('./cjs/react-is.development.js');
}
and as we can see this is just a CJS file.
According to the Vite docs this should be transformed during a "pre-bundle" step: https://vitejs.dev/guide/features.html#npm-dependency-resolving-and-pre-bundling
From my PoV, it looks like an issue with Vite - I'm not familiar with it enough to say what's exactly broken. The react-is
is using the very same "structure" of distributed files etc as React itself so this should just be handled in the same way - and I'm unsure why it isn't in this case. Could you report this to the Vite team? Maybe they would have some pointers regarding this problem.
I'm new to Vite, so I'm not sure how this works, but it seems the following helps:
// vite.config.ts
import * as reactPlugin from 'vite-plugin-react'
import type { UserConfig } from 'vite'
const config: UserConfig = {
jsx: 'react',
optimizeDeps: {
include: [
'react-is',
]
},
plugins: [reactPlugin]
}
export default config
and if you have a look at node_modules/.vite_opt_cache/react-is.js
it looks like it creates an ESM
reactIs = { isAsyncMode: ..., isSuspense: ... }
:
:
export { reactIs as default }