StorybookV6 not working with vue-loader V17

[tame kiln]

I'd recommend trying to upgrade to V7 alpha

npx sb@next upgrade --prerelease

Does that work?

[minor swan]

@tame kiln firstly thank you very much for your supporting.

I done to make that.

I arrive error that error when npm run storybook:

sh: start-storybook: command not found

package.json:

{
"name": "teststorybook2",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint",
"storybook": "start-storybook -p 6006",
"build-storybook": "build-storybook"
},
"dependencies": {
"core-js": "^3.8.3",
"css-loader": "^6.7.1",
"style-loader": "^3.3.1",
"vue": "^2.6.14",
"vue-loader": "^16.8.2"
},
"devDependencies": {
"@babel/core": "^7.12.16",
"@babel/eslint-parser": "^7.12.16",
"@storybook/addon-actions": "^7.0.0-alpha.48",
"@storybook/addon-essentials": "^7.0.0-alpha.48",
"@storybook/addon-interactions": "^7.0.0-alpha.48",
"@storybook/addon-links": "^7.0.0-alpha.48",
"@storybook/testing-library": "^0.0.14-next.0",
"@storybook/vue": "^7.0.0-alpha.48",
"@storybook/vue-webpack5": "^7.0.0-alpha.48",
"@vue/cli-plugin-babel": "~5.0.0",
"@vue/cli-plugin-eslint": "~5.0.0",
"@vue/cli-service": "~5.0.0",
"babel-loader": "^8.3.0",
"eslint": "^7.32.0",
"eslint-plugin-vue": "^8.0.3",
"vue-template-compiler": "^2.6.14"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/essential",
"eslint:recommended"
],
"parserOptions": {
"parser": "@babel/eslint-parser"
},
"rules": {}
},
"browserslist": [
"> 1%",
"last 2 versions",
"not dead"
]
}

By the way, I created new project. I was setup storybook with npx sb@next init. Not working.

package.json:

{
"name": "teststorybook3",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint",
"storybook": "storybook dev -p 6006",
"build-storybook": "storybook build"
},
"dependencies": {
"core-js": "^3.8.3",
"vue": "^2.6.14",
"vue-loader": "^17.0.1"
},
"devDependencies": {
"@babel/core": "^7.12.16",
"@babel/eslint-parser": "^7.12.16",
"@storybook/addon-essentials": "^7.0.0-alpha.48",
"@storybook/addon-interactions": "^7.0.0-alpha.48",
"@storybook/addon-links": "^7.0.0-alpha.48",
"@storybook/testing-library": "^0.0.13",
"@storybook/vue": "^7.0.0-alpha.48",
"@storybook/vue-webpack5": "^7.0.0-alpha.48",
"@vue/cli-plugin-babel": "~5.0.0",
"@vue/cli-plugin-eslint": "~5.0.0",
"@vue/cli-service": "~5.0.0",
"eslint": "^7.32.0",
"eslint-plugin-vue": "^8.0.3",
"storybook": "^7.0.0-alpha.48",
"vue-template-compiler": "^2.6.14"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/essential",
"eslint:recommended"
],
"parserOptions": {
"parser": "@babel/eslint-parser"
},
"rules": {}
},
"browserslist": [
"> 1%",
"last 2 versions",
"not dead"
]
}

terminal storybook error:

terminal storybook error:

[email protected] storybook
storybook dev -p 6006

@storybook/cli v7.0.0-alpha.48

info => Loading presets
info => Loading presets
info => Loading presets
info => Starting manager..
info => Using implicit CSS loaders
info => Using default Webpack5 setup
<i> [webpack-dev-middleware] wait until bundle finished
99% done plugins webpack-hot-middlewarewebpack built preview 5eb2cec042f9756ffe61 in 3219ms
WARN Force closed manager build
info => Loading presets
99% done plugins webpack-hot-middlewarewebpack built preview 87d32b8cfabb3dbc5155 in 100ms

[tame kiln]

We test the following vue-cli configurations in CI and both are working:

https://github.com/storybookjs/storybook/blob/next/code/lib/cli/src/repro-templates.ts#L202-L228

Can you try the appropriate script out on your machine & verify that it works. If it does, perhaps we can use that to figure out what's different about what you're doing and why it's breaking

[burnt bluff]

I've seen with the documentation about updating webpack and things that it always involves sb@next. Does this mean we now have to use next.js?

[tame kiln]

sb@next is the prerelease version of the storybook’s next release. Unrelated to next.js.

Re: webpack, the next version of sb won’t support webpack4, so if your won’t be able to upgrade if your project is on an old version of webpack.