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

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:

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

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

Add the addon into main.js:

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

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

Expected behavior Successful build

Screenshots

2020-07-21_11-00-23

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® Core™ 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

About this issue

Original URL
State: closed
Created 4 years ago
Reactions: 2
Comments: 18 (5 by maintainers)

Most upvoted comments

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.

DanWahlin on Jul 21, 2020

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.

zpm683 on Nov 3, 2020

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

shraddha-chadha on Sep 23, 2020

@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.

shilman on Nov 4, 2020

also had this come up seemingly out of nowhere. doing an install of core-js worked for me as well. very odd

pdevito3 on Jan 8, 2021

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 😄

alt-jero on Sep 6, 2020

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

cWillow on Aug 14, 2020

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

DanWahlin on Jul 24, 2020