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

nuxt 2.9.2 does not run with storybook 5.2.1 #8267

Closed
maziarz opened this issue Oct 2, 2019 · 23 comments
Closed

nuxt 2.9.2 does not run with storybook 5.2.1 #8267

maziarz opened this issue Oct 2, 2019 · 23 comments

Comments

@maziarz
Copy link

maziarz commented Oct 2, 2019

Describe the bug
nuxt does not seem to run when yarn run dev is started a long with storybook.

To Reproduce
Steps to reproduce the behavior:

  1. Create boilerplate: yarn create nuxt-app <project-name>
  2. Upgrade to nuxt 2.9.2: yarn add [email protected]
  3. Install @storybook/vue yarn add @storybook/[email protected]
  4. Install additional packages: yarn add babel-preset-vue --dev
  5. Create config file: https://storybook.js.org/docs/guides/guide-vue/#step-3-create-the-config-file
  6. Create stories folder in project
  7. Add "scripts": {...,"storybook": "start-storybook"} to package.json
  8. Start nuxt in dev: yarn run dev
  9. See error

Error

 yarn run dev
yarn run v1.3.2
warning ../package.json: No license field
$ nuxt

   ╭─────────────────────────────────────────────╮
   │                                             │
   │   Nuxt.js v2.9.2                            │
   │   Running in development mode (universal)   │
   │                                             │
   │   Listening on: http://localhost:3000/      │
   │                                             │
   ╰─────────────────────────────────────────────╯

ℹ Preparing project for development                                                                                                                                                                   12:07:06
ℹ Initial build may take a while                                                                                                                                                                      12:07:06
✔ Builder initialized                                                                                                                                                                                 12:07:06
✔ Nuxt files generated                                                                                                                                                                                12:07:06

✖ Client
  Compiled with some errors in 5.01s

✔ Server
  Compiled successfully in 4.23s


 ERROR  Failed to compile with 32 errors                                                                                                                                              friendly-errors 12:07:13

These dependencies were not found:                                                                                                                                                    friendly-errors 12:07:13
                                                                                                                                                                                      friendly-errors 12:07:13
* core-js/modules/es6.array.find in ./.nuxt/client.js                                                                                                                                 friendly-errors 12:07:13
* core-js/modules/es6.array.iterator in ./.nuxt/client.js                                                                                                                             friendly-errors 12:07:13
* core-js/modules/es6.date.to-string in ./.nuxt/utils.js                                                                                                                              friendly-errors 12:07:13
* core-js/modules/es6.function.name in ./.nuxt/utils.js                                                                                                                               friendly-errors 12:07:13
* core-js/modules/es6.object.assign in ./.nuxt/client.js                                                                                                                              friendly-errors 12:07:13
* core-js/modules/es6.object.keys in ./.nuxt/index.js                                                                                                                                 friendly-errors 12:07:13
* core-js/modules/es6.object.to-string in ./.nuxt/router.scrollBehavior.js, ./.nuxt/components/nuxt-link.client.js                                                                    friendly-errors 12:07:13
* core-js/modules/es6.promise in ./.nuxt/client.js                                                                                                                                    friendly-errors 12:07:13
* core-js/modules/es6.regexp.constructor in ./.nuxt/utils.js                                                                                                                          friendly-errors 12:07:13
* core-js/modules/es6.regexp.match in ./.nuxt/client.js                                                                                                                               friendly-errors 12:07:13
* core-js/modules/es6.regexp.replace in ./.nuxt/utils.js, ./.nuxt/components/nuxt.js                                                                                                  friendly-errors 12:07:13
* core-js/modules/es6.regexp.search in ./.nuxt/utils.js                                                                                                                               friendly-errors 12:07:13
* core-js/modules/es6.regexp.split in ./.nuxt/utils.js, ./node_modules/babel-loader/lib??ref--2-0!./node_modules/vue-loader/lib??vue-loader-options!./.nuxt/components/nuxt-build-indicator.vue?vue&type=script&lang=js&
* core-js/modules/es6.regexp.to-string in ./.nuxt/utils.js                                                                                                                            friendly-errors 12:07:13
* core-js/modules/es6.string.includes in ./.nuxt/client.js, ./.nuxt/components/nuxt-link.client.js                                                                                    friendly-errors 12:07:13
* core-js/modules/es6.string.iterator in ./.nuxt/App.js                                                                                                                               friendly-errors 12:07:13
* core-js/modules/es6.string.repeat in ./.nuxt/utils.js                                                                                                                               friendly-errors 12:07:13
* core-js/modules/es6.string.starts-with in ./.nuxt/utils.js                                                                                                                          friendly-errors 12:07:13
* core-js/modules/es6.symbol in ./.nuxt/index.js, ./.nuxt/components/nuxt-link.client.js                                                                                              friendly-errors 12:07:13
* core-js/modules/es7.array.includes in ./.nuxt/client.js, ./.nuxt/components/nuxt-link.client.js                                                                                     friendly-errors 12:07:13
* core-js/modules/es7.object.get-own-property-descriptors in ./.nuxt/index.js                                                                                                         friendly-errors 12:07:13
* core-js/modules/es7.promise.finally in ./.nuxt/client.js                                                                                                                            friendly-errors 12:07:13
* core-js/modules/es7.symbol.async-iterator in ./.nuxt/client.js, ./.nuxt/components/nuxt-link.client.js                                                                              friendly-errors 12:07:13
* core-js/modules/web.dom.iterable in ./.nuxt/App.js, ./.nuxt/components/nuxt-link.client.js                                                                                          friendly-errors 12:07:13
                                                                                                                                                                                      friendly-errors 12:07:13
To install them, you can run: npm install --save core-js/modules/es6.array.find core-js/modules/es6.array.iterator core-js/modules/es6.date.to-string core-js/modules/es6.function.name core-js/modules/es6.object.assign core-js/modules/es6.object.keys core-js/modules/es6.object.to-string core-js/modules/es6.promise core-js/modules/es6.regexp.constructor core-js/modules/es6.regexp.match core-js/modules/es6.regexp.replace core-js/modules/es6.regexp.search core-js/modules/es6.regexp.split core-js/modules/es6.regexp.to-string core-js/modules/es6.string.includes core-js/modules/es6.string.iterator core-js/modules/es6.string.repeat core-js/modules/es6.string.starts-with core-js/modules/es6.symbol core-js/modules/es7.array.includes core-js/modules/es7.object.get-own-property-descriptors core-js/modules/es7.promise.finally core-js/modules/es7.symbol.async-iterator core-js/modules/web.dom.iterable
ℹ Waiting for file changes                                                                                                                                                                            12:07:13
ℹ Memory usage: 138 MB (RSS: 254 MB)         

Expected behavior
That it compiles.

System:

 $npx -p @storybook/cli@next sb info

Environment Info:

  System:
    OS: macOS High Sierra 10.13.6
    CPU: (8) x64 Intel(R) Core(TM) i7-6700HQ CPU @ 2.60GHz
  Binaries:
    Node: 10.14.2 - /usr/local/bin/node
    Yarn: 1.3.2 - /usr/local/bin/yarn
    npm: 6.5.0 - /usr/local/bin/npm
  Browsers:
    Chrome: 77.0.3865.90
    Firefox: 68.0.1
    Safari: 12.1.2
  npmPackages:
    @storybook/vue: ^5.2.1 => 5.2.1 

Additional context
Add any other context about the problem here.

@shilman
Copy link
Member

shilman commented Oct 2, 2019

@Aaron-Pool @ndelangen this looks like a core-js version issue. do you know if we have a workaround here?

@Aaron-Pool
Copy link
Contributor

If it's a version issue, you could add a resolution field to your package json to force it to resolve the corejs version you need. Then hope that doesn't break anything else 😅

In other news we should probably do a pass to update all our Vue dependencies at some point, I know that, at the very least, the Vue storybook app is still using a really old (and I believe deprecated) Babel preset.

@maziarz
Copy link
Author

maziarz commented Oct 2, 2019

If it's a version issue, you could add a resolution field to your package json to force it to resolve the corejs version you need. Then hope that doesn't break anything else 😅

In other news we should probably do a pass to update all our Vue dependencies at some point, I know that, at the very least, the Vue storybook app is still using a really old (and I believe deprecated) Babel preset.

Can you please guide me with the suggested resolution field? I have never utilised this bad boy.

@thuringia
Copy link

@maziarz just add the following to your package.json:

 "resolutions": {
    "core-js": "2.6.5"
  }

followed by running yarn.

Just change the version number to the one you want. I'm using 2.6.5 in my current vue project due to issues in IE11 with more recent versions of core-js 2. The vue babel presets etc. do not appear to support core-js 3 yet.

@Aaron-Pool
Copy link
Contributor

Thanks for the assist @thuringia ! Did that fix things for you @maziarz ?

@maziarz
Copy link
Author

maziarz commented Oct 2, 2019

Thanks for the assist @thuringia ! Did that fix things for you @maziarz ?

I tried to add the resolutions and run yarn followed by yarn run dev. Infact i get 36 errors instead of 32 now. Not sure if this is random.

@Aaron-Pool
Copy link
Contributor

@maziarz is it the same errors + 4 more, or an entirely different set now?

@maziarz
Copy link
Author

maziarz commented Oct 2, 2019

@maziarz is it the same errors + 4 more, or an entirely different set now?

ERROR  Failed to compile with 36 errors                                                                                                                                              friendly-errors 19:51:35

These dependencies were not found:                                                                                                                                                    friendly-errors 19:51:35
                                                                                                                                                                                     friendly-errors 19:51:35
* core-js/modules/es6.array.find in ./.nuxt/client.js                                                                                                                                 friendly-errors 19:51:35
* core-js/modules/es6.array.iterator in ./.nuxt/client.js, ./node_modules/babel-loader/lib??ref--2-0!./node_modules/vue-loader/lib??vue-loader-options!./pages/index.vue?vue&type=script&lang=js&
* core-js/modules/es6.date.to-string in ./.nuxt/utils.js                                                                                                                              friendly-errors 19:51:35
* core-js/modules/es6.function.name in ./.nuxt/index.js                                                                                                                               friendly-errors 19:51:35
* core-js/modules/es6.object.assign in ./.nuxt/client.js, ./node_modules/babel-loader/lib??ref--2-0!./node_modules/vue-loader/lib??vue-loader-options!./pages/index.vue?vue&type=script&lang=js&
* core-js/modules/es6.object.keys in ./.nuxt/index.js                                                                                                                                 friendly-errors 19:51:35
* core-js/modules/es6.object.to-string in ./.nuxt/App.js, ./.nuxt/components/nuxt-link.client.js                                                                                      friendly-errors 19:51:35
* core-js/modules/es6.promise in ./.nuxt/client.js, ./node_modules/babel-loader/lib??ref--2-0!./node_modules/vue-loader/lib??vue-loader-options!./pages/index.vue?vue&type=script&lang=js&
* core-js/modules/es6.regexp.constructor in ./.nuxt/utils.js                                                                                                                          friendly-errors 19:51:35
* core-js/modules/es6.regexp.match in ./.nuxt/client.js                                                                                                                               friendly-errors 19:51:35
* core-js/modules/es6.regexp.replace in ./.nuxt/utils.js, ./.nuxt/components/nuxt.js                                                                                                  friendly-errors 19:51:35
* core-js/modules/es6.regexp.search in ./.nuxt/utils.js                                                                                                                               friendly-errors 19:51:35
* core-js/modules/es6.regexp.split in ./.nuxt/utils.js, ./node_modules/babel-loader/lib??ref--2-0!./node_modules/vue-loader/lib??vue-loader-options!./.nuxt/components/nuxt-build-indicator.vue?vue&type=script&lang=js&
* core-js/modules/es6.regexp.to-string in ./.nuxt/utils.js                                                                                                                            friendly-errors 19:51:35
* core-js/modules/es6.string.includes in ./.nuxt/client.js, ./.nuxt/components/nuxt-link.client.js                                                                                    friendly-errors 19:51:35
* core-js/modules/es6.string.iterator in ./.nuxt/utils.js                                                                                                                             friendly-errors 19:51:35
* core-js/modules/es6.string.repeat in ./.nuxt/utils.js                                                                                                                               friendly-errors 19:51:35
* core-js/modules/es6.string.starts-with in ./.nuxt/utils.js                                                                                                                          friendly-errors 19:51:35
* core-js/modules/es6.symbol in ./.nuxt/client.js, ./.nuxt/components/nuxt-link.client.js                                                                                             friendly-errors 19:51:35
* core-js/modules/es7.array.includes in ./.nuxt/client.js, ./.nuxt/components/nuxt-link.client.js                                                                                     friendly-errors 19:51:35
* core-js/modules/es7.object.get-own-property-descriptors in ./.nuxt/index.js                                                                                                         friendly-errors 19:51:35
* core-js/modules/es7.promise.finally in ./.nuxt/client.js, ./node_modules/babel-loader/lib??ref--2-0!./node_modules/vue-loader/lib??vue-loader-options!./pages/index.vue?vue&type=script&lang=js&
* core-js/modules/es7.symbol.async-iterator in ./.nuxt/client.js, ./.nuxt/components/nuxt-link.client.js                                                                              friendly-errors 19:51:35
* core-js/modules/web.dom.iterable in ./.nuxt/index.js, ./.nuxt/components/nuxt-link.client.js                                                                                        friendly-errors 19:51:35
                                                                                                                                                                                     friendly-errors 19:51:35
To install them, you can run: npm install --save core-js/modules/es6.array.find core-js/modules/es6.array.iterator core-js/modules/es6.date.to-string core-js/modules/es6.function.name core-js/modules/es6.object.assign core-js/modules/es6.object.keys core-js/modules/es6.object.to-string core-js/modules/es6.promise core-js/modules/es6.regexp.constructor core-js/modules/es6.regexp.match core-js/modules/es6.regexp.replace core-js/modules/es6.regexp.search core-js/modules/es6.regexp.split core-js/modules/es6.regexp.to-string core-js/modules/es6.string.includes core-js/modules/es6.string.iterator core-js/modules/es6.string.repeat core-js/modules/es6.string.starts-with core-js/modules/es6.symbol core-js/modules/es7.array.includes core-js/modules/es7.object.get-own-property-descriptors core-js/modules/es7.promise.finally core-js/modules/es7.symbol.async-iterator core-js/modules/web.dom.iterable

@Aaron-Pool
Copy link
Contributor

@maziarz Mind posting your package.json?

@maziarz
Copy link
Author

maziarz commented Oct 2, 2019

@maziarz Mind posting your package.json?

More than happy to do so!

{
  "name": "nuxt-storybook",
  "version": "1.0.0",
  "description": "My superb Nuxt.js project",
  "author": "John Doe",
  "private": true,
  "scripts": {
    "dev": "nuxt",
    "build": "nuxt build",
    "start": "nuxt start",
    "generate": "nuxt generate",
    "storybook": "start-storybook"
  },
  "dependencies": {
    "@storybook/vue": "^5.2.1",
    "nuxt": "^2.9.2"
  },
  "devDependencies": {
    "babel-preset-vue": "^2.0.2"
  },
  "resolutions": {
    "core-js": "2.6.5"
  }  
}

@Aaron-Pool
Copy link
Contributor

You may have to change it to **/core-js since core-js isn't a direct dependency of your project.

See here: yarnpkg/yarn#5759

If that doesn't work, I might try deleting your node_modules and yarn.lock file to regenerate your yarn.lock file.

@maziarz
Copy link
Author

maziarz commented Oct 2, 2019

**/core-js

Awesome! That did the trick. Cheers, Aaron!

@maziarz maziarz closed this as completed Oct 2, 2019
@maziarz maziarz reopened this Oct 2, 2019
@maziarz
Copy link
Author

maziarz commented Oct 2, 2019

Well damnit, i was a bit to excited with nuxt running, but now storybook is failing:

$ start-storybook
internal/modules/cjs/loader.js:583
    throw err;
    ^

Error: Cannot find module 'core-js/modules/es.array.iterator'
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:581:15)
    at Function.Module._load (internal/modules/cjs/loader.js:507:25)
    at Module.require (internal/modules/cjs/loader.js:637:17)
    at require (internal/modules/cjs/helpers.js:22:18)
    at Object.<anonymous> (/Users/maziarzamani/Dropbox/Sandbox/nuxt-storybook/node_modules/@storybook/core/dist/server/preview/base-webpack.config.js:3:1)
    at Module._compile (internal/modules/cjs/loader.js:689:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:700:10)
    at Module.load (internal/modules/cjs/loader.js:599:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:538:12)
    at Function.Module._load (internal/modules/cjs/loader.js:530:3)
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

@Aaron-Pool
Copy link
Contributor

Aaron-Pool commented Oct 2, 2019

I was afraid of that. Storybook is depending on core-js 3. Ok, try just resolving core-js dependency under nuxt to be 2.6.5. This may mean you have two different versions of core-js in your project, which isn't optimal for bundle size, but it should at least be a temporary work around to get you going.

You may have to read through this to figure out the exact syntax you need, but I think it should be something like nuxt.js/**/core-js

@maziarz
Copy link
Author

maziarz commented Oct 3, 2019

I was afraid of that. Storybook is depending on core-js 3. Ok, try just resolving core-js dependency under nuxt to be 2.6.5. This may mean you have two different versions of core-js in your project, which isn't optimal for bundle size, but it should at least be a temporary work around to get you going.

You may have to read through this to figure out the exact syntax you need, but I think it should be something like nuxt.js/**/core-js

Bit of a twist here. As of Nuxt 2.6.0 it seems to be possible to use core-js@3. I tried to apply this to my current project ("core-js": "3.0.1"), but i still seem to get a very limited amount of errors now. Not sure if this is for better or worse :-)

 ERROR  Failed to compile with 4 errors                                                                                                                                               friendly-errors 09:02:49

These dependencies were not found:                                                                                                                                                    friendly-errors 09:02:49
                                                                                                                                                                                      friendly-errors 09:02:49
* core-js/modules/es6.function.name in ./node_modules/storyblok-js-client/dist/throttlePromise.js                                                                                     friendly-errors 09:02:49
* core-js/modules/es6.regexp.constructor in ./node_modules/storyblok-js-client/dist/richTextResolver.js                                                                               friendly-errors 09:02:49
* core-js/modules/es6.regexp.replace in ./node_modules/storyblok-js-client/dist/richTextResolver.js                                                                                   friendly-errors 09:02:49

@maziarz
Copy link
Author

maziarz commented Oct 3, 2019

Nevermind. I deleted node_modules and the yarn.lock, everything seems to be running.

@Aaron-Pool
Copy link
Contributor

@maziarz sweet! Closing the issue then, let me know if anything else comes up!

@oooowl
Copy link

oooowl commented Oct 8, 2019

I have the same problem, how to solve it in the end? Thank you

@Aaron-Pool
Copy link
Contributor

@yiling-e0 based on what @maziarz said last, I would install Nuxt 2.6.0 and make sure you follow all the steps here, paying close attention to the bit about using core-js 3

@oooowl
Copy link

oooowl commented Oct 9, 2019

Thank you for your reply, but unfortunately I need to use Nuxt 2.10.0 to solve the bug in the development environment, is there any other feasible solution?

@Aaron-Pool
Copy link
Contributor

Aaron-Pool commented Oct 9, 2019

@yiling-e0

Yes, I believe if you add

"resolutions": {
  "nuxt/**/core-js": "2.6.5"
} 

to your package.json It will force nuxt's core-js dependency to resolve to a non-3.x version

@oooowl
Copy link

oooowl commented Oct 12, 2019

I tried it, but

ERROR Failed to compile with 39 errors friendly-errors 15:24:26

These dependencies were not found: friendly-errors 15:24:26
friendly-errors 15:24:26

  • core-js/modules/es6.array.find in ./.nuxt/client.js friendly-errors 15:24:26
  • core-js/modules/es6.array.iterator in ./.nuxt/client.js friendly-errors 15:24:26
  • core-js/modules/es6.date.to-string in ./.nuxt/utils.js, ./.nuxt/components/nuxt.js friendly-errors 15:24:26
  • core-js/modules/es6.function.name in ./.nuxt/index.js friendly-errors 15:24:26
  • core-js/modules/es6.object.assign in ./.nuxt/client.js friendly-errors 15:24:26
  • core-js/modules/es6.object.keys in ./.nuxt/utils.js, ./plugins/axios.js friendly-errors 15:24:26
  • core-js/modules/es6.object.to-string in ./.nuxt/axios.js, ./.nuxt/components/nuxt.js and 1 other friendly-errors 15:24:26
  • core-js/modules/es6.promise in ./.nuxt/client.js friendly-errors 15:24:26
  • core-js/modules/es6.regexp.constructor in ./.nuxt/utils.js friendly-errors 15:24:26
  • core-js/modules/es6.regexp.match in ./.nuxt/client.js friendly-errors 15:24:26
  • core-js/modules/es6.regexp.replace in ./.nuxt/utils.js, ./.nuxt/components/nuxt.js friendly-errors 15:24:26
  • core-js/modules/es6.regexp.search in ./.nuxt/utils.js friendly-errors 15:24:26
  • core-js/modules/es6.regexp.split in ./.nuxt/utils.js, ./node_modules/babel-loader/lib??ref--2-0!./node_modules/vue-loader/lib??vue-loader-options!./.nuxt/components/nuxt-build-indicator.vue?vue&type=script&lang=js&
  • core-js/modules/es6.regexp.to-string in ./.nuxt/utils.js, ./.nuxt/components/nuxt.js friendly-errors 15:24:26
  • core-js/modules/es6.string.includes in ./.nuxt/client.js, ./.nuxt/components/nuxt-link.client.js friendly-errors 15:24:26
  • core-js/modules/es6.string.iterator in ./.nuxt/client.js friendly-errors 15:24:26
  • core-js/modules/es6.string.repeat in ./.nuxt/utils.js friendly-errors 15:24:26
  • core-js/modules/es6.string.starts-with in ./.nuxt/utils.js friendly-errors 15:24:26
  • core-js/modules/es6.symbol in ./.nuxt/axios.js, ./.nuxt/components/nuxt-link.client.js and 1 other friendly-errors 15:24:26
  • core-js/modules/es7.array.includes in ./.nuxt/client.js, ./.nuxt/components/nuxt-link.client.js friendly-errors 15:24:26
  • core-js/modules/es7.object.get-own-property-descriptors in ./.nuxt/utils.js, ./plugins/axios.js friendly-errors 15:24:26
  • core-js/modules/es7.promise.finally in ./.nuxt/client.js friendly-errors 15:24:26
  • core-js/modules/es7.symbol.async-iterator in ./.nuxt/axios.js, ./.nuxt/components/nuxt-link.client.js friendly-errors 15:24:26
  • core-js/modules/web.dom.iterable in ./.nuxt/client.js, ./.nuxt/components/nuxt-link.client.js and 1 other friendly-errors 15:24:26
    friendly-errors 15:24:26
    To install them, you can run: npm install --save core-js/modules/es6.array.find core-js/modules/es6.array.iterator core-js/modules/es6.date.to-string core-js/modules/es6.function.name core-js/modules/es6.object.assign core-js/modules/es6.object.keys core-js/modules/es6.object.to-string core-js/modules/es6.promise core-js/modules/es6.regexp.constructor core-js/modules/es6.regexp.match core-js/modules/es6.regexp.replace core-js/modules/es6.regexp.search core-js/modules/es6.regexp.split core-js/modules/es6.regexp.to-string core-js/modules/es6.string.includes core-js/modules/es6.string.iterator core-js/modules/es6.string.repeat core-js/modules/es6.string.starts-with core-js/modules/es6.symbol core-js/modules/es7.array.in

@Aaron-Pool
Copy link
Contributor

Aaron-Pool commented Oct 12, 2019

@yiling-e0 would you mind pasting your package.json?

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

No branches or pull requests

5 participants