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

[Andarist]

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.

[teyc]

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 }