У меня проблема с запуском сборника рассказов после добавления его в новый проект vuejs.

Видимо при включении файла .vue он не интерпретируется правильно …

Вот все шаги, которые я выполнил для настройки проекта vue.js и добавления сборника рассказов (я в Windows 10):

1) Командная строка: vue init webpack app-test

 ? Project name app-test ? Project description A Vue.js project ? Author email@email.email ? Standalone build view ? Install vue-router? Yes ? Use ESLint to lint your code? Yes ? Pick an ESLint preset Standard ? Set up unit tests Yes ? Pick a test runner jest ? Setup e2e tests with Nightwatch? No. ? Should we run `npm install` for you after the project has been created? (recommended) npm   view-cli · Generated "app-test". Installing project dependencies ... [...] . ? Project name app-test ? Project description A Vue.js project ? Author email@email.email ? Standalone build view ? Install vue-router? Yes ? Use ESLint to lint your code? Yes ? Pick an ESLint preset Standard ? Set up unit tests Yes ? Pick a test runner jest ? Setup e2e tests with Nightwatch? No. ? Should we run `npm install` for you after the project has been created? (recommended) npm   view-cli · Generated "app-test". Installing project dependencies ... [...] 

2) Затем я последовал этому руководству, чтобы добавить сборник рассказов в свой проект (ручная настройка): https://storybook.js.org/docs/guides/guide-vue/

Но когда я пытаюсь запустить сборник рассказов, я получаю несколько ошибок:

 {amp}gt; start-storybook info @storybook/vue v5.2.8 info info ={amp}gt; Loading presets WARN Failed to load preset: "C:\Users\Firstname Lastname\Desktop\workspace\website\components\front-end\app\node_modules\@storybook\vue\dist\server\framework-preset-vue.js" ERR! Error: Cannot find module 'vue-loader/lib/plugin' ERR! at Function.Module._resolveFilename (internal/modules/cjs/loader.js:655:15) ERR! at Function.Module._load (internal/modules/cjs/loader.js:580:25) ERR! at Module.require (internal/modules/cjs/loader.js:711:19) ERR! at require (internal/modules/cjs/helpers.js:14:16) ERR! at Object.{amp}lt;anonymous{amp}gt; (C:UsersFirstname LastnameDesktopworkspacewebsitecomponentsfront-endappnode_modules@storybookvuedistserverframework-preset-vue.js:11:38) ERR! at Module._compile (internal/modules/cjs/loader.js:805:30) ERR! at Object.Module._extensions..js (internal/modules/cjs/loader.js:816:10) ERR! at Module.load (internal/modules/cjs/loader.js:672:32) ERR! at tryModuleLoad (internal/modules/cjs/loader.js:612:12) ERR! at Function.Module._load (internal/modules/cjs/loader.js:604:3) ERR! at Module.require (internal/modules/cjs/loader.js:711:19) ERR! at require (internal/modules/cjs/helpers.js:14:16) ERR! at interopRequireDefault (C:UsersFirstname LastnameDesktopworkspacewebsitecomponentsfront-endappnode_modules@storybookcoredistserverpresets.js:20:18) ERR! at loadPreset (C:UsersFirstname LastnameDesktopworkspacewebsitecomponentsfront-endappnode_modules@storybookcoredistserverpresets.js:30:17) ERR! at Array.map ({amp}lt;anonymous{amp}gt;) ERR! at loadPresets (C:UsersFirstname LastnameDesktopworkspacewebsitecomponentsfront-endappnode_modules@storybookcoredistserverpresets.js:59:26) ERR! { Error: Cannot find module 'vue-loader/lib/plugin' ERR! at Function.Module._resolveFilename (internal/modules/cjs/loader.js:655:15) ERR! at Function.Module._load (internal/modules/cjs/loader.js:580:25) ERR! at Module.require (internal/modules/cjs/loader.js:711:19) ERR! at require (internal/modules/cjs/helpers.js:14:16) ERR! at Object.{amp}lt;anonymous{amp}gt; (C:UsersFirstname LastnameDesktopworkspacewebsitecomponentsfront-endappnode_modules@storybookvuedistserverframework-preset-vue.js:11:38) ERR! at Module._compile (internal/modules/cjs/loader.js:805:30) ERR! at Object.Module._extensions..js (internal/modules/cjs/loader.js:816:10) ERR! at Module.load (internal/modules/cjs/loader.js:672:32) ERR! at tryModuleLoad (internal/modules/cjs/loader.js:612:12) ERR! at Function.Module._load (internal/modules/cjs/loader.js:604:3) ERR! at Module.require (internal/modules/cjs/loader.js:711:19) ERR! at require (internal/modules/cjs/helpers.js:14:16) ERR! at interopRequireDefault (C:UsersFirstname LastnameDesktopworkspacewebsitecomponentsfront-endappnode_modules@storybookcoredistserverpresets.js:20:18) ERR! at loadPreset (C:UsersFirstname LastnameDesktopworkspacewebsitecomponentsfront-endappnode_modules@storybookcoredistserverpresets.js:30:17) ERR! at Array.map ({amp}lt;anonymous{amp}gt;) ERR! at loadPresets (C:UsersFirstname LastnameDesktopworkspacewebsitecomponentsfront-endappnode_modules@storybookcoredistserverpresets.js:59:26) ERR! stack: ERR! "Error: Cannot find module 'vue-loader/lib/plugin'n at Function.Module._resolveFilename (internal/modules/cjs/loader.js:655:15)n at Function.Module._load (internal/modules/cjs/loader.js:580:25)n at Module.require (internal/modules/cjs/loader.js:711:19)n at require (internal/modules/cjs/helpers.js:14:16)n at Object.{amp}lt;anonymous{amp}gt; (C:\Users\Firstname Lastname\Desktop\workspace\website\components\front-end\app\node_modules\@storybook\vue\dist\server\framework-preset-vue.js:11:38)n at Module._compile (internal/modules/cjs/loader.js:805:30)n at Object.Module._extensions..js (internal/modules/cjs/loader.js:816:10)n at Module.load (internal/modules/cjs/loader.js:672:32)n at tryModuleLoad (internal/modules/cjs/loader.js:612:12)n at Function.Module._load (internal/modules/cjs/loader.js:604:3)n at Module.require (internal/modules/cjs/loader.js:711:19)n at require (internal/modules/cjs/helpers.js:14:16)n at interopRequireDefault (C:\Users\Firstname Lastname\Desktop\workspace\website\components\front-end\app\node_modules\@storybook\core\dist\server\presets.js:20:18)n at loadPreset (C:\Users\Firstname Lastname\Desktop\workspace\website\components\front-end\app\node_modules\@storybook\core\dist\server\presets.js:30:17)n at Array.map ({amp}lt;anonymous{amp}gt;)n at loadPresets (C:\Users\Firstname Lastname\Desktop\workspace\website\components\front-end\app\node_modules\@storybook\core\dist\server\presets.js:59:26)", ERR! code: 'MODULE_NOT_FOUND' } info ={amp}gt; Loading presets WARN Failed to load preset: "C:\Users\Firstname Lastname\Desktop\workspace\website\components\front-end\app\node_modules\@storybook\vue\dist\server\framework-preset-vue.js" ERR! Error: Cannot find module 'vue-loader/lib/plugin' ERR! at Function.Module._resolveFilename (internal/modules/cjs/loader.js:655:15) ERR! at Function.Module._load (internal/modules/cjs/loader.js:580:25) ERR! at Module.require (internal/modules/cjs/loader.js:711:19) ERR! at require (internal/modules/cjs/helpers.js:14:16) ERR! at Object.{amp}lt;anonymous{amp}gt; (C:UsersFirstname LastnameDesktopworkspacewebsitecomponentsfront-endappnode_modules@storybookvuedistserverframework-preset-vue.js:11:38) ERR! at Module._compile (internal/modules/cjs/loader.js:805:30) ERR! at Object.Module._extensions..js (internal/modules/cjs/loader.js:816:10) ERR! at Module.load (internal/modules/cjs/loader.js:672:32) ERR! at tryModuleLoad (internal/modules/cjs/loader.js:612:12) ERR! at Function.Module._load (internal/modules/cjs/loader.js:604:3) ERR! at Module.require (internal/modules/cjs/loader.js:711:19) ERR! at require (internal/modules/cjs/helpers.js:14:16) ERR! at interopRequireDefault (C:UsersFirstname LastnameDesktopworkspacewebsitecomponentsfront-endappnode_modules@storybookcoredistserverpresets.js:20:18) ERR! at loadPreset (C:UsersFirstname LastnameDesktopworkspacewebsitecomponentsfront-endappnode_modules@storybookcoredistserverpresets.js:30:17) ERR! at Array.map ({amp}lt;anonymous{amp}gt;) ERR! at loadPresets (C:UsersFirstname LastnameDesktopworkspacewebsitecomponentsfront-endappnode_modules@storybookcoredistserverpresets.js:59:26) ERR! { Error: Cannot find module 'vue-loader/lib/plugin' ERR! at Function.Module._resolveFilename (internal/modules/cjs/loader.js:655:15) ERR! at Function.Module._load (internal/modules/cjs/loader.js:580:25) ERR! at Module.require (internal/modules/cjs/loader.js:711:19) ERR! at require (internal/modules/cjs/helpers.js:14:16) ERR! at Object.{amp}lt;anonymous{amp}gt; (C:UsersFirstname LastnameDesktopworkspacewebsitecomponentsfront-endappnode_modules@storybookvuedistserverframework-preset-vue.js:11:38) ERR! at Module._compile (internal/modules/cjs/loader.js:805:30) ERR! at Object.Module._extensions..js (internal/modules/cjs/loader.js:816:10) ERR! at Module.load (internal/modules/cjs/loader.js:672:32) ERR! at tryModuleLoad (internal/modules/cjs/loader.js:612:12) ERR! at Function.Module._load (internal/modules/cjs/loader.js:604:3) ERR! at Module.require (internal/modules/cjs/loader.js:711:19) ERR! at require (internal/modules/cjs/helpers.js:14:16) ERR! at interopRequireDefault (C:UsersFirstname LastnameDesktopworkspacewebsitecomponentsfront-endappnode_modules@storybookcoredistserverpresets.js:20:18) ERR! at loadPreset (C:UsersFirstname LastnameDesktopworkspacewebsitecomponentsfront-endappnode_modules@storybookcoredistserverpresets.js:30:17) ERR! at Array.map ({amp}lt;anonymous{amp}gt;) ERR! at loadPresets (C:UsersFirstname LastnameDesktopworkspacewebsitecomponentsfront-endappnode_modules@storybookcoredistserverpresets.js:59:26) ERR! stack: ERR! "Error: Cannot find module 'vue-loader/lib/plugin'n at Function.Module._resolveFilename (internal/modules/cjs/loader.js:655:15)n at Function.Module._load (internal/modules/cjs/loader.js:580:25)n at Module.require (internal/modules/cjs/loader.js:711:19)n at require (internal/modules/cjs/helpers.js:14:16)n at Object.{amp}lt;anonymous{amp}gt; (C:\Users\Firstname Lastname\Desktop\workspace\website\components\front-end\app\node_modules\@storybook\vue\dist\server\framework-preset-vue.js:11:38)n at Module._compile (internal/modules/cjs/loader.js:805:30)n at Object.Module._extensions..js (internal/modules/cjs/loader.js:816:10)n at Module.load (internal/modules/cjs/loader.js:672:32)n at tryModuleLoad (internal/modules/cjs/loader.js:612:12)n at Function.Module._load (internal/modules/cjs/loader.js:604:3)n at Module.require (internal/modules/cjs/loader.js:711:19)n at require (internal/modules/cjs/helpers.js:14:16)n at interopRequireDefault (C:\Users\Firstname Lastname\Desktop\workspace\website\components\front-end\app\node_modules\@storybook\core\dist\server\presets.js:20:18)n at loadPreset (C:\Users\Firstname Lastname\Desktop\workspace\website\components\front-end\app\node_modules\@storybook\core\dist\server\presets.js:30:17)n at Array.map ({amp}lt;anonymous{amp}gt;)n at loadPresets (C:\Users\Firstname Lastname\Desktop\workspace\website\components\front-end\app\node_modules\@storybook\core\dist\server\presets.js:59:26)", ERR! code: 'MODULE_NOT_FOUND' } info ={amp}gt; Using default Webpack setup. 10% building 1/1 modules 0 active(node:20820) DeprecationWarning: Tapable.plugin is deprecated. Use new API on `.hooks` instead webpack built 67e016cd23aad0230032 in 12596ms × 「wdm」: Hash: 67e016cd23aad0230032 Version: webpack 4.41.4 Time: 12596ms Built at: 2019-12-25 22:39:17 Asset Size Chunks Chunk Names iframe.html 3.05 KiB [emitted] main.67e016cd23aad0230032.bundle.js 6.15 KiB main [emitted] [immutable] main main.67e016cd23aad0230032.bundle.js.map 1.84 KiB main [emitted] [dev] main runtime~main.67e016cd23aad0230032.bundle.js 31.2 KiB runtime~main [emitted] [immutable] runtime~main runtime~main.67e016cd23aad0230032.bundle.js.map 32.3 KiB runtime~main [emitted] [dev] runtime~main vendors~main.67e016cd23aad0230032.bundle.js 2.91 MiB vendors~main [emitted] [immutable] [big] vendors~main vendors~main.67e016cd23aad0230032.bundle.js.map 2.9 MiB vendors~main [emitted] [dev] vendors~main Entrypoint main [big] = runtime~main.67e016cd23aad0230032.bundle.js runtime~main.67e016cd23aad0230032.bundle.js.map vendors~main.67e016cd23aad0230032.bundle.js vendors~main.67e016cd23aad0230032.bundle.js.map main.67e016cd23aad0230032.bundle.js main.67e016cd23aad0230032.bundle.js.map [0] 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{amp}amp;quiet=true 64 bytes {main} [built] [./.storybook/config.js] 118 bytes {main} [built] [./node_modules/@storybook/core/dist/server/common/polyfills.js] 120 bytes {vendors~main} [built] [./node_modules/@storybook/core/dist/server/preview/globals.js] 93 bytes {vendors~main} [built] [./node_modules/@storybook/core/node_modules/core-js/features/symbol/index.js] 359 bytes {vendors~main} [built] [./node_modules/@storybook/core/node_modules/regenerator-runtime/runtime.js] 23 KiB {vendors~main} [built] [./node_modules/@storybook/core/node_modules/webpack/buildin/harmony-module.js] (webpack)/buildin/harmony-module.js 573 bytes {vendors~main} [built] [./node_modules/@storybook/core/node_modules/webpack/buildin/module.js] (webpack)/buildin/module.js 497 bytes {vendors~main} [built] [./node_modules/@storybook/vue/dist/client/index.js] 1.21 KiB {vendors~main} [built] [./node_modules/airbnb-js-shims/index.js] 40 bytes {vendors~main} [built] [./node_modules/global/window.js] 232 bytes {vendors~main} [built] [./node_modules/querystring-es3/index.js] 127 bytes {vendors~main} [built] [./node_modules/strip-ansi/index.js] 161 bytes {vendors~main} [built] [./node_modules/webpack-hot-middleware/client-overlay.js] 2.17 KiB {vendors~main} [built] [./node_modules/webpack-hot-middleware/client.js?reload=true{amp}amp;quiet=true] 7.68 KiB {vendors~main} [built]   758 hidden modules ERROR in ./src/components/atoms/Button.vue 1:0 Module parse failed: Unexpected token (1:0) You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders {amp}gt; {amp}lt;template{amp}gt; | {amp}lt;div{amp}gt;{{ label }}{amp}lt;/div{amp}gt; | {amp}lt;/template{amp}gt; @ ./stories/mybutton/index.stories.js 2:0-61 16:28-36 @ ./stories sync .stories.js$ @ ./.storybook/config.js @ 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{amp}amp;quiet=true Child HtmlWebpackCompiler: Asset Size Chunks Chunk Names __child-HtmlWebpackPlugin_0 6.53 KiB HtmlWebpackPlugin_0 HtmlWebpackPlugin_0 Entrypoint HtmlWebpackPlugin_0 = __child-HtmlWebpackPlugin_0 [./node_modules/@storybook/core/node_modules/html-webpack-plugin/lib/loader.js!./node_modules/@storybook/core/dist/server/templates/index.ejs] 2.18 KiB {HtmlWebpackPlugin_0} [built] WARN Broken build, fix the error above. WARN You may need to refresh the browser. 

.babelrc

 { "presets": [ ["env", { "modules": false, "targets": { "browsers": ["{amp}gt; 1%", "last 2 versions", "not ie {amp}lt;= 8"] } }], "stage-2" ], "plugins": ["transform-vue-jsx", "transform-runtime"], "env": { "test": { "presets": ["env", "stage-2"], "plugins": ["transform-vue-jsx", "transform-es2015-modules-commonjs", "dynamic-import-node"] } } } 

package.json

 { "name": "app-test", "version": "1.0.0", "description": "Description", "author": "Email {amp}lt;email@email.email{amp}gt;", "private": true, "scripts": { "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js", "start": "npm run dev", "unit": "jest --config test/unit/jest.conf.js --coverage", "test": "npm run unit", "lint": "eslint --ext .js,.vue src test/unit", "build": "node build/build.js", "storybook": "start-storybook" }, "dependencies": { "vue": "^2.6.11", "vue-router": "^3.0.1" }, "devDependencies": { "@babel/core": "^7.7.7", "@storybook/vue": "^5.2.8", "autoprefixer": "^7.1.2", "babel-core": "^6.26.3", "babel-eslint": "^8.2.1", "babel-helper-vue-jsx-merge-props": "^2.0.3", "babel-jest": "^21.0.2", "babel-loader": "^7.1.5", "babel-plugin-dynamic-import-node": "^1.2.0", "babel-plugin-syntax-jsx": "^6.18.0", "babel-plugin-transform-es2015-modules-commonjs": "^6.26.0", "babel-plugin-transform-runtime": "^6.22.0", "babel-plugin-transform-vue-jsx": "^3.5.0", "babel-preset-env": "^1.3.2", "babel-preset-es2015": "^6.24.1", "babel-preset-stage-2": "^6.22.0", "babel-preset-vue": "^2.0.2", "chalk": "^2.0.1", "copy-webpack-plugin": "^4.0.1", "css-loader": "^0.28.0", "eslint": "^4.15.0", "eslint-config-standard": "^10.2.1", "eslint-friendly-formatter": "^3.0.0", "eslint-loader": "^1.7.1", "eslint-plugin-import": "^2.7.0", "eslint-plugin-node": "^5.2.0", "eslint-plugin-promise": "^3.4.0", "eslint-plugin-standard": "^3.0.1", "eslint-plugin-vue": "^4.0.0", "extract-text-webpack-plugin": "^3.0.0", "file-loader": "^1.1.4", "friendly-errors-webpack-plugin": "^1.6.1", "html-webpack-plugin": "^2.30.1", "jest": "^22.0.4", "jest-serializer-vue": "^0.3.0", "node-notifier": "^5.1.2", "optimize-css-assets-webpack-plugin": "^3.2.0", "ora": "^1.2.0", "portfinder": "^1.0.13", "postcss-import": "^11.0.0", "postcss-loader": "^2.0.8", "postcss-url": "^7.2.1", "rimraf": "^2.6.0", "semver": "^5.3.0", "shelljs": "^0.7.6", "storybook": "^5.1.11", "uglifyjs-webpack-plugin": "^1.1.1", "url-loader": "^0.5.8", "vue-jest": "^1.0.2", "vue-loader": "^13.7.3", "vue-style-loader": "^3.0.1", "vue-template-compiler": "^2.6.11", "webpack": "^3.12.0", "webpack-bundle-analyzer": "^2.9.0", "webpack-dev-server": "^2.9.1", "webpack-merge": "^4.1.0" }, "engines": { "node": "{amp}gt;= 6.0.0", "npm": "{amp}gt;= 3.0.0" }, "browserslist": [ "{amp}gt; 1%", "last 2 versions", "not ie {amp}lt;= 8" ] } 

index.stories.js

 import MyButton from '../../src/components/atoms/Button.vue' export default { title: 'Button' } export const withText = () ={amp}gt; '{amp}lt;my-button{amp}gt;with text{amp}lt;/my-button{amp}gt;' export const withEmoji = () ={amp}gt; '{amp}lt;my-button{amp}gt;😀 😎 👍 💯{amp}lt;/my-button{amp}gt;' export const asAComponent = () ={amp}gt; ({ components: { MyButton }, template: '{amp}lt;my-button :rounded="true"{amp}gt;rounded{amp}lt;/my-button{amp}gt;' }) 

Button.vue

 {amp}lt;template{amp}gt; {amp}lt;div{amp}gt;{{ label }}{amp}lt;/div{amp}gt; {amp}lt;/template{amp}gt; {amp}lt;script{amp}gt; export default { name: 'my-button', data () { return { label: 'Mon bouton' } } } {amp}lt;/script{amp}gt; {amp}lt;!-- Add "scoped" attribute to limit CSS to this component only --{amp}gt; {amp}lt;style scoped{amp}gt; div { background-color:black; color:white; } {amp}lt;/style{amp}gt; 

Адам.