Storybook: nuxt 2.9.2 does not run with storybook 5.2.1
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:
- Create boilerplate:
yarn create nuxt-app <project-name> - Upgrade to nuxt 2.9.2:
yarn add [email protected] - Install @storybook/vue
yarn add @storybook/[email protected] - Install additional packages:
yarn add babel-preset-vue --dev - Create config file: https://storybook.js.org/docs/guides/guide-vue/#step-3-create-the-config-file
- Create
storiesfolder in project - Add
"scripts": {...,"storybook": "start-storybook"}to package.json - Start nuxt in dev:
yarn run dev - 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.
maziarz
All 23 comments
@Aaron-Pool @ndelangen this looks like a core-js version issue. do you know if we have a workaround here?
shilman
on 2 Oct 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.
Aaron-Pool
on 2 Oct 2019
If it's a version issue, you could add a
resolutionfield 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.
maziarz
on 2 Oct 2019
@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.
thuringia
on 2 Oct 2019
Thanks for the assist @thuringia ! Did that fix things for you @maziarz ?
Aaron-Pool
on 2 Oct 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.
maziarz
on 2 Oct 2019
@maziarz is it the same errors + 4 more, or an entirely different set now?
Aaron-Pool
on 2 Oct 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
```
maziarz
on 2 Oct 2019
@maziarz Mind posting your package.json?
Aaron-Pool
on 2 Oct 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"
}
}
You may have to change it to **/core-js since core-js isn't a direct dependency of your project.
See here: https://github.com/yarnpkg/yarn/issues/5759
If that doesn't work, I might try deleting your node_modules and yarn.lock file to regenerate your yarn.lock file.
Aaron-Pool
on 2 Oct 2019
**/core-js
Awesome! That did the trick. Cheers, Aaron!
maziarz
on 2 Oct 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.
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
Aaron-Pool
on 2 Oct 2019
I was afraid of that. Storybook is depending on core-js 3. Ok, try _just_ resolving
core-jsdependency undernuxtto be2.6.5. This may mean you have two different versions ofcore-jsin 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
Nevermind. I deleted node_modules and the yarn.lock, everything seems to be running.
maziarz
on 3 Oct 2019
@maziarz sweet! Closing the issue then, let me know if anything else comes up!
Aaron-Pool
on 3 Oct 2019
I have the same problem, how to solve it in the end? Thank you
oooowl
on 8 Oct 2019
@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
Aaron-Pool
on 8 Oct 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?
oooowl
on 9 Oct 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
Aaron-Pool
on 9 Oct 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
oooowl
on 12 Oct 2019
@yiling-e0 would you mind pasting your package.json?
Aaron-Pool
on 12 Oct 2019
Related issues
zvictor
·
3Comments
miljan-aleksic
·
3Comments
oriSomething
·
3Comments
tlrobinson
·
3Comments
purplecones
·
3Comments