react-element-to-jsx-string icon indicating copy to clipboard operation
react-element-to-jsx-string copied to clipboard

The requested module 'react-is/index.js' does not provide an export named 'ForwardRef'

Open malekpour opened this issue 3 years ago • 10 comments

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"
 }

malekpour avatar Oct 21 '21 01:10 malekpour

Thanks for reporting that, I will have a look today (ping @Andarist)

armandabric avatar Oct 21 '21 07:10 armandabric

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?

armandabric avatar Oct 21 '21 09:10 armandabric

Everything seems to works in CRA env: https://codesandbox.io/s/clever-haze-tx9di?file=/src/App.js

armandabric avatar Oct 21 '21 09:10 armandabric

@malekpour could you provide a repro case?

Andarist avatar Oct 21 '21 12:10 Andarist

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.

malekpour avatar Oct 21 '21 15:10 malekpour

I'm having the same error, started from scratch creating a new React Vite project @malekpour

DanielRamosAcosta avatar Oct 23 '21 10:10 DanielRamosAcosta

+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" },

auberryberry avatar Oct 24 '21 22:10 auberryberry

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.

armandabric avatar Oct 25 '21 07:10 armandabric

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.

Andarist avatar Oct 25 '21 09:10 Andarist

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 }

teyc avatar Oct 29 '22 22:10 teyc