Storybook: core-js modules not found when using load all stories glob

[mycroft16]

Describe the bug
Multiple Can't resolve 'core-js/modules/' errors, but only when using the .storybook/config.js to load all stories matching a glob method.

To Reproduce
Steps to reproduce the behavior:

1. Fresh install of Angular 8
2. Fresh install of @storybook/angular following the guide at https://storybook.js.org/docs/guides/guide-angular/
3. Create config.js file (see below)
4. npm run storybook
5. Errors.

Expected behavior
Storybook to load just like it does if I specify individual file import without trying to match /.stories.ts$/

Screenshots

Code snippets
.storybook/config.js:
`import { configure } from '@storybook/angular';
import requireContext from 'require-context.macro';

const req = requireContext('../src/app/modules', true, /.stories.ts$/);

function loadStories() {
req.keys().forEach(filename => req(filename));
}

configure(loadStories, module);`

package.json:
{ "name": "one-equality", "version": "0.0.0", "scripts": { "ng": "ng", "start": "ng serve", "build": "ng build", "test": "ng test", "lint": "ng lint", "e2e": "ng e2e", "storybook": "start-storybook" }, "private": true, "dependencies": { "@angular/animations": "^8.0.0", "@angular/cdk": "^8.0.0", "@angular/common": "~8.0.0", "@angular/compiler": "~8.0.0", "@angular/core": "~8.0.0", "@angular/flex-layout": "^8.0.0-beta.26", "@angular/forms": "~8.0.0", "@angular/material": "^8.0.0", "@angular/platform-browser": "~8.0.0", "@angular/platform-browser-dynamic": "~8.0.0", "@angular/router": "~8.0.0", "core-js": "^2.5.4", "hammerjs": "^2.0.8", "require-context.macro": "^1.0.4", "rxjs": "~6.5.2", "tslib": "^1.9.0", "zone.js": "~0.9.1" }, "devDependencies": { "@angular-devkit/build-angular": "~0.800.0", "@angular/cli": "~8.0.0", "@angular/compiler-cli": "~8.0.0", "@angular/language-service": "~8.0.0", "@babel/core": "^7.4.5", "@storybook/angular": "^5.1.3", "@types/jasmine": "~2.8.8", "@types/jasminewd2": "~2.0.3", "@types/node": "~8.9.4", "babel-loader": "^8.0.6", "codelyzer": "~4.5.0", "jasmine-core": "~2.99.1", "jasmine-spec-reporter": "~4.2.1", "karma": "~4.0.0", "karma-chrome-launcher": "~2.2.0", "karma-coverage-istanbul-reporter": "~2.0.1", "karma-jasmine": "~1.1.2", "karma-jasmine-html-reporter": "^0.2.2", "protractor": "~5.4.0", "ts-node": "~7.0.0", "tslint": "~5.11.0", "typescript": "~3.4.5" } }

System:

• OS: Ubuntu via WSL on Windows 10
• Device: Dell Inspiron
• Browser: Chrome/Firefox latest for both
• Framework: Angular
• Addons: None
• Version:
  Storybook - ^5.1.3
  Angular - ~8.0.0
  core-js - ^2.5.4

Additional context
I have tried upgrading core-js to 3, to various specific versions of 2... nothing seems to work. As long as I use the load all stories method, I get those errors.

[kroeder]

Angular 8 dropped core-js as a dependency. You said

I have tried upgrading core-js to 3, to various specific versions of 2...

I did a fresh setup myself and it has worked - have you tried to follow the manual steps or have you used the CLI?

Can you try a fresh installation with

• npx @angular/cli new angular8-project
• cd angular8-project
• npx @storybook/cli init
• npm run storybook

Or try https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#angular-7 but this was originally a fix for Angular 7 with core-js 3

[mycroft16]

Okay, ran those... new project created, storybook installed just fine.
npm run storybook threw the following errors:

ERROR in ./src/styles.scss (./node_modules/@angular-devkit/build-angular/src/angular-cli-files/plugins/raw-css-loader.js!./node_modules/postcss-loader/src??embedded!./node_modules/sass-loader/lib/loader.js??ref--9-3!./src/styles.scss)
Module build failed (from ./node_modules/sass-loader/lib/loader.js):
Error: Missing binding /mnt/d/Angular/angular9-project/node_modules/node-sass/vendor/linux-x64-64/binding.node
Node Sass could not find a binding for your current environment: Linux 64-bit with Node.js 10.x

Found bindings for the following environments:
  - Linux 64-bit with Node.js 8.x

This usually happens because your environment has changed since running `npm install`.
Run `npm rebuild node-sass` to download the binding for your current environment.
    at module.exports (/mnt/d/Angular/angular9-project/node_modules/node-sass/lib/binding.js:15:13)
    at Object.<anonymous> (/mnt/d/Angular/angular9-project/node_modules/node-sass/lib/index.js:14:35)
    at Module._compile (internal/modules/cjs/loader.js:776:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:787:10)
    at Module.load (internal/modules/cjs/loader.js:653:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:593:12)
    at Function.Module._load (internal/modules/cjs/loader.js:585:3)
    at Module.require (internal/modules/cjs/loader.js:690:17)
    at require (internal/modules/cjs/helpers.js:25:18)
    at Object.sassLoader (/mnt/d/Angular/angular9-project/node_modules/sass-loader/lib/loader.js:46:72)
 @ ./src/styles.scss 2:14-240 21:1-42:3 22:19-245
 @ multi ./node_modules/@storybook/core/dist/server/common/polyfills.js ./node_modules/@storybook/core/dist/server/preview/globals.js ./.storybook/config.js ./node_modules/webpack-hot-middleware/client.js?reload=true ./src/styles.scss

ERROR in ./.storybook/config.js
Module not found: Error: Can't resolve 'core-js/modules/es.array.for-each' in '/mnt/d/Angular/angular9-project/.storybook'
 @ ./.storybook/config.js 1:0-43
 @ multi ./node_modules/@storybook/core/dist/server/common/polyfills.js ./node_modules/@storybook/core/dist/server/preview/globals.js ./.storybook/config.js ./node_modules/webpack-hot-middleware/client.js?reload=true ./src/styles.scss

ERROR in ./.storybook/config.js
Module not found: Error: Can't resolve 'core-js/modules/es.array.iterator' in '/mnt/d/Angular/angular9-project/.storybook'
 @ ./.storybook/config.js 2:0-43
 @ multi ./node_modules/@storybook/core/dist/server/common/polyfills.js ./node_modules/@storybook/core/dist/server/preview/globals.js ./.storybook/config.js ./node_modules/webpack-hot-middleware/client.js?reload=true ./src/styles.scss

ERROR in ./.storybook/config.js
Module not found: Error: Can't resolve 'core-js/modules/es.object.to-string' in '/mnt/d/Angular/angular9-project/.storybook'
 @ ./.storybook/config.js 3:0-45
 @ multi ./node_modules/@storybook/core/dist/server/common/polyfills.js ./node_modules/@storybook/core/dist/server/preview/globals.js ./.storybook/config.js ./node_modules/webpack-hot-middleware/client.js?reload=true ./src/styles.scss

ERROR in ./.storybook/config.js
Module not found: Error: Can't resolve 'core-js/modules/web.dom-collections.for-each' in '/mnt/d/Angular/angular9-project/.storybook'
 @ ./.storybook/config.js 4:0-54
 @ multi ./node_modules/@storybook/core/dist/server/common/polyfills.js ./node_modules/@storybook/core/dist/server/preview/globals.js ./.storybook/config.js ./node_modules/webpack-hot-middleware/client.js?reload=true ./src/styles.scss

ERROR in ./.storybook/config.js
Module not found: Error: Can't resolve 'core-js/modules/web.dom-collections.iterator' in '/mnt/d/Angular/angular9-project/.storybook'
 @ ./.storybook/config.js 5:0-54
 @ multi ./node_modules/@storybook/core/dist/server/common/polyfills.js ./node_modules/@storybook/core/dist/server/preview/globals.js ./.storybook/config.js ./node_modules/webpack-hot-middleware/client.js?reload=true ./src/styles.scss

So I ran npm rebuild node-sass as recommended.

Now I'm back to where I was before:

ERROR in ./.storybook/config.js
Module not found: Error: Can't resolve 'core-js/modules/es.array.for-each' in '/mnt/d/Angular/angular9-project/.storybook'
 @ ./.storybook/config.js 1:0-43
 @ multi ./node_modules/@storybook/core/dist/server/common/polyfills.js ./node_modules/@storybook/core/dist/server/preview/globals.js ./.storybook/config.js ./node_modules/webpack-hot-middleware/client.js?reload=true ./src/styles.scss

ERROR in ./.storybook/config.js
Module not found: Error: Can't resolve 'core-js/modules/es.array.iterator' in '/mnt/d/Angular/angular9-project/.storybook'
 @ ./.storybook/config.js 2:0-43
 @ multi ./node_modules/@storybook/core/dist/server/common/polyfills.js ./node_modules/@storybook/core/dist/server/preview/globals.js ./.storybook/config.js ./node_modules/webpack-hot-middleware/client.js?reload=true ./src/styles.scss

ERROR in ./.storybook/config.js
Module not found: Error: Can't resolve 'core-js/modules/es.object.to-string' in '/mnt/d/Angular/angular9-project/.storybook'
 @ ./.storybook/config.js 3:0-45
 @ multi ./node_modules/@storybook/core/dist/server/common/polyfills.js ./node_modules/@storybook/core/dist/server/preview/globals.js ./.storybook/config.js ./node_modules/webpack-hot-middleware/client.js?reload=true ./src/styles.scss

ERROR in ./.storybook/config.js
Module not found: Error: Can't resolve 'core-js/modules/web.dom-collections.for-each' in '/mnt/d/Angular/angular9-project/.storybook'
 @ ./.storybook/config.js 4:0-54
 @ multi ./node_modules/@storybook/core/dist/server/common/polyfills.js ./node_modules/@storybook/core/dist/server/preview/globals.js ./.storybook/config.js ./node_modules/webpack-hot-middleware/client.js?reload=true ./src/styles.scss

ERROR in ./.storybook/config.js
Module not found: Error: Can't resolve 'core-js/modules/web.dom-collections.iterator' in '/mnt/d/Angular/angular9-project/.storybook'
 @ ./.storybook/config.js 5:0-54
 @ multi ./node_modules/@storybook/core/dist/server/common/polyfills.js ./node_modules/@storybook/core/dist/server/preview/globals.js ./.storybook/config.js ./node_modules/webpack-hot-middleware/client.js?reload=true ./src/styles.scss

[x1c0]

+1 same error

[shilman]

I just released https://github.com/storybookjs/storybook/releases/tag/v5.1.4 containing PR #7051 that's related to this issue. Can someone check to see if it's fixed in the new version? 🙏

[x1c0]

Before I had this error with: "@storybook/angular": "5.1.3" and "core-js": "2.6.5",
I tested "@storybook/angular": "5.1.4", with "core-js": "2.6.5" and gives the same error.

In both cases if I use "core-js": "3.0.1" storybook works 🎉

[emilio-martinez]

This is fixed for me with storybook 5.1.5