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.

Sign up for GitHub

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

Jump to bottom

core-js modules not found when using load all stories glob #7003

Closed
mycroft16 opened this issue Jun 7, 2019 · 6 comments
Closed

core-js modules not found when using load all stories glob #7003

mycroft16 opened this issue Jun 7, 2019 · 6 comments
Labels
angular question / support
Milestone
5.1.x

Comments

@mycroft16
Copy link

mycroft16 commented Jun 7, 2019 •
edited

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
image

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

kroeder commented Jun 7, 2019 •
edited

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

@shilman shilman added this to the 5.1.x milestone Jun 7, 2019
@mycroft16
Copy link
Author

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

x1c0 commented Jun 13, 2019

+1 same error

@shilman
Copy link
Member

shilman commented Jun 13, 2019

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

x1c0 commented Jun 13, 2019 •
edited

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

This is fixed for me with storybook 5.1.5

@shilman shilman closed this as completed Jun 14, 2019
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
angular question / support
Projects
None yet
Milestone
5.1.x
Development

No branches or pull requests
5 participants
@shilman @x1c0 @kroeder @emilio-martinez @mycroft16