Can't resolve objectSpread2 when building Storybook

[papaiatis]

FAQ

1. How can I clean all cached options?

• Check cacheUniq param in versions < 0.4.x and cacheUniqs in 0.4.x

Are you submitting a bug report or a feature request or a question?

bug report

What is the current behavior?

I'm working on a bigger project and wanted to integrate react-select-async-paginate. I used the approach described in Extended Usage in the readme.

When I build and run my project, everything is fine. But when I start my storybook I'm getting the following build error:

ERROR in ./node_modules/react-select-async-paginate/es/useAsyncPaginate.js
Module not found: Error: Can't resolve '@babel/runtime/helpers/objectSpread2' in '/Users/atis/demo/node_modules/react-select-async-paginate/es'
 @ ./node_modules/react-select-async-paginate/es/useAsyncPaginate.js 1:0-65 46:45-58 46:59-72 50:9-22 50:23-36
 @ ./node_modules/react-select-async-paginate/es/index.js
 @ ./src/components/Selector.tsx
 @ ./src sync .stories.(tsx|js)$
 @ ./.storybook/config.js
 @ multi ./node_modules/@storybook/react/node_modules/@storybook/core/dist/server/config/polyfills.js ./node_modules/@storybook/react/node_modules/@storybook/core/dist/server/config/globals.js ./.storybook/config.js ./node_modules/webpack-hot-middleware/client.js?reload=true

I'm using currently latest version of this package and @storybook/[email protected].

What is the expected behavior?

I expect no build errors for react-select-async-paginate when building Storybook.

Sandbox Link

What's your environment?

• [email protected]
• [email protected]
• [email protected]
• [email protected]
• @storybook/[email protected]
• macOS Catalina 10.15.7

Other information

I read through Storybook issues first but did not find anything about objectSpread2. I suspect it's gotta be some babel config, but that's out of my skills. Any help would be appreciated.

I saw that this repo has some custom webpack config for Storybook. My plugins configured for typescript files were this:

plugins: [
  'react-hot-loader/babel',
]

but I added the same plugin as you did as follows:

plugins: [
  'react-hot-loader/babel',
  // https://github.com/babel/babel/issues/10261
  [
    '@babel/plugin-transform-runtime',
    {
      version: require('@babel/helpers/package.json').version,
    },
  ],
],

but that did not help.

[vtaits]

Hi. Try to add @babel/runtime to dependencies manually.

[papaiatis]

No that did not help. I have the objectSpread2 at the correct location: /Users/atis/demo/node_modules/@babel/runtime/helpers/objectSpread2.js

[papaiatis]

I found many instances of @babel/runtime in my project and Storybook seems to be using an old version:

├─ @storybook/[email protected]
│  └─ @babel/[email protected]

And in this ticket https://github.com/instructure/instructure-ui/issues/73 they mention objectSpread2 being available after 7.5.1.

[papaiatis]

What do you use @babel/runtime for @vtaits ?

[papaiatis]

I cloned this repo, removed @babel/runtime dependency from both packages and yarn validate showed no issues and also Storybook works just fine. What do you think, can we get rid of this dependency? If so I could use it with and older React + Storybook v4.

[vtaits]

@babel/runtime is a part of https://babeljs.io/docs/en/babel-plugin-transform-runtime. It reduces size of bundle. If you don't use this plugin, babel will copy helpers from @babel/runtime to every compiled file.

Yes, it shouldn't duplicate in node_modules. Try to remove node_modules and yarn.lock (or package-lock.json if you use npm) and then run yarn install. Yarn will create new tree of dependencies without duplicates of non-conflict versions.

[papaiatis]

I tried removing yarn.lock and now I'm seeing a different exception:

Uncaught TypeError: container.reduce is not a function
    ContainerDecorator tree_decorators.js:69
    React 11
    unstable_runWithPriority scheduler.development.js:653
    React 6
    onData compose.js:161
    processState gen_podda_loader.js:17
    fireSubscriptions index.js:41
    fireSubscriptions index.js:40
    update index.js:78
    setStories api.js:95
    handleAPI provider.js:93
    _handleEvent index.js:160
    _handleEvent index.js:159
    Channel index.js:35
    _handleEvent index.js:116
    PostmsgTransport index.js:36
    createChannel index.js:129
    ReactProvider provider.js:46
    node_modules manager.bundle.js:17727
    Webpack 6

I tried to debug it but I cannot trace it back to any root cause. If I remove react-select-async-paginate it works again.

[vtaits]

Closed because the project no longer uses @babel/runtime