NPM fails to run storybook after update #18271

xorinzor · 2022-05-19T14:44:35Z

xorinzor
May 19, 2022

Both npm run dev and npm run storybook worked a few hours ago. Then I ran npm update and now it's broken.
After the new update my NPM fails to run suddenly, complaining about being unable to find vue, yet it being installed.

Absolutely clueless what to do, hopefully someone can help me out?

When I run npm run dev I get this error:

> dev
> npm run development


> development
> mix

 We couldn't find a supported version of Vue in your project. Please ensure that it's installed (npm install vue).
 
[webpack-cli] Error: Unable to detect vue version
    at VueVersion.fail (/home/xorinzor/Documents/git/Shoutz0r-app/node_modules/laravel-mix/src/VueVersion.js:53:15)
    at VueVersion.detect (/home/xorinzor/Documents/git/Shoutz0r-app/node_modules/laravel-mix/src/VueVersion.js:32:22)
    at Vue.register (/home/xorinzor/Documents/git/Shoutz0r-app/node_modules/laravel-mix/src/components/Vue.js:39:53)
    at Object.components.<computed> [as vue] (/home/xorinzor/Documents/git/Shoutz0r-app/node_modules/laravel-mix/src/components/ComponentRegistrar.js:163:49)
    at Object.<anonymous> (/home/xorinzor/Documents/git/Shoutz0r-app/webpack.mix.js:41:6)
    at Module._compile (internal/modules/cjs/loader.js:999:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1027:10)
    at Module.load (internal/modules/cjs/loader.js:863:32)
    at Function.Module._load (internal/modules/cjs/loader.js:708:14)
    at Module.require (internal/modules/cjs/loader.js:887:19)

When I run npm run storybook it throws this error:

> storybook
> start-storybook -p 6006

info @storybook/vue3 v6.5.2
info 
info => Loading presets
WARN   Failed to load preset: {"type":"presets","name":"/home/xorinzor/Documents/git/Shoutz0r-app/node_modules/@storybook/vue3/dist/cjs/server/framework-preset-vue3.js"} on level 2
ERR! Error: @vitejs/plugin-vue requires vue (>=3.2.13) or @vue/compiler-sfc to be present in the dependency tree.
ERR!     at Object.<anonymous> (/home/xorinzor/Documents/git/Shoutz0r-app/node_modules/@storybook/vue3/node_modules/vue-loader/dist/compiler.js:14:15)
ERR!     at Module._compile (internal/modules/cjs/loader.js:999:30)
ERR!     at Object.Module._extensions..js (internal/modules/cjs/loader.js:1027:10)
ERR!     at Module.load (internal/modules/cjs/loader.js:863:32)
ERR!     at Function.Module._load (internal/modules/cjs/loader.js:708:14)
ERR!     at Module.require (internal/modules/cjs/loader.js:887:19)
ERR!     at require (internal/modules/cjs/helpers.js:74:18)
ERR!     at Object.<anonymous> (/home/xorinzor/Documents/git/Shoutz0r-app/node_modules/@storybook/vue3/node_modules/vue-loader/dist/index.js:8:20)
ERR!     at Module._compile (internal/modules/cjs/loader.js:999:30)
ERR!     at Object.Module._extensions..js (internal/modules/cjs/loader.js:1027:10)
ERR!  Error: @vitejs/plugin-vue requires vue (>=3.2.13) or @vue/compiler-sfc to be present in the dependency tree.
ERR!     at Object.<anonymous> (/home/xorinzor/Documents/git/Shoutz0r-app/node_modules/@storybook/vue3/node_modules/vue-loader/dist/compiler.js:14:15)
ERR!     at Module._compile (internal/modules/cjs/loader.js:999:30)
ERR!     at Object.Module._extensions..js (internal/modules/cjs/loader.js:1027:10)
ERR!     at Module.load (internal/modules/cjs/loader.js:863:32)
ERR!     at Function.Module._load (internal/modules/cjs/loader.js:708:14)
ERR!     at Module.require (internal/modules/cjs/loader.js:887:19)
ERR!     at require (internal/modules/cjs/helpers.js:74:18)
ERR!     at Object.<anonymous> (/home/xorinzor/Documents/git/Shoutz0r-app/node_modules/@storybook/vue3/node_modules/vue-loader/dist/index.js:8:20)
ERR!     at Module._compile (internal/modules/cjs/loader.js:999:30)
ERR!     at Object.Module._extensions..js (internal/modules/cjs/loader.js:1027:10)

My package.json file:

{
  private: true,
  scripts: {
    dev: "npm run development",
    development: "mix",
    watch: "mix watch",
    watch-poll: "mix watch -- --watch-options-poll=1000",
    hot: "mix watch --hot",
    prod: "npm run production",
    production: "mix --production",
    storybook: "start-storybook -p 6006",
    build-storybook: "build-storybook"
  },
  dependencies: {
    @babel/plugin-proposal-class-properties: "^7.14.5",
    @popperjs/core: "^2.11.5",
    @rollup/plugin-commonjs: "^20.0.0",
    @vue/babel-helper-vue-jsx-merge-props: "^1.2.1",
    @vue/compat: "^3.2.19",
    @vue/compiler-sfc: "^3.2.19",
    @vuex-orm/core: "^0.36.4",
    @vuex-orm/plugin-axios: "^0.9.4",
    autoprefixer: "^9.8.4",
    axios: "^0.27.2",
    bootstrap: "^5.2.0-beta1",
    bootstrap-icons-vue: "^1.8.1",
    cross-env: "^7.0.3",
    css-loader: "^6.7.1",
    dashjs: "^4.4.0",
    fast-average-color: "^7.1.0",
    file-loader: "^6.2.0",
    jquery: "^3.6.0",
    laravel-echo: "^1.11.7",
    laravel-mix: "^6.0.43",
    mitt: "^3.0.0",
    moment: "^2.29.1",
    postcss: "^8.4.13",
    resolve-url-loader: "^4.0.0",
    sass: "^1.51.0",
    sass-loader: "^12.6.0",
    sass-resources-loader: "^2.2.5",
    socket.io-client: "^4.2.0",
    stream-browserify: "^3.0.0",
    timingsrc: "^1.0.7",
    vue: "^3.2.33",
    vue-loader: "^17.0.0",
    vue-router: "^4.0.15",
    vue-slider-component: "^4.0.0-beta.4",
    vue3-perfect-scrollbar: "^1.6.0",
    vuex: "^4.0.2",
    webpack: "^5.72.1"
  },
  devDependencies: {
    @babel/core: "^7.17.10",
    @storybook/addon-actions: "^6.4.22",
    @storybook/addon-docs: "^6.4.22",
    @storybook/addon-essentials: "^6.4.22",
    @storybook/addon-links: "^6.4.22",
    @storybook/builder-webpack5: "^6.4.22",
    @storybook/manager-webpack5: "^6.4.22",
    @storybook/vue3: "^6.4.22",
    babel-loader: "^8.2.5",
    webpack-cli: "^4.8.0"
  }
}

Answered by xorinzor

May 19, 2022

Supposedly something in my environment broke, a fresh directory with new files from my repo fixed the issue.

View full answer

xorinzor · 2022-05-19T15:01:54Z

xorinzor
May 19, 2022
Author

As an addition, this is the output of npm list

Shoutz0r-app@ /home/xorinzor/Documents/git/Shoutz0r-app
├── @babel/[email protected]
├── @babel/[email protected]
├── @popperjs/[email protected]
├── @rollup/[email protected]
├── @storybook/[email protected]
├── @storybook/[email protected]
├── @storybook/[email protected]
├── @storybook/[email protected]
├── @storybook/[email protected]
├── @storybook/[email protected]
├── @storybook/[email protected]
├── @vue/[email protected]
├── @vue/[email protected]
├── @vue/[email protected]
├── @vuex-orm/[email protected]
├── @vuex-orm/[email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
└── [email protected]

7 replies

xorinzor May 19, 2022
Author

hm.. interesting, I just cloned the repo into a new directory and there it works.
I guess something in my environment broke? Will see what happens if I copy over my edited files and report back.

xorinzor May 19, 2022
Author

Yeah now it just works, I have absolutely no idea what happened to cause this haha. Sorry for wasting your time, thanks for the help :)

olimpsetz Jun 25, 2022

hm.. interesting, I just cloned the repo into a new directory and there it works. I guess something in my environment broke? Will see what happens if I copy over my edited files and report back.

The new directory did not help me, the error still appears. Any idea why this might still be happening? I did not find any information on this issue.

xorinzor Jun 25, 2022
Author

no sorry, all I could think of is something in node_modules got corrupted

xorinzor Jun 26, 2022
Author

also, make sure your components import "vue". My IDE would add the import "vue/dist/vue" for whatever reason, which also caused compilation issues (although not this specific one)

xorinzor · 2022-05-19T17:22:51Z

xorinzor
May 19, 2022
Author

Supposedly something in my environment broke, a fresh directory with new files from my repo fixed the issue.

2 replies

shilman May 19, 2022
Maintainer

glad you got it sorted!! thanks for following up 🙏

NourIM Nov 4, 2022

I'm getting the same issue and it won't disappear even after removing node_module

brittneypostma · 2024-01-12T22:43:19Z

brittneypostma
Jan 12, 2024

This seems to be something breaking in the local environment. I got something similar the other day and was able to resolve it removing node_modules, reinstalling, and restarting the computer for some reason finally fixed it.
Today I am getting this again

────────────────────────────────────────────────────╮
│                                                    │
│   Storybook 7.6.8 for sveltekit started            │
│   4.87 s for manager and 2.01 s for preview        │
│                                                    │
│    Local:            http://localhost:6006/        │
│    On your network:  http://192.168.68.61:6006/    │
│                                                    │
╰────────────────────────────────────────────────────╯
✘ [ERROR] Could not resolve "json5"

    node_modules/loader-utils/lib/parseQuery.js:3:22:
      3 │ const JSON5 = require('json5');
        ╵                       ~~~~~~~

  You can mark the path "json5" as external to exclude it
  from the bundle, which will remove this error. You can
  also surround this "require" call with a try/catch block
  to handle this failure at run-time instead of
  bundle-time.

✘ [ERROR] Could not resolve "emojis-list"

    node_modules/loader-utils/lib/interpolateName.js:4:27:
      4 │ const emojisList = require('emojis-list');
        ╵                            ~~~~~~~~~~~~~

  You can mark the path "emojis-list" as external to
  exclude it from the bundle, which will remove this error.
  You can also surround this "require" call with a
  try/catch block to handle this failure at run-time
  instead of bundle-time.

✘ [ERROR] Could not resolve "big.js"

    node_modules/loader-utils/lib/getHashDigest.js:21:22:
      21 │   const Big = require('big.js');
         ╵                       ~~~~~~~~

  You can mark the path "big.js" as external to exclude it
  from the bundle, which will remove this error. You can
  also surround this "require" call with a try/catch block
  to handle this failure at run-time instead of
  bundle-time.

The project builds fine, but I can't run the dev server at all.

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

NPM fails to run storybook after update #18271

{{title}}

Replies: 3 comments 9 replies

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

Select a reply

NPM fails to run storybook after update #18271

xorinzor May 19, 2022

Replies: 3 comments · 9 replies

xorinzor May 19, 2022 Author

xorinzor May 19, 2022 Author

xorinzor May 19, 2022 Author

olimpsetz Jun 25, 2022

xorinzor Jun 25, 2022 Author

xorinzor Jun 26, 2022 Author

xorinzor May 19, 2022 Author

shilman May 19, 2022 Maintainer

NourIM Nov 4, 2022

brittneypostma Jan 12, 2024

xorinzor
May 19, 2022

Replies: 3 comments 9 replies

xorinzor
May 19, 2022
Author

xorinzor May 19, 2022
Author

xorinzor May 19, 2022
Author

xorinzor Jun 25, 2022
Author

xorinzor Jun 26, 2022
Author

xorinzor
May 19, 2022
Author

shilman May 19, 2022
Maintainer

brittneypostma
Jan 12, 2024