Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

storybook@6 throws a core-js error #11255

Closed
43081j opened this issue Jun 21, 2020 · 73 comments
Closed

storybook@6 throws a core-js error #11255

43081j opened this issue Jun 21, 2020 · 73 comments

Comments

@43081j
Copy link
Contributor

43081j commented Jun 21, 2020

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.

@shilman
Copy link
Member

shilman commented Jun 21, 2020

cc @ndelangen

@gerdy
Copy link

gerdy commented Jun 29, 2020

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
Copy link
Member

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
Copy link

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

@kevinkuebler
Copy link

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
Copy link

stale bot commented Aug 8, 2020

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!

@stale stale bot added the inactive label Aug 8, 2020
@stale stale bot removed the inactive label Aug 9, 2020
@43081j
Copy link
Contributor Author

43081j commented Aug 13, 2020

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
Copy link
Member

shilman commented Aug 13, 2020

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

@43081j
Copy link
Contributor Author

43081j commented Aug 13, 2020

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
Copy link
Member

shilman commented Aug 13, 2020

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

@MattFisher
Copy link
Contributor

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
Copy link
Contributor Author

43081j commented Aug 14, 2020

@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
Copy link

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

ghost pushed a commit to uq-its-ss/design-system that referenced this issue Aug 17, 2020
@ndelangen ndelangen added this to the 6.0.x milestone Aug 17, 2020
@ndelangen ndelangen self-assigned this Aug 17, 2020
ghost pushed a commit to uq-its-ss/design-system that referenced this issue Aug 18, 2020
@pmunin
Copy link

pmunin commented Aug 19, 2020

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
Copy link

Same here, even with the workaround :(

@endreujhelyi
Copy link

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'

@awkale
Copy link

awkale commented Aug 25, 2020

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
Copy link

mayoyml commented Aug 25, 2020

@awkale main.js :)

@madroneropaulo
Copy link

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

@ben-reitz
Copy link

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

@shilman
Copy link
Member

shilman commented Dec 3, 2020

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
Copy link
Contributor

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
Copy link

henriquez commented Dec 13, 2020

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
Copy link

uriklar commented Dec 29, 2020

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
Copy link
Member

shilman commented Dec 30, 2020

@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
Copy link
Contributor Author

43081j commented Dec 30, 2020

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
Copy link
Contributor

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
Copy link

Ayc0 commented Jan 21, 2021

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
Copy link

Simply install core-js dependecy npm i core-js

@jmlaya
Copy link

jmlaya commented Jan 30, 2021

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
Copy link

Ayc0 commented Jan 30, 2021

@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
Copy link

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

charkour added a commit to charkour/harmoniously that referenced this issue Jan 31, 2021
@jmlaya
Copy link

jmlaya commented Jan 31, 2021

@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

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

- updated component logic to use styles and updated stories
- 'start-storybook' and 'build-storybook' now working
@chrisabrams
Copy link

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
Copy link

henriquez commented Mar 14, 2021

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
Copy link

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
    }
  ]

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging a pull request may close this issue.