search

storybookjs / storybook

Storybook is the industry standard workshop for building, documenting, and testing UI components in isolation
https://storybook.js.org
MIT License
84.73k stars 9.33k forks source link

storybook@6 throws a core-js error #11255

Closed 43081j closed 3 years ago

43081j commented 4 years ago

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.

mayashavin commented 3 years ago

I have a Vue component library that has zero dependencies needed for core-js, and it still throw me error Module not found: Error: Can't resolve 'core-js/modules/web.dom.iterable' After spending like >1 hour trying to install babel, core-js, and tried all the workaround, it still gave me error 🤦

I have the following:

"@babel/core": "^7.12.9",
    "@babel/plugin-proposal-optional-chaining": "^7.12.1",
    "@storybook/addon-actions": "^6.1.8",
    "@storybook/addon-essentials": "^6.1.8",
    "@storybook/addon-knobs": "^5.0.0",
    "@storybook/addon-links": "^6.1.8",
    "@storybook/addon-notes": "^5.0.0",
    "@storybook/vue": "^6.1.8",
    "@types/jest": "^26.0.15",
    "@vue/cli-plugin-babel": "^3.10.0",
    "@vue/cli-plugin-eslint": "^3.10.0",
    "@vue/cli-plugin-unit-jest": "^3.10.0",
    "@vue/cli-service": "^3.10.0",
    "@vue/eslint-config-prettier": "^4.0.1",
    "@vue/test-utils": "^1.0.0-beta.29",
    "babel-eslint": "^10.0.1",
    "babel-jest": "^23.6.0",
    "babel-loader": "^8.2.2",
shilman commented 3 years ago

Zoinks!! I just released https://github.com/storybookjs/storybook/releases/tag/v6.2.0-alpha.0 containing PR #13055 that references this issue. Upgrade today to the @next NPM tag to try it out!

npx sb upgrade --prerelease

Closing this issue. Please re-open if you think there's still more to do.

kelly-tock commented 3 years ago

Can this be updated when it's fully released?

barryofguilder commented 3 years ago

@shilman I just upgraded my Ember Addon with the pre-release version and it all works!

mayashavin commented 3 years ago

@shilman Still not working for me for very weird reason. Running yarn storybook throws a bunch of errors about core-js polyfill. For example:

ERROR in ./.storybook/preview.js-generated-config-entry.js
Module not found: Error: Can't resolve 'core-js/modules/es.symbol' in ...
 @ ./.storybook/preview.js-generated-config-entry.js 3:0-36
 @ multi ./node_modules/@storybook/vue/node_modules/@storybook/core/dist/server/common/polyfills.js ./node_modules/@storybook/vue/node_modules/@storybook/core/dist/server/preview/globals.js ./.storybook/storybook-init-framework-entry.js ./node_modules/@storybook/addon-docs/dist/frameworks/common/config.js-generated-other-entry.js ./node_modules/@storybook/addon-docs/dist/frameworks/vue/config.js-generated-other-entry.js ./node_modules/@storybook/addon-links/dist/preset/addDecorator.js-generated-other-entry.js ./node_modules/@storybook/addon-actions/dist/preset/addDecorator.js-generated-other-entry.js ./node_modules/@storybook/addon-actions/dist/preset/addArgs.js-generated-other-entry.js ./node_modules/@storybook/addon-backgrounds/dist/preset/addDecorator.js-generated-other-entry.js ./node_modules/@storybook/addon-backgrounds/dist/preset/addParameter.js-generated-other-entry.js ./.storybook/preview.js-generated-config-entry.js ./.storybook/generated-stories-entry.js (webpack)-hot-middleware/client.js?reload=true&quiet=false&noInfo=undefined

I have to do the workaround in main.js with the following:

webpackFinal: (config) => {
    config.resolve.alias["core-js/modules"] =
      "@storybook/core/node_modules/core-js/modules";
    config.resolve.alias["core-js/features"] =
      "@storybook/core/node_modules/core-js/features";
    return config;
  },

This happens when I have core-js version specifically points to 2.6.9.

madroneropaulo commented 3 years ago

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

ben-reitz commented 3 years ago

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

shilman commented 3 years ago

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

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 commented 3 years ago

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 commented 3 years ago

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 commented 3 years ago

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:

Any suggestions?

shilman commented 3 years ago

@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 commented 3 years ago

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 commented 3 years ago

Good news update on https://github.com/storybookjs/storybook/issues/11255#issuecomment-741905199

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 commented 3 years ago

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 commented 3 years ago

Simply install core-js dependecy npm i core-js

jmlaya commented 3 years ago

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 commented 3 years ago

@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 commented 3 years ago

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

jmlaya commented 3 years ago

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

chrisabrams commented 3 years ago

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 commented 3 years ago

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 commented 3 years ago

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