Storybook: Can't resolve 'core-js/modules/es.string.replace' with Storybook 6.0.0-rc.13

[DanWahlin]

Describe the bug
I'm using myString.replace(regex) in a custom addon with Storybook 6.0.0-rc.13 and getting the following error during the build process.

Can't resolve 'core-js/modules/es.string.replace' error when building.

This has happened with earlier RCs as well, but did work fine with 6.0.0-rc.0 so I'm guessing it's related to the version of core-js being used under the covers.

Thanks in advance for any help on resolving this!

To Reproduce
Steps to reproduce the behavior:

1. Create a custom addon with a .jsx file in it
2. Add a string.replace call into the .jsx file code:

let content = 'my content';
let output = content.replace(/^['"]|['"]$/g, '');

1. Add the addon into main.js:

module.exports = {
  stories: ['../src/**/*.stories.*'],
  addons: [
    './my-addon/register'
  ]
}

1. Build and run the project (npm start in my project) and the error appears.

Expected behavior
Successful build

Screenshots

Code snippets
Here's a simplified example of the code causing the error. If I remove the replace() call the build works.

let content = 'some value';
return {
    'data-link': content.replace(/^['"]|['"]$/g, '') // this line causes the build error (if removed the build works)
  },
}

System:

Environment Info:

System:
OS: macOS 10.15.5
CPU: (16) x64 Intel(R) Core(TM) i9-9900K CPU @ 3.60GHz
Binaries:
Node: 12.18.1 - ~/.nvm/versions/node/v12.18.1/bin/node
Yarn: 1.22.4 - ~/.nvm/versions/node/v12.18.1/bin/yarn
npm: 6.14.6 - ~/.nvm/versions/node/v12.18.1/bin/npm
Browsers:
Chrome: 84.0.4147.89
Edge: 84.0.522.40
Firefox: 73.0.1
Safari: 13.1.1
npmPackages:
@storybook/addon-actions: 6.0.0-rc.13 => 6.0.0-rc.13
@storybook/addon-console: ^1.2.1 => 1.2.1
@storybook/addon-docs: 6.0.0-rc.13 => 6.0.0-rc.13
@storybook/addon-knobs: 6.0.0-rc.13 => 6.0.0-rc.13
@storybook/addon-links: 6.0.0-rc.13 => 6.0.0-rc.13
@storybook/addon-storysource: 6.0.0-rc.13 => 6.0.0-rc.13
@storybook/addons: 6.0.0-rc.13 => 6.0.0-rc.13
@storybook/preset-create-react-app: ^3.1.4 => 3.1.4
@storybook/react: 6.0.0-rc.13 => 6.0.0-rc.13

[DanWahlin]

As a temporary work around I added the following into package.json:

"core-js": "^3.6.5"

The build now seems to work correctly. So, I'm guessing a core-js dependency somewhere in Storybook just needs updated.

[shilman]

@DanWahlin can you try removing @storybook/addon-console and see if that helps?

[DanWahlin]

Thanks for the suggestion Michael. I removed @storybook/addon-console and the core-js package I added to try to resolve the issue (also deleted node_modules and package-lock.json to start from scratch) but still get the same error.

When I added core-js back into package.json it worked again. While I'm good doing that for now, let me know if there's any additional info you'd like since I'm guessing someone else will eventually hit this.

[ndelangen]

Are you able to provide a reproduction repo I can clone locally?

[DanWahlin]

Thanks - I'll see what I can do there. It's a private repo using a (currently) private framework we'll be releasing soon at Microsoft but I should be able to strip out the stuff I can't show yet. Just need to make the time.

[ndelangen]

If it helps, we can debug together on your machine in a zoom call?

https://calendly.com/ndelangen/storybook

[DanWahlin]

Sounds good - happy to jump on a call. I just setup a meeting for Wednesday.

[DanWahlin]

For future reference, Norbert and I looked at this and the workaround I tried above is the current solution. Add core-js into package.json and the problem goes away.

[cWillow]

Shouldn't this issue remain open until we no longer need to add this workaround?

[shilman]

@cWillow pretty sure this is being tracked in another issue

[alt-jero]

And to another me who gets to the end of this thread wondering what other issue, See here.
https://github.com/storybookjs/storybook/issues/11312

I just had the same issue installing on a repo without any detectable framework and selecting manually "Web Components" when the cli tool asks. Upon running, lots of errors. I tried the core-js workaround and it also worked for me.

Also for the me who doesn't feel like scrolling back up, the workaround is to add the following to your package.json (dev-)dependencies list:
"core-js": "^3.6.5",

and then run npm install

After that you should be good to go!
npm run storybook :D

[shraddha-chadha]

I had the same issue with stroybook v6 + React + Typescript and this solved my issue

.storybook/main.js

const path = require('path');

module.exports = {
  stories: ['../src/**/*.stories.@(ts|tsx)'],
  addons: ['@storybook/addon-actions', '@storybook/addon-links', '@storybook/addon-docs'],
  webpackFinal: (config) => {
    config.module.rules.push({
      test: /\.(ts|tsx)$/,
      use: [
        {
          loader: 'babel-loader',
          options: {
            presets: ['babel-preset-react-app']
          }
        }
      ],
      include: path.resolve(__dirname, '../src'),
      exclude: /node_modules/,
    });
    return config;
  },
};

And .storybook/.babelrc
{ "presets": [ "babel-preset-react-app" ] }

And package.json
"babel-preset-react-app": "^9.1.2",

[tx-steven]

Any new developments on this? Storybook will no longer build in all our projects either. Not sure when the issue started. Currently on version 6.0.22. Can confirm that workaround installing core-js in dev-dependencies fixed the issue.

[zpm683]

Step1: And in package.json like this:
"@storybook/preset-create-react-app": "^3.1.4",

Step2: Add it in .storybook/main.js

module.exports = {
  stories: ["../src/stories/**/*.stories.@(tsx|mdx)"],
  addons: ["@storybook/addon-essentials", "@storybook/preset-create-react-app"],
};

just do it.

[filipsebastian]

Step1: And in package.json like this:
"@storybook/preset-create-react-app": "^3.1.4",

Step2: Add it in .storybook/main.js

module.exports = {
  stories: ["../src/stories/**/*.stories.@(tsx|mdx)"],
  addons: ["@storybook/addon-essentials", "@storybook/preset-create-react-app"],
};

just do it.

I did just that and I get the following error:

Add @babel/preset-react (https://git.io/JfeDR) to the 'presets' section of your Babel config to enable transformation.
If you want to leave it as-is, add @babel/plugin-syntax-jsx (https://git.io/vb4yA) to the 'plugins' section to enable parsing.

I try to do what it says here and I still get the same error over and over again.

[shilman]

@filipsebastian try upgrading to 6.1-beta:

npx sb@next upgrade --prerelease

Or for a fresh install:

npx sb@next init

Most of these comments are from CRA3 / React16. If you're on a new project, you'll probably need to use 6.1. We're hustling to get it released as stable.