storybook@6 throws a core-js error #11255

43081j · 2020-06-21T19:36:32Z

With storybook 6, my very basic typescript setup throws errors about core-js polyfills every time.

Module not found: Error: Can't resolve 'core-js/modules/web.dom-collections.iterator'

this is thrown from 'generated-stories-entry'. i can see earlier in the webpack output that the polyfill was built:

[./node_modules/@storybook/core/dist/server/common/polyfills.js] 120 bytes {vendors~main} [built]

which afaik is where you include core-js.

with storybook 5, this works just fine. its a clean setup from today, npm i -D @storybook/html (5 or 6) and this config:

module.exports = {
  stories: ['../src/**/*.stories.ts'],
  webpackFinal: (config) => {
    config.module.rules.push({
      test: /\.ts$/,
      use: [
        {loader: require.resolve('ts-loader')}
      ]
    });
    config.resolve.extensions.push('.ts');
    return config;
  }
};

I think this is because there are multiple core-js versions in my node_modules and storybook is resolving the wrong one (somehow). if i look at the one inside storybook's packages, its got the right files.

this isn't something i should have to 'fix' though IMO, as so many dependencies use core-js it seems like a very likely situation for many to bump into. my guess is you can fix it by installing core-js as a direct dependency but thats also far from ideal.

EDIT:

Temporary workaround

If you've come across this issue while searching, we do not yet have a solution merged in (this issue will close when we do). However, there is a workaround: simply install core-js@3 as a direct dependency (npm i -D core-js@3).

If that doesn't work for you, please do comment so we are aware in case there are some other edge cases.

The text was updated successfully, but these errors were encountered:

shilman · 2020-06-21T22:45:45Z

cc @ndelangen

gerdy · 2020-06-29T08:01:38Z

I have the same problem.
I set a breakpoint on the webpackFinal method, but it did not trigger.
I suspect that the change here caused this problem, which was good before 6.0.0 beta14.

ndelangen · 2020-07-03T08:36:36Z

ERR! Module not found: Error: Can't resolve 'chromatic/isChromatic' in '<LOCAL_PROJECT_PATH>/node_modules/@storybook/ui/dist/components/layout'
(node:11596) UnhandledPromiseRejectionWarning: ModuleNotFoundError: Module not found: Error: Can't resolve 'chromatic/isChromatic' in '<LOCAL_PROJECT_PATH>/node_modules/@storybook/ui/dist/components/layout'

whut? I'm really confused.. the preview is bundling code for the manager.. and it's missing a devDependency..This makes very little sense..

ben-reitz · 2020-07-03T22:28:10Z

And as @43081j suggests, adding core-js v3 as a dev dependency fixes it but that doesn't seem like a great solution...

kevinkuebler · 2020-07-17T21:50:30Z

I just ran into the same issue trying to update my storybook from 5.2.5 to 6.0.0-rc.9. Like @BWrites I added the latest core-js as a dev dependency and that fixed it, but I agree that it's not a great solution.

stale · 2020-08-08T07:12:47Z

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

43081j · 2020-08-13T10:15:36Z

just a reminder that now that you published 6.0 officially, this is still a problem.

it is very awkward having to install core-js directly in each repo we use storybook for. do you have any suggested fix on your end for this? anything we can contribute to help?

shilman · 2020-08-13T13:31:44Z

@43081j I don't think we understand the problem. Perhaps @ndelangen can share some of his wisdom here.

43081j · 2020-08-13T13:36:16Z

essentially, storybook's generated output tries to require core-js for various polyfills.

im guessing because it is generated output and doesn't "live" in the storybook directory (node_modules/@storybook), it will resolve the first available core-js from the top level rather than resolving it relative to storybook's directory.

so if you have storybook in a project which already has a different version of core-js (not necessarily as a direct dependency, all sorts of other projects also depend on core-js), that one may be required by accident rather than the one storybook wants.

this means the paths fail to resolve if the two core-js versions are drastically different.

the workaround (npm i -D core-js) solves the problem because then your top-level core-js is the same version as the one storybook wants. the older version will have then been moved deeper to live alongside whatever was requiring it.

shilman · 2020-08-13T15:19:30Z

@43081j would you be available to pair with @ndelangen on this?

MattFisher · 2020-08-14T05:53:26Z

Also having this problem.

Based on #6204 (comment), I added this to my config and it's resolving correctly now:

resolve: {
    alias: {
        'core-js/modules': path.resolve(
            __dirname,
            '..',
            'node_modules/core-js/modules'
        ),
    }
}

Note that this is pointing to the root node_modules/core-js folder in my project, not to one that's bundled with anything else.

43081j · 2020-08-14T07:35:39Z

@shilman ill see if i get some free time at the weekend and will try debug it a bit at least. it'll be to do with the webpack config i guess and where it resolves modules from

my guess is we effectively run webpack from the project directory. then when we generate our webpack entry, somewhere down the tree we must require core-js. but by that point, webpack's CWD is the project dir rather than storybook's dir, so it will pick up whatever the root core-js version is instead of the one storybook wants.

we could do whats in the previous comment but use the path to storybook's core-js explicitly. but it seems a real shame and a bit hacky since this exact problem could happen with any number of dependencies in theory.

mrtwinkler · 2020-08-16T15:17:10Z

Same here. Just set up a clean project with vue-cli, added storybook and storybook-docs. npm run storybook results in lots of Module not found: Error: Can't resolve 'core-js/modules/....

storybookjs/storybook#11255

pmunin · 2020-08-19T01:03:02Z

same here. Updating storybook from 5.3. to 6.0.12 - lead to bunch of errors like Can't resolve 'core-js/modules/web.dom-collections.iterator'

kurt-unleashed · 2020-08-19T06:40:37Z

Same here, even with the workaround :(

endreujhelyi · 2020-08-21T09:08:50Z

same got a bunch of error like
Module not found: Error: Can't resolve 'core-js/modules/web.dom-collections.iterator'
Module not found: Error: Can't resolve 'core-js/modules/es.symbol.iterator'

storybookjs/storybook#11255

awkale · 2020-08-25T22:18:05Z

Also having this problem.

Based on #6204 (comment), I added this to my config and it's resolving correctly now:
resolve: {
    alias: {
        'core-js/modules': path.resolve(
            __dirname,
            '..',
            'node_modules/core-js/modules'
        ),
    }
}
Note that this is pointing to the root node_modules/core-js folder in my project, not to one that's bundled with anything else.

@MattFisher which config file?

mayoyml · 2020-08-25T23:43:44Z

@awkale main.js :)

madroneropaulo · 2020-12-02T21:54:32Z

Still doesn't work. Just updated with the patch 6.2.0-alpha.1

ben-reitz · 2020-12-02T22:07:18Z

This release has finally fixed it for our component library's Storybook - thanks!

shilman · 2020-12-03T05:58:06Z

For those of you whose projects are NOT fixed by 6.2.0-alpha.1, some suggestions:

Try removing node_modules and/or lockfiles and reinstalling?
Try removing whatever workarounds you've added before

If that still doesn't fix it, perhaps you can post a link to your repo and we might be able to take a look and see what's going on. Thanks and thanks for your patience on this!

hydrosquall · 2020-12-09T16:57:57Z

Hey, thanks for the continued work on this. Unfortunately, upgrading to 6.2.0-alpha.1 on a private repo didn't fix the stories, we didn't have any workarounds to remove. I'll update here if I come up with a minimal repo that contains the issue.

The repository is a mix of JS/typescript, managed by yarn 2 (berry), and has core-js version 3.0.1 specified at the root level package.json. Most of the errors are of the form

Module not found: Error: Your application tried to access core-js, but it isn't declared in your dependencies; this makes the require call ambiguous and unsound.

Required package: core-js (via "core-js/modules/es.string.iterator")
// path to some internal code

henriquez · 2020-12-13T23:23:02Z

I had this problem as well, to fix it I had to delete my node_modules and package-lock.json and update storybook and its add ons to alpha.6, including
"@storybook/addon-actions": "^6.2.0-alpha.6",
"@storybook/addon-links": "^6.2.0-alpha.6",
"@storybook/addons": "^6.2.0-alpha.6",
"@storybook/svelte": "^6.2.0-alpha.6"

This got storybook itself to load without errors, unfortunately my Svelte component is no longer recognized - Storybook says it can't find any components despite nothing changing since 5.3.

I had to revert to 5.3 since debugging this has already eaten the better part of a day. 5.3 works fine, no issues.

my main.js is

module.exports = {
  stories: ['../src/ui/*.stories.@(ts|js)'],
  addons: ['@storybook/addon-actions', '@storybook/addon-links'],
};

my Bot.stories.js file is

import Bot from './Bot.svelte';
import { action } from '@storybook/addon-actions';

export default {
  title: 'Bot',
  component: Bot,
}

// test fixtures
import testA from '../state/test/testA.json'; 
// initializations for reading test fixtures
// errors
//const fs = require('fs'), path = require('path'); 

;

// See https://github.com/YogliB/svelte-component-template/blob/master/src/stories/Button.stories.js
// for examples.
// the below yields an error
//const markdown = fs.readFileSync(path.join(__dirname, '../src/state/test/testA.json'), 'utf8');


// initial task state
export const startNewConversation = () => ({
  Component: Bot,

  // Pass props and bindings into component

  props: { testBotConfig: testA }
  //on: { click: action('clicked') },
});

uriklar · 2020-12-29T06:42:30Z

Hi @shilman, I'm seeing this error using v6.2.0-alpha.10.

My use case is that we have a library in node_modules that we are bundeling in our app, so I added this to the custom webpack config:

Custom webpack config

module.exports = {
    webpackFinal: async (config, { configType }) => {
        // `configType` has a value of 'DEVELOPMENT' or 'PRODUCTION'
        // You can change the configuration based on that.
        // 'PRODUCTION' is used when building the static version of storybook.

        // Make whatever fine-grained changes you need

        const { exclude, ...duplicatedConfig } = config.module.rules[0];

        config.module.rules[0] = {
            ...duplicatedConfig,
            include: [
                ...duplicatedConfig.include,
                fs.realpathSync(`${__dirname}/../node_modules/@honeybook/hbui`),
                fs.realpathSync(`${__dirname}/../node_modules/@honeybook/icons`)
            ]
        };

        // Return the altered config
        return config;
    }
};

Runtime error:

export.js:2 Uncaught TypeError: __webpack_require__(...) is not a function
    at Object../node_modules/core-js/internals/export.js (export.js:2)
    at __webpack_require__ (bootstrap:848)
    at fn (bootstrap:150)
    at Object../node_modules/core-js/modules/es.object.define-property.js (es.object.define-property.js:1)
    at __webpack_require__ (bootstrap:848)
    at fn (bootstrap:150)
    at Object../node_modules/webpack/buildin/module.js (harmony-module.js:24)
    at __webpack_require__ (bootstrap:848)
    at fn (bootstrap:150)
    at Object../node_modules/regenerator-runtime/runtime.js (runtime.js:8)

Webpack debug output:

{
mode: 'development',
bail: false,
devtool: '#cheap-module-source-map',
entry: [
 '/Users/uriklar/Code/honeybook-react/node_modules/@storybook/core/dist/cjs/server/common/polyfills.js',
 '/Users/uriklar/Code/honeybook-react/node_modules/@storybook/core/dist/cjs/server/preview/globals.js',
 '/Users/uriklar/Code/honeybook-react/.storybook/storybook-init-framework-entry.js',
 '/Users/uriklar/Code/honeybook-react/.storybook/preview.js-generated-config-entry.js',
 '/Users/uriklar/Code/honeybook-react/node_modules/webpack-hot-middleware/client.js?reload=true&quiet=false&noInfo=undefined'
],
output: {
 path: '/Users/uriklar/Code/honeybook-react/node_modules/.cache/storybook/public',
 filename: '[name].[hash].bundle.js',
 publicPath: ''
},
plugins: [
 FilterWarningsPlugin {
   exclude: [ /export '\S+' was not found in 'global'/ ]
 },
 VirtualModulesPlugin {
   _staticModules: {
     '/Users/uriklar/Code/honeybook-react/.storybook/storybook-init-framework-entry.js': "import '@storybook/react';",
     '/Users/uriklar/Code/honeybook-react/.storybook/preview.js-generated-config-entry.js': 'function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }\n' +
       '\n' +
       'function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }\n' +
       '\n' +
       'function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }\n' +
       '\n' +
       '/* eslint-disable import/no-unresolved */\n' +
       "import { addDecorator, addParameters, addLoader, addArgTypesEnhancer } from '/Users/uriklar/Code/honeybook-react/node_modules/@storybook/client-api';\n" +
       "import { logger } from '/Users/uriklar/Code/honeybook-react/node_modules/@storybook/client-logger';\n" +
       "import * as config from '/Users/uriklar/Code/honeybook-react/.storybook/preview.js';\n" +
       'Object.keys(config).forEach(function (key) {\n' +
       '  var value = config[key];\n' +
       '\n' +
       '  switch (key) {\n' +
       "    case 'args':\n" +
       "    case 'argTypes':\n" +
       '      {\n' +
       "        return logger.warn('Invalid args/argTypes in config, ignoring.', JSON.stringify(value));\n" +
       '      }\n' +
       '\n' +
       "    case 'decorators':\n" +
       '      {\n' +
       '        return value.forEach(function (decorator) {\n' +
       '          return addDecorator(decorator, false);\n' +
       '        });\n' +
       '      }\n' +
       '\n' +
       "    case 'loaders':\n" +
       '      {\n' +
       '        return value.forEach(function (loader) {\n' +
       '          return addLoader(loader, false);\n' +
       '        });\n' +
       '      }\n' +
       '\n' +
       "    case 'parameters':\n" +
       '      {\n' +
       '        return addParameters(_objectSpread({}, value), false);\n' +
       '      }\n' +
       '\n' +
       "    case 'argTypesEnhancers':\n" +
       '      {\n' +
       '        return value.forEach(function (enhancer) {\n' +
       '          return addArgTypesEnhancer(enhancer);\n' +
       '        });\n' +
       '      }\n' +
       '\n' +
       "    case 'globals':\n" +
       "    case 'globalTypes':\n" +
       '      {\n' +
       '        var v = {};\n' +
       '        v[key] = value;\n' +
       '        return addParameters(v, false);\n' +
       '      }\n' +
       '\n' +
       '    default:\n' +
       '      {\n' +
       '        // eslint-disable-next-line prefer-template\n' +
       "        return console.log(key + ' was not supported :( !');\n" +
       '      }\n' +
       '  }\n' +
       '});',
     '/Users/uriklar/Code/honeybook-react/.storybook/generated-stories-entry.js': '"use strict";\n' +
       '\n' +
       'var _frameworkImportPath = require("@storybook/react");\n' +
       '\n' +
       '/* eslint-disable import/no-unresolved */\n' +
       '(0, _frameworkImportPath.configure)([], module, false);'
   }
 },
 HtmlWebpackPlugin {
   options: {
     template: '/Users/uriklar/Code/honeybook-react/node_modules/@storybook/core/dist/cjs/server/templates/index.ejs',
     templateContent: false,
     templateParameters: [Function: templateParameters],
     filename: 'iframe.html',
     publicPath: 'auto',
     hash: false,
     inject: false,
     scriptLoading: 'blocking',
     compile: true,
     favicon: false,
     minify: {
       collapseWhitespace: true,
       removeComments: true,
       removeRedundantAttributes: true,
       removeScriptTypeAttributes: false,
       removeStyleLinkTypeAttributes: true,
       useShortDoctype: true
     },
     cache: true,
     showErrors: true,
     chunks: 'all',
     excludeChunks: [],
     chunksSortMode: 'none',
     meta: {},
     base: false,
     title: 'Webpack App',
     xhtml: false,
     alwaysWriteToDisk: true
   },
   childCompilerHash: undefined,
   assetJson: undefined,
   hash: undefined,
   version: 4
 },
 DefinePlugin {
   definitions: {
     'process.env': {
       NODE_ENV: '"development"',
       NODE_PATH: '""',
       STORYBOOK: '"true"',
       PUBLIC_URL: '"."'
     },
     NODE_ENV: '"development"'
   }
 },
 WatchMissingNodeModulesPlugin {
   nodeModulesPath: '/Users/uriklar/Code/honeybook-react/node_modules'
 },
 HotModuleReplacementPlugin {
   options: {},
   multiStep: undefined,
   fullBuildTimeout: 200,
   requestTimeout: 10000
 },
 CaseSensitivePathsPlugin {
   options: {},
   logger: {
     log: [Function: bound consoleCall],
     warn: [Function: bound consoleCall],
     dir: [Function: bound consoleCall],
     time: [Function: bound consoleCall],
     timeEnd: [Function: bound consoleCall],
     timeLog: [Function: bound consoleCall],
     trace: [Function: bound consoleCall],
     assert: [Function: bound consoleCall],
     clear: [Function: bound consoleCall],
     count: [Function: bound consoleCall],
     countReset: [Function: bound consoleCall],
     group: [Function: bound consoleCall],
     groupEnd: [Function: bound consoleCall],
     table: [Function: bound consoleCall],
     debug: [Function: bound consoleCall],
     info: [Function: bound consoleCall],
     dirxml: [Function: bound consoleCall],
     error: [Function: bound consoleCall],
     groupCollapsed: [Function: bound consoleCall],
     Console: [Function: Console],
     profile: [Function: profile],
     profileEnd: [Function: profileEnd],
     timeStamp: [Function: timeStamp],
     context: [Function: context],
     [Symbol(kBindStreamsEager)]: [Function: bound ],
     [Symbol(kBindStreamsLazy)]: [Function: bound ],
     [Symbol(kBindProperties)]: [Function: bound ],
     [Symbol(kWriteToConsole)]: [Function: bound ],
     [Symbol(kGetInspectOptions)]: [Function: bound ],
     [Symbol(kFormatForStdout)]: [Function: bound ],
     [Symbol(kFormatForStderr)]: [Function: bound ]
   },
   pathCache: {},
   fsOperations: 0,
   primed: false
 },
 ProgressPlugin {
   profile: false,
   handler: undefined,
   modulesCount: 500,
   showEntries: false,
   showModules: true,
   showActiveModules: true
 },
 DefinePlugin { definitions: {} },
 DocgenPlugin {
   name: 'React Docgen Typescript Plugin',
   options: {
     shouldExtractLiteralValuesFromEnum: true,
     shouldRemoveUndefinedFromOptional: true,
     propFilter: [Function: propFilter]
   }
 }
],
module: {
 rules: [
   {
     test: /\.(mjs|tsx?|jsx?)$/,
     use: [
       {
         loader: '/Users/uriklar/Code/honeybook-react/node_modules/babel-loader/lib/index.js',
         options: {
           cacheDirectory: '/Users/uriklar/Code/honeybook-react/node_modules/.cache/storybook/babel',
           sourceType: 'unambiguous',
           presets: [
             [
               '/Users/uriklar/Code/honeybook-react/node_modules/@babel/preset-env/lib/index.js',
               { shippedProposals: true }
             ],
             '/Users/uriklar/Code/honeybook-react/node_modules/@babel/preset-typescript/lib/index.js',
             [
               '/Users/uriklar/Code/honeybook-react/node_modules/@babel/preset-react/lib/index.js',
               { runtime: 'automatic' }
             ],
             '/Users/uriklar/Code/honeybook-react/node_modules/@babel/preset-flow/lib/index.js'
           ],
           plugins: [
             '/Users/uriklar/Code/honeybook-react/node_modules/@babel/plugin-transform-shorthand-properties/lib/index.js',
             '/Users/uriklar/Code/honeybook-react/node_modules/@babel/plugin-transform-block-scoping/lib/index.js',
             [
               '/Users/uriklar/Code/honeybook-react/node_modules/@babel/plugin-proposal-decorators/lib/index.js',
               { legacy: true }
             ],
             [
               '/Users/uriklar/Code/honeybook-react/node_modules/@babel/plugin-proposal-class-properties/lib/index.js',
               { loose: true }
             ],
             [
               '/Users/uriklar/Code/honeybook-react/node_modules/@babel/plugin-proposal-private-methods/lib/index.js',
               { loose: true }
             ],
             '/Users/uriklar/Code/honeybook-react/node_modules/@babel/plugin-proposal-export-default-from/lib/index.js',
             '/Users/uriklar/Code/honeybook-react/node_modules/@babel/plugin-syntax-dynamic-import/lib/index.js',
             [
               '/Users/uriklar/Code/honeybook-react/node_modules/@babel/plugin-proposal-object-rest-spread/lib/index.js',
               { loose: true, useBuiltIns: true }
             ],
             '/Users/uriklar/Code/honeybook-react/node_modules/@babel/plugin-transform-classes/lib/index.js',
             '/Users/uriklar/Code/honeybook-react/node_modules/@babel/plugin-transform-arrow-functions/lib/index.js',
             '/Users/uriklar/Code/honeybook-react/node_modules/@babel/plugin-transform-parameters/lib/index.js',
             '/Users/uriklar/Code/honeybook-react/node_modules/@babel/plugin-transform-destructuring/lib/index.js',
             '/Users/uriklar/Code/honeybook-react/node_modules/@babel/plugin-transform-spread/lib/index.js',
             '/Users/uriklar/Code/honeybook-react/node_modules/@babel/plugin-transform-for-of/lib/index.js',
             '/Users/uriklar/Code/honeybook-react/node_modules/babel-plugin-macros/dist/index.js',
             '/Users/uriklar/Code/honeybook-react/node_modules/@babel/plugin-proposal-optional-chaining/lib/index.js',
             '/Users/uriklar/Code/honeybook-react/node_modules/@babel/plugin-proposal-nullish-coalescing-operator/lib/index.js',
             [
               '/Users/uriklar/Code/honeybook-react/node_modules/babel-plugin-polyfill-corejs3/lib/index.js',
               {
                 method: 'usage-global',
                 absoluteImports: '/Users/uriklar/Code/honeybook-react/node_modules/core-js/index.js',
                 version: '3.8.1'
               }
             ],
             [
               '/Users/uriklar/Code/honeybook-react/node_modules/babel-plugin-emotion/dist/babel-plugin-emotion.cjs.js',
               { sourceMap: true, autoLabel: true }
             ],
             '/Users/uriklar/Code/honeybook-react/node_modules/babel-plugin-add-react-displayname/index.js'
           ],
           overrides: [
             {
               test: /\.(mjs|jsx?)$/,
               plugins: [
                 [
                   '/Users/uriklar/Code/honeybook-react/node_modules/babel-plugin-react-docgen/lib/index.js',
                   {
                     DOC_GEN_COLLECTION_NAME: 'STORYBOOK_REACT_CLASSES'
                   }
                 ]
               ]
             }
           ]
         }
       }
     ],
     include: [
       '/Users/uriklar/Code/honeybook-react',
       '/Users/uriklar/Code/honeybook-react/node_modules/@honeybook/hbui',
       '/Users/uriklar/Code/honeybook-react/node_modules/@honeybook/icons'
     ]
   },
   {
     test: /\.js$/,
     use: [
       {
         loader: '/Users/uriklar/Code/honeybook-react/node_modules/babel-loader/lib/index.js',
         options: {
           sourceType: 'unambiguous',
           presets: [
             [
               '/Users/uriklar/Code/honeybook-react/node_modules/@babel/preset-env/lib/index.js',
               {
                 shippedProposals: true,
                 modules: false,
                 targets: 'defaults'
               }
             ],
             '/Users/uriklar/Code/honeybook-react/node_modules/@babel/preset-react/lib/index.js'
           ],
           plugins: [
             '/Users/uriklar/Code/honeybook-react/node_modules/@babel/plugin-transform-shorthand-properties/lib/index.js',
             '/Users/uriklar/Code/honeybook-react/node_modules/@babel/plugin-transform-block-scoping/lib/index.js',
             [
               '/Users/uriklar/Code/honeybook-react/node_modules/@babel/plugin-proposal-decorators/lib/index.js',
               { legacy: true }
             ],
             [
               '/Users/uriklar/Code/honeybook-react/node_modules/@babel/plugin-proposal-class-properties/lib/index.js',
               { loose: true }
             ],
             [
               '/Users/uriklar/Code/honeybook-react/node_modules/@babel/plugin-proposal-private-methods/lib/index.js',
               { loose: true }
             ],
             '/Users/uriklar/Code/honeybook-react/node_modules/@babel/plugin-proposal-export-default-from/lib/index.js',
             '/Users/uriklar/Code/honeybook-react/node_modules/@babel/plugin-syntax-dynamic-import/lib/index.js',
             [
               '/Users/uriklar/Code/honeybook-react/node_modules/@babel/plugin-proposal-object-rest-spread/lib/index.js',
               { loose: true, useBuiltIns: true }
             ],
             '/Users/uriklar/Code/honeybook-react/node_modules/@babel/plugin-transform-classes/lib/index.js',
             '/Users/uriklar/Code/honeybook-react/node_modules/@babel/plugin-transform-arrow-functions/lib/index.js',
             '/Users/uriklar/Code/honeybook-react/node_modules/@babel/plugin-transform-parameters/lib/index.js',
             '/Users/uriklar/Code/honeybook-react/node_modules/@babel/plugin-transform-destructuring/lib/index.js',
             '/Users/uriklar/Code/honeybook-react/node_modules/@babel/plugin-transform-spread/lib/index.js',
             '/Users/uriklar/Code/honeybook-react/node_modules/@babel/plugin-transform-for-of/lib/index.js',
             '/Users/uriklar/Code/honeybook-react/node_modules/babel-plugin-macros/dist/index.js',
             '/Users/uriklar/Code/honeybook-react/node_modules/@babel/plugin-proposal-optional-chaining/lib/index.js',
             '/Users/uriklar/Code/honeybook-react/node_modules/@babel/plugin-proposal-nullish-coalescing-operator/lib/index.js',
             [
               '/Users/uriklar/Code/honeybook-react/node_modules/babel-plugin-polyfill-corejs3/lib/index.js',
               {
                 method: 'usage-global',
                 absoluteImports: '/Users/uriklar/Code/honeybook-react/node_modules/core-js/index.js',
                 version: '3.8.1'
               }
             ]
           ]
         }
       }
     ],
     include: [Function: include]
   },
   {
     test: /\.md$/,
     use: [
       {
         loader: '/Users/uriklar/Code/honeybook-react/node_modules/raw-loader/dist/cjs.js'
       }
     ]
   },
   {
     test: /\.css$/,
     sideEffects: true,
     use: [
       '/Users/uriklar/Code/honeybook-react/node_modules/style-loader/dist/cjs.js',
       {
         loader: '/Users/uriklar/Code/honeybook-react/node_modules/css-loader/dist/cjs.js',
         options: { importLoaders: 1 }
       },
       {
         loader: '/Users/uriklar/Code/honeybook-react/node_modules/postcss-loader/src/index.js',
         options: {
           ident: 'postcss',
           postcss: {},
           plugins: [Function: plugins]
         }
       }
     ]
   },
   {
     test: /\.(svg|ico|jpg|jpeg|png|apng|gif|eot|otf|webp|ttf|woff|woff2|cur|ani|pdf)(\?.*)?$/,
     loader: '/Users/uriklar/Code/honeybook-react/node_modules/file-loader/dist/cjs.js',
     options: { name: 'static/media/[name].[hash:8].[ext]', esModule: false }
   },
   {
     test: /\.(mp4|webm|wav|mp3|m4a|aac|oga)(\?.*)?$/,
     loader: '/Users/uriklar/Code/honeybook-react/node_modules/url-loader/dist/cjs.js',
     query: { limit: 10000, name: 'static/media/[name].[hash:8].[ext]' }
   }
 ]
},
resolve: {
 extensions: [
   '.mjs', '.js',
   '.jsx', '.ts',
   '.tsx', '.json',
   '.cjs'
 ],
 modules: [ 'node_modules' ],
 mainFields: [ 'browser', 'main' ],
 alias: {
   '@emotion/core': '/Users/uriklar/Code/honeybook-react/node_modules/@emotion/core',
   '@emotion/styled': '/Users/uriklar/Code/honeybook-react/node_modules/@emotion/styled',
   'emotion-theming': '/Users/uriklar/Code/honeybook-react/node_modules/emotion-theming',
   '@storybook/addons': '/Users/uriklar/Code/honeybook-react/node_modules/@storybook/addons',
   '@storybook/api': '/Users/uriklar/Code/honeybook-react/node_modules/@storybook/api',
   '@storybook/channels': '/Users/uriklar/Code/honeybook-react/node_modules/@storybook/channels',
   '@storybook/channel-postmessage': '/Users/uriklar/Code/honeybook-react/node_modules/@storybook/channel-postmessage',
   '@storybook/components': '/Users/uriklar/Code/honeybook-react/node_modules/@storybook/components',
   '@storybook/core-events': '/Users/uriklar/Code/honeybook-react/node_modules/@storybook/core-events',
   '@storybook/router': '/Users/uriklar/Code/honeybook-react/node_modules/@storybook/router',
   '@storybook/theming': '/Users/uriklar/Code/honeybook-react/node_modules/@storybook/theming',
   '@storybook/semver': '/Users/uriklar/Code/honeybook-react/node_modules/@storybook/core/node_modules/@storybook/semver',
   '@storybook/client-api': '/Users/uriklar/Code/honeybook-react/node_modules/@storybook/client-api',
   '@storybook/client-logger': '/Users/uriklar/Code/honeybook-react/node_modules/@storybook/client-logger',
   react: '/Users/uriklar/Code/honeybook-react/node_modules/react',
   'react-dom': '/Users/uriklar/Code/honeybook-react/node_modules/react-dom'
 },
 plugins: [
   {
     apply: [Function: nothing],
     makePlugin: [Function],
     moduleLoader: [Function],
     topLevelLoader: { apply: [Function: nothing] },
     bind: [Function],
     tsLoaderOptions: [Function],
     forkTsCheckerOptions: [Function]
   }
 ]
},
resolveLoader: { plugins: [ { apply: [Function: nothing] } ] },
optimization: {
 splitChunks: { chunks: 'all' },
 runtimeChunk: true,
 sideEffects: true,
 usedExports: true,
 concatenateModules: true,
 minimizer: []
},
performance: { hints: false }
}
Manager webpack config
{
name: 'manager',
mode: 'development',
bail: false,
devtool: 'none',
entry: [
 '/Users/uriklar/Code/honeybook-react/node_modules/@storybook/core/dist/cjs/server/common/polyfills.js',
 '/Users/uriklar/Code/honeybook-react/node_modules/@storybook/core/dist/cjs/client/manager/index.js',
 '/Users/uriklar/Code/honeybook-react/.storybook/generated-refs.js'
],
output: {
 path: '/Users/uriklar/Code/honeybook-react/node_modules/.cache/storybook/public',
 filename: '[name].[chunkhash].bundle.js',
 publicPath: ''
},
cache: FileSystemCache {
 basePath: '/Users/uriklar/Code/honeybook-react/node_modules/.cache/storybook/dev-server',
 ns: '325c8f456729b912b0d2134054eb7448'
},
plugins: [
 VirtualModulesPlugin {
   _staticModules: {
     '/Users/uriklar/Code/honeybook-react/.storybook/generated-refs.js': '"use strict";\n' +
       '\n' +
       'var _addons = require("@storybook/addons");\n' +
       '\n' +
       '_addons.addons.setConfig({\n' +
       '  refs: {}\n' +
       '});'
   }
 },
 HtmlWebpackPlugin {
   options: {
     template: '/Users/uriklar/Code/honeybook-react/node_modules/@storybook/core/dist/cjs/server/templates/index.ejs',
     templateContent: false,
     templateParameters: [Function: templateParameters],
     filename: 'index.html',
     publicPath: 'auto',
     hash: false,
     inject: false,
     scriptLoading: 'blocking',
     compile: true,
     favicon: false,
     minify: 'auto',
     cache: true,
     showErrors: true,
     chunks: 'all',
     excludeChunks: [],
     chunksSortMode: 'none',
     meta: {},
     base: false,
     title: 'Webpack App',
     xhtml: false,
     alwaysWriteToDisk: true
   },
   childCompilerHash: undefined,
   assetJson: undefined,
   hash: undefined,
   version: 4
 },
 CaseSensitivePathsPlugin {
   options: {},
   logger: {
     log: [Function: bound consoleCall],
     warn: [Function: bound consoleCall],
     dir: [Function: bound consoleCall],
     time: [Function: bound consoleCall],
     timeEnd: [Function: bound consoleCall],
     timeLog: [Function: bound consoleCall],
     trace: [Function: bound consoleCall],
     assert: [Function: bound consoleCall],
     clear: [Function: bound consoleCall],
     count: [Function: bound consoleCall],
     countReset: [Function: bound consoleCall],
     group: [Function: bound consoleCall],
     groupEnd: [Function: bound consoleCall],
     table: [Function: bound consoleCall],
     debug: [Function: bound consoleCall],
     info: [Function: bound consoleCall],
     dirxml: [Function: bound consoleCall],
     error: [Function: bound consoleCall],
     groupCollapsed: [Function: bound consoleCall],
     Console: [Function: Console],
     profile: [Function: profile],
     profileEnd: [Function: profileEnd],
     timeStamp: [Function: timeStamp],
     context: [Function: context],
     [Symbol(kBindStreamsEager)]: [Function: bound ],
     [Symbol(kBindStreamsLazy)]: [Function: bound ],
     [Symbol(kBindProperties)]: [Function: bound ],
     [Symbol(kWriteToConsole)]: [Function: bound ],
     [Symbol(kGetInspectOptions)]: [Function: bound ],
     [Symbol(kFormatForStdout)]: [Function: bound ],
     [Symbol(kFormatForStderr)]: [Function: bound ]
   },
   pathCache: {},
   fsOperations: 0,
   primed: false
 },
 DefinePlugin { definitions: {} },
 DefinePlugin {
   definitions: {
     'process.env': {
       NODE_ENV: '"development"',
       NODE_PATH: '""',
       STORYBOOK: '"true"',
       PUBLIC_URL: '""'
     },
     NODE_ENV: '"development"'
   }
 }
],
module: {
 rules: [
   {
     test: /\.(mjs|tsx?|jsx?)$/,
     use: [
       {
         loader: '/Users/uriklar/Code/honeybook-react/node_modules/babel-loader/lib/index.js',
         options: {
           sourceType: 'unambiguous',
           presets: [
             [
               '/Users/uriklar/Code/honeybook-react/node_modules/@babel/preset-env/lib/index.js',
               { shippedProposals: true }
             ],
             '/Users/uriklar/Code/honeybook-react/node_modules/@babel/preset-typescript/lib/index.js',
             '/Users/uriklar/Code/honeybook-react/node_modules/@babel/preset-react/lib/index.js'
           ],
           plugins: [
             '/Users/uriklar/Code/honeybook-react/node_modules/@babel/plugin-transform-shorthand-properties/lib/index.js',
             '/Users/uriklar/Code/honeybook-react/node_modules/@babel/plugin-transform-block-scoping/lib/index.js',
             [
               '/Users/uriklar/Code/honeybook-react/node_modules/@babel/plugin-proposal-decorators/lib/index.js',
               { legacy: true }
             ],
             [
               '/Users/uriklar/Code/honeybook-react/node_modules/@babel/plugin-proposal-class-properties/lib/index.js',
               { loose: true }
             ],
             [
               '/Users/uriklar/Code/honeybook-react/node_modules/@babel/plugin-proposal-private-methods/lib/index.js',
               { loose: true }
             ],
             '/Users/uriklar/Code/honeybook-react/node_modules/@babel/plugin-proposal-export-default-from/lib/index.js',
             '/Users/uriklar/Code/honeybook-react/node_modules/@babel/plugin-syntax-dynamic-import/lib/index.js',
             [
               '/Users/uriklar/Code/honeybook-react/node_modules/@babel/plugin-proposal-object-rest-spread/lib/index.js',
               { loose: true, useBuiltIns: true }
             ],
             '/Users/uriklar/Code/honeybook-react/node_modules/@babel/plugin-transform-classes/lib/index.js',
             '/Users/uriklar/Code/honeybook-react/node_modules/@babel/plugin-transform-arrow-functions/lib/index.js',
             '/Users/uriklar/Code/honeybook-react/node_modules/@babel/plugin-transform-parameters/lib/index.js',
             '/Users/uriklar/Code/honeybook-react/node_modules/@babel/plugin-transform-destructuring/lib/index.js',
             '/Users/uriklar/Code/honeybook-react/node_modules/@babel/plugin-transform-spread/lib/index.js',
             '/Users/uriklar/Code/honeybook-react/node_modules/@babel/plugin-transform-for-of/lib/index.js',
             '/Users/uriklar/Code/honeybook-react/node_modules/babel-plugin-macros/dist/index.js',
             '/Users/uriklar/Code/honeybook-react/node_modules/@babel/plugin-proposal-optional-chaining/lib/index.js',
             '/Users/uriklar/Code/honeybook-react/node_modules/@babel/plugin-proposal-nullish-coalescing-operator/lib/index.js',
             [
               '/Users/uriklar/Code/honeybook-react/node_modules/babel-plugin-polyfill-corejs3/lib/index.js',
               {
                 method: 'usage-global',
                 absoluteImports: '/Users/uriklar/Code/honeybook-react/node_modules/core-js/index.js',
                 version: '3.8.1'
               }
             ],
             '/Users/uriklar/Code/honeybook-react/node_modules/@babel/plugin-transform-template-literals/lib/index.js'
           ]
         }
       }
     ],
     include: [ '/Users/uriklar/Code/honeybook-react' ],
     exclude: [ /node_modules/, /dist/ ]
   },
   {
     test: /\.js$/,
     use: [
       {
         loader: '/Users/uriklar/Code/honeybook-react/node_modules/babel-loader/lib/index.js',
         options: {
           sourceType: 'unambiguous',
           presets: [
             [
               '/Users/uriklar/Code/honeybook-react/node_modules/@babel/preset-env/lib/index.js',
               {
                 shippedProposals: true,
                 modules: false,
                 targets: 'defaults'
               }
             ],
             '/Users/uriklar/Code/honeybook-react/node_modules/@babel/preset-react/lib/index.js'
           ],
           plugins: [
             '/Users/uriklar/Code/honeybook-react/node_modules/@babel/plugin-transform-shorthand-properties/lib/index.js',
             '/Users/uriklar/Code/honeybook-react/node_modules/@babel/plugin-transform-block-scoping/lib/index.js',
             [
               '/Users/uriklar/Code/honeybook-react/node_modules/@babel/plugin-proposal-decorators/lib/index.js',
               { legacy: true }
             ],
             [
               '/Users/uriklar/Code/honeybook-react/node_modules/@babel/plugin-proposal-class-properties/lib/index.js',
               { loose: true }
             ],
             [
               '/Users/uriklar/Code/honeybook-react/node_modules/@babel/plugin-proposal-private-methods/lib/index.js',
               { loose: true }
             ],
             '/Users/uriklar/Code/honeybook-react/node_modules/@babel/plugin-proposal-export-default-from/lib/index.js',
             '/Users/uriklar/Code/honeybook-react/node_modules/@babel/plugin-syntax-dynamic-import/lib/index.js',
             [
               '/Users/uriklar/Code/honeybook-react/node_modules/@babel/plugin-proposal-object-rest-spread/lib/index.js',
               { loose: true, useBuiltIns: true }
             ],
             '/Users/uriklar/Code/honeybook-react/node_modules/@babel/plugin-transform-classes/lib/index.js',
             '/Users/uriklar/Code/honeybook-react/node_modules/@babel/plugin-transform-arrow-functions/lib/index.js',
             '/Users/uriklar/Code/honeybook-react/node_modules/@babel/plugin-transform-parameters/lib/index.js',
             '/Users/uriklar/Code/honeybook-react/node_modules/@babel/plugin-transform-destructuring/lib/index.js',
             '/Users/uriklar/Code/honeybook-react/node_modules/@babel/plugin-transform-spread/lib/index.js',
             '/Users/uriklar/Code/honeybook-react/node_modules/@babel/plugin-transform-for-of/lib/index.js',
             '/Users/uriklar/Code/honeybook-react/node_modules/babel-plugin-macros/dist/index.js',
             '/Users/uriklar/Code/honeybook-react/node_modules/@babel/plugin-proposal-optional-chaining/lib/index.js',
             '/Users/uriklar/Code/honeybook-react/node_modules/@babel/plugin-proposal-nullish-coalescing-operator/lib/index.js',
             [
               '/Users/uriklar/Code/honeybook-react/node_modules/babel-plugin-polyfill-corejs3/lib/index.js',
               {
                 method: 'usage-global',
                 absoluteImports: '/Users/uriklar/Code/honeybook-react/node_modules/core-js/index.js',
                 version: '3.8.1'
               }
             ]
           ]
         }
       }
     ],
     include: [Function: include]
   },
   {
     test: /\.css$/,
     use: [
       '/Users/uriklar/Code/honeybook-react/node_modules/style-loader/dist/cjs.js',
       {
         loader: '/Users/uriklar/Code/honeybook-react/node_modules/css-loader/dist/cjs.js',
         options: { importLoaders: 1 }
       }
     ]
   },
   {
     test: /\.(svg|ico|jpg|jpeg|png|apng|gif|eot|otf|webp|ttf|woff|woff2|cur|ani|pdf)(\?.*)?$/,
     loader: '/Users/uriklar/Code/honeybook-react/node_modules/file-loader/dist/cjs.js',
     query: { name: 'static/media/[name].[hash:8].[ext]' }
   },
   {
     test: /\.(mp4|webm|wav|mp3|m4a|aac|oga)(\?.*)?$/,
     loader: '/Users/uriklar/Code/honeybook-react/node_modules/url-loader/dist/cjs.js',
     query: { limit: 10000, name: 'static/media/[name].[hash:8].[ext]' }
   }
 ]
},
resolve: {
 extensions: [
   '.mjs', '.js',
   '.jsx', '.json',
   '.cjs', '.ts',
   '.tsx'
 ],
 modules: [ 'node_modules' ],
 mainFields: [ 'browser', 'main' ],
 alias: {
   '@emotion/core': '/Users/uriklar/Code/honeybook-react/node_modules/@emotion/core',
   '@emotion/styled': '/Users/uriklar/Code/honeybook-react/node_modules/@emotion/styled',
   'emotion-theming': '/Users/uriklar/Code/honeybook-react/node_modules/emotion-theming',
   '@storybook/addons': '/Users/uriklar/Code/honeybook-react/node_modules/@storybook/addons',
   '@storybook/api': '/Users/uriklar/Code/honeybook-react/node_modules/@storybook/api',
   '@storybook/channels': '/Users/uriklar/Code/honeybook-react/node_modules/@storybook/channels',
   '@storybook/components': '/Users/uriklar/Code/honeybook-react/node_modules/@storybook/components',
   '@storybook/core-events': '/Users/uriklar/Code/honeybook-react/node_modules/@storybook/core-events',
   '@storybook/router': '/Users/uriklar/Code/honeybook-react/node_modules/@storybook/router',
   '@storybook/theming': '/Users/uriklar/Code/honeybook-react/node_modules/@storybook/theming',
   '@storybook/ui': '/Users/uriklar/Code/honeybook-react/node_modules/@storybook/ui',
   react: '/Users/uriklar/Code/honeybook-react/node_modules/react',
   'react-dom': '/Users/uriklar/Code/honeybook-react/node_modules/react-dom'
 },
 plugins: [
   {
     apply: [Function: nothing],
     makePlugin: [Function],
     moduleLoader: [Function],
     topLevelLoader: { apply: [Function: nothing] },
     bind: [Function],
     tsLoaderOptions: [Function],
     forkTsCheckerOptions: [Function]
   }
 ]
},
resolveLoader: { plugins: [ { apply: [Function: nothing] } ] },
recordsPath: '/Users/uriklar/Code/honeybook-react/node_modules/.cache/storybook/public/records.json',
performance: { hints: false },
optimization: {
 splitChunks: { chunks: 'all' },
 runtimeChunk: true,
 sideEffects: true,
 usedExports: true,
 concatenateModules: true,
 minimizer: []
}
}

I tried these suggested solutions:

Installing core-js and aliassing it in the webpack config
Removing node_modules and lock file and re installing

Any suggestions?

shilman · 2020-12-30T05:10:21Z

@43081j any chance you can provide some support on this one? looks like people are still running into this issue even after your change.

43081j · 2020-12-30T11:45:35Z

the previous problem with __webpack_require__ feels like its another issue.

somehow the webpack overrides conflicting maybe, its difficult to reproduce that one for sure. @uriklar if you could throw together a test repo which reproduces that problem, that'd be a big help. a minimal reproduction, trying to strip away as much as you can without making the problem go away.

same for you @henriquez , if you can reproduce it in a repo somewhere we can try debug a bit

hydrosquall · 2021-01-20T17:28:17Z

Good news update on #11255 (comment)

I investigated this bug with @arcanis, who quickly identified the issue. We found the error was due to the fact that a dependency of the main application (the one using storybook) was in a separate yarn workspace that did not have core-js explicitly specified as a dependency.

Adding the same version of core-js as a dependency to that library workspace as the version in the main application (the one where storybook is explicitly used) fixes the issue (using Storybook 6.0.21).

Ayc0 · 2021-01-21T00:17:17Z

Also, I found another workaround: when using yarn pnp + workspaces, if core-js is available in the top level module but not in a sub-package, adding this line in the main.js file should work:

config.resolve.alias["core-js"] = path.dirname(require.resolve("core-js"));

(require.resolve("core-js") will return the path to the .../node-modules/core-js/index.js file in pnp, and then path.dirname(...) will return the path to core-js itself and thus when core-js/module will be required, it'll indeed generate .../node-modules/core-js/module and not .../node-modules/core-js/index.js/module)

obonyojimmy · 2021-01-25T22:18:42Z

Simply install core-js dependecy npm i core-js

jmlaya · 2021-01-30T18:48:34Z

That workaround didn't work for me, I needed to configure specific aliases in the main.js file for core-js modules with name conflicts:

const path = require('path');

module.exports = {
  "stories": [
    "../src/**/*.stories.mdx",
    "../src/**/*.stories.@(js|jsx|ts|tsx)"
  ],
  "addons": [
    "@storybook/addon-links",
    "@storybook/addon-essentials"
  ],
  webpackFinal: async (config, { configType }) => {
    config.resolve.alias = {
      ...config.resolve.alias,
      'core-js/modules/es6.object.keys': path.resolve(
        __dirname,
        '../node_modules/core-js/modules/es.object.keys',
      ),
      'core-js/modules/es7.object.get-own-property-descriptors': path.resolve(
        __dirname,
        '../node_modules/core-js/modules/es.object.get-own-property-descriptors',
      ),
      'core-js/modules/web.dom.iterable': path.resolve(
        __dirname,
        '../node_modules/core-js/modules/web.dom-collections.iterator.js',
      ),
      'core-js/modules': path.resolve(
        __dirname,
        '../node_modules/core-js/modules',
      ),
    }

    return config;
  },
}

Ayc0 · 2021-01-30T19:44:04Z

@jmlaya you should try the snippet I wrote:

config.resolve.alias["core-js"] = path.dirname(require.resolve("core-js"));

I did it this way so that it'll work for all submodules si it should help you too

charkour · 2021-01-31T02:12:18Z

Adding core-js as a Dev Dep to the package I was importing solved my issue.

jmlaya · 2021-01-31T11:27:46Z

@Ayc0 I did something similar, but these files with these names do not exist anymore in the core-js package:

es6.object.keys
es7.object.get-own-property-descriptors
web.dom.iterable

storybookjs/storybook#11255 - updated component logic to use styles and updated stories - 'start-storybook' and 'build-storybook' now working

chrisabrams · 2021-03-07T21:14:50Z

Also, I found another workaround: when using yarn pnp + workspaces, if core-js is available in the top level module but not in a sub-package, adding this line in the main.js file should work:
config.resolve.alias["core-js"] = path.dirname(require.resolve("core-js"));
(require.resolve("core-js") will return the path to the .../node-modules/core-js/index.js file in pnp, and then path.dirname(...) will return the path to core-js itself and thus when core-js/module will be required, it'll indeed generate .../node-modules/core-js/module and not .../node-modules/core-js/index.js/module)

dirname was the magic I needed, thanks!

henriquez · 2021-03-14T17:37:28Z

Simply install core-js dependency with npm i core-js

This worked for me when storybook 6 complained about core-js missing in dependency I was loading from another project, the key here is to install core-js in that other project not in the project that is using storybook. (core js was already installed in the project using storybook, but not in the project containing the dependency when the error occurred)

shaodowm · 2021-03-29T03:39:32Z

That workaround didn't work for me, I needed to configure specific aliases in the main.js file for core-js modules with name conflicts:

const path = require('path');

module.exports = {
  "stories": [
    "../src/**/*.stories.mdx",
    "../src/**/*.stories.@(js|jsx|ts|tsx)"
  ],
  "addons": [
    "@storybook/addon-links",
    "@storybook/addon-essentials"
  ],
  webpackFinal: async (config, { configType }) => {
    config.resolve.alias = {
      ...config.resolve.alias,
      'core-js/modules/es6.object.keys': path.resolve(
        __dirname,
        '../node_modules/core-js/modules/es.object.keys',
      ),
      'core-js/modules/es7.object.get-own-property-descriptors': path.resolve(
        __dirname,
        '../node_modules/core-js/modules/es.object.get-own-property-descriptors',
      ),
      'core-js/modules/web.dom.iterable': path.resolve(
        __dirname,
        '../node_modules/core-js/modules/web.dom-collections.iterator.js',
      ),
      'core-js/modules': path.resolve(
        __dirname,
        '../node_modules/core-js/modules',
      ),
    }

    return config;
  },
}

I have the same problem with you. You can try to add the option corejs: 3 with @babel/preset-env config in your .babelrc file and this works for me.

[
    "@babel/preset-env",
    {
      "modules": false,
      "targets": {
        "browsers": ["iOS >= 9"]
      },
      "useBuiltIns": "usage",
      "corejs": 3
    }
  ]

reference: storybookjs/storybook#11255 (comment)

shilman added html dependencies question / support labels Jun 21, 2020

stale bot added the inactive label Aug 8, 2020

shilman added the has workaround label Aug 9, 2020

stale bot removed the inactive label Aug 9, 2020

ghost pushed a commit to uq-its-ss/design-system that referenced this issue Aug 17, 2020

storybook-html: fix breaking changes resulting from migration

5b30cdd

storybookjs/storybook#11255

ndelangen added this to the 6.0.x milestone Aug 17, 2020

ndelangen self-assigned this Aug 17, 2020

ghost pushed a commit to uq-its-ss/design-system that referenced this issue Aug 18, 2020

storybook-html: fix breaking changes resulting from migration

4a6b938

storybookjs/storybook#11255

danyball mentioned this issue Aug 25, 2020

Feature/upgrade to sb6 axa-ch-webhub-cloud/pattern-library#1926

Merged

9 tasks

ghost pushed a commit to uq-its-ss/design-system that referenced this issue Aug 25, 2020

storybook-html: fix breaking changes resulting from migration

90c1e1f

storybookjs/storybook#11255

kelly-tock mentioned this issue Dec 11, 2020

addon-docs 5.3.21 - react 17 - pragma and pragmaFrag cannot be set when runtime is automatic. #13422

Closed

mehrad-rafigh mentioned this issue Dec 16, 2020

@nrwl/angular:storybook-configuration schematic adds old version of Storybook to package.json nrwl/nx#4313

Closed

sota1235 mentioned this issue Jan 17, 2021

Feat improve storybook configuration sota1235/nextjs-boilerplate#409

Merged

OR13 mentioned this issue Jan 30, 2021

webpack / version drift in universal-wallet w3c-ccg/universal-wallet-interop-spec#51

Closed

charkour added a commit to charkour/harmoniously that referenced this issue Jan 31, 2021

link local dependencies: storybookjs/storybook#11255

06b4545

kro-hub pushed a commit to kro-hub/react-ui-lib-test that referenced this issue Jan 31, 2021

Needed to add core-js as a dev dependency

b04a124

storybookjs/storybook#11255 - updated component logic to use styles and updated stories - 'start-storybook' and 'build-storybook' now working

nnnoel mentioned this issue Feb 24, 2021

storybook@6 Module not found: Error: Can't resolve 'core-js/modules/es7.object.get-own-property-descriptors' #14037

Closed

petemill mentioned this issue Mar 10, 2021

Storybook: upgrade to v6, Styled-Components: upgrade to v5 (includes brave-ui) brave/brave-core#8120

Merged

24 tasks

acusti added a commit to acusti/uikit that referenced this issue Mar 31, 2021

Fix storybook issue when importing local modules

35c2b29

reference: storybookjs/storybook#11255 (comment)

merceyz mentioned this issue Dec 29, 2021

Document how to deal with core-js and regenerator-runtime injection in Yarn PnP babel/website#2601

Closed

charlie-yao mentioned this issue Mar 11, 2022

Adopt Yarn workspaces/lerna and separate out the demo and library "proper" charlie-yao/react-aria-widgets#50

Merged

charlie-yao mentioned this issue Mar 10, 2023

Investigate the need for core-js as a dev dependency in the root workspace charlie-yao/react-aria-widgets#88

Open

storybook@6 throws a core-js error #11255

storybook@6 throws a core-js error #11255

Comments

43081j commented Jun 21, 2020 • edited Loading

Temporary workaround

shilman commented Jun 21, 2020

gerdy commented Jun 29, 2020

ndelangen commented Jul 3, 2020

ben-reitz commented Jul 3, 2020

kevinkuebler commented Jul 17, 2020

stale bot commented Aug 8, 2020

43081j commented Aug 13, 2020

shilman commented Aug 13, 2020

43081j commented Aug 13, 2020 • edited Loading

shilman commented Aug 13, 2020

MattFisher commented Aug 14, 2020

43081j commented Aug 14, 2020 • edited Loading

mrtwinkler commented Aug 16, 2020

pmunin commented Aug 19, 2020

kurt-unleashed commented Aug 19, 2020

endreujhelyi commented Aug 21, 2020

awkale commented Aug 25, 2020

mayoyml commented Aug 25, 2020

madroneropaulo commented Dec 2, 2020

ben-reitz commented Dec 2, 2020

shilman commented Dec 3, 2020

hydrosquall commented Dec 9, 2020

henriquez commented Dec 13, 2020 • edited Loading

uriklar commented Dec 29, 2020

shilman commented Dec 30, 2020

43081j commented Dec 30, 2020

hydrosquall commented Jan 20, 2021

Ayc0 commented Jan 21, 2021

obonyojimmy commented Jan 25, 2021

jmlaya commented Jan 30, 2021 • edited Loading

Ayc0 commented Jan 30, 2021

charkour commented Jan 31, 2021

jmlaya commented Jan 31, 2021 • edited Loading

chrisabrams commented Mar 7, 2021

henriquez commented Mar 14, 2021 • edited Loading

shaodowm commented Mar 29, 2021

43081j commented Jun 21, 2020 •

edited

Loading

43081j commented Aug 13, 2020 •

edited

Loading

43081j commented Aug 14, 2020 •

edited

Loading

henriquez commented Dec 13, 2020 •

edited

Loading

jmlaya commented Jan 30, 2021 •

edited

Loading

jmlaya commented Jan 31, 2021 •

edited

Loading

henriquez commented Mar 14, 2021 •

edited

Loading