Resolve failed after update @storybook related dependencies

[zheeeng]

After updating outdated @storybook packages, chrome console report:

index.js?v=a3d44ef9:5 Uncaught SyntaxError: The requested module '/@fs/Users/zheeeng/Workspace/foo/node_modules/.pnpm/[email protected]/node_modules/react-is/index.js?v=a3d44ef9' does not provide an export named 'ForwardRef'

I trace the generated file that:

http://localhost:6006/@fs/Users/zheeeng/Workspace/foo/node_modules/.pnpm/[email protected]/node_modules/react-element-to-jsx-string/dist/esm/index.js?v=a3d44ef9:

import { isSuspense, isStrictMode, isProfiler, isLazy, isContextProvider, isContextConsumer, isMemo, isForwardRef, ForwardRef, Memo } from '/@fs/Users/zheeeng/Workspace/foo/node_modules/.pnpm/[email protected]/node_modules/react-is/index.js?v=a3d44ef9';

http://localhost:6006/@fs/Users/zheeeng/Workspace/foo/node_modules/.pnpm/[email protected]/node_modules/react-is/index.js?v=a3d44ef9:

'use strict';

if ("development" === 'production') {
  module.exports = require('./cjs/react-is.production.min.js');
} else {
  module.exports = require('./cjs/react-is.development.js');
}

react-element-to-jsx-string uses ESM module format, react-is uses CJS module format.

Outdated screenshot:

[IanVS]

Have you tried adding react-is to optimizeDeps.include in your viteFinal?

[dbwcooper]

@IanVS I got the same problem, and the problem still exists after I configure optimizeDeps.includes.

Have you tried adding react-is to optimizeDeps.include in your viteFinal?

[IanVS]

I can try taking a look at it if someone can provide a reproduction.

[brettdewoody]

Same issue here. I've added react-is to optimizeDeps.include, which resulted in more missing exports. I added each missing export to optimizeDeps.include and ended up with:

• 'react-is'
• 'hoist-non-react-statics'
• 'memoizerific'
• 'global'
• 'deep-object-diff'
• '@storybook/client-logger'
• '@storybook/csf'
• 'lodash/uniq'
• 'lodash/cloneDeep'
• 'lodash/pickBy'
• 'lodash/mapValues'
• 'util-deprecate/browser'

despite adding that last one it complains that util-deprecate/browser does not provide an export named 'default'.

Will continue to try to resolve.

[IanVS]

I see that the OP is using pnpm. Are all of you?

Also, are you being sure to spread in the existing config? The config parameter from viteFinal already contains a lot of those that @brettdewoody is mentioning.

[brettdewoody]

I'm not using pnpm.

I was not spreading the existing config.optimizeDeps.include, but have now added that. I then got an error of another missing export, added that to optimizeDeps.include and now it appears to be working. Here's my final optimizeDeps.include:

if (configType === 'DEVELOPMENT') {
  config.optimizeDeps.include = [
    'react-is',
    '@base2/pretty-print-object',
    ...config?.optimizeDeps?.include
  ]
}

The conditional configType is necessary to make it work on both dev and in the static build (prod).

[joshwooding]

@brettdewoody I've had to do the same. I'm using storybook 6.4.0-beta.19

[IanVS]

A PR to add these to the base set of optimizeDeps would be appreciated.

[IanVS]

I've released v0.1.3 which should fix this issue. Feel free to upgrade and remove react-is and @base2/pretty-print-object from your optimizeDeps.include.

[neilchaudhuri]

FYI I encountered the same with react-element-to-jsx-string. I added it to my include entry so I am fine, but just in case you cared to add that as well.

[IanVS]

Thanks @neilchaudhuri. Do you know if this is something that's being brought in by a storybook dependency, or one of your other dependencies? We only really want to add dependencies to our list that we know is storybook-related. Everything else will need to be handled the way you have done, in the user's viteFinal.

[neilchaudhuri]

It appears to be a dependency of @storybook/addon-docs.

Coincidentally, I have an open issue in Storybook proper for the same addon