teratail
質問するログイン新規登録

Q&A

0回答

395閲覧

vue storybook作成時のnpm run devエラー(code ELIFECYCLE)

退会済みユーザー

退会済みユーザー

総合スコア0

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

npm

npmは、Node Packaged Modulesの略。Node.jsのライブラリ・パッケージを管理できるツールです。様々なモジュールを簡単にインストールでき、自分でモジュールを作成し公開する際にも使用できます。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2018/12/06 17:35

0

0

現在 vue-cliにてプロジェクトを作成して、storybookを動かそうとしています。

ディレクトリ構造はcliで作成した時とほぼ変わりありません。

├── README.md ├── build │   ├── build.js │   ├── check-versions.js │   ├── logo.png │   ├── utils.js │   ├── vue-loader.conf.js │   ├── webpack.base.conf.js │   ├── webpack.dev.conf.js │   └── webpack.prod.conf.js ├── config │   ├── dev.env.js │   ├── index.js │   ├── prod.env.js │   └── test.env.js ├── index.html ├── package-lock.json ├── package.json ├── src │   ├── App.vue │   ├── assets │   │   └── logo.png │   ├── components │   │   ├── HelloWorld.vue │   │   └── MyButton.vue │   ├── main.js │   ├── router │   │   └── index.js │   └── stories │   └── index.js ├── static └── test ├── e2e │   ├── custom-assertions │   │   └── elementCount.js │   ├── nightwatch.conf.js │   ├── runner.js │   └── specs │   └── test.js └── unit ├── jest.conf.js ├── setup.js └── specs └── HelloWorld.spec.js

ここにstorybookを追加し、設定を記述しました。

.storybook/config.js

import { configure } from '@storybook/vue' import Vue from 'vue' function loadStories () { require('./../src/stories') } configure(loadStories, module)

storybookも記述

src/stories/index.js

import { storiesOf } from '@storybook/vue' import MyButton from './../components/HelloWorld.vue' storiesOf('HelloWorld', module) .add('simple', () => ({ components: { HelloWorld }, template: `<HelloWorld></HelloWorld>` }))

もちろんHelloWorld.vueも存在します。

npm run devを実行すると以下エラーとなります。

npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! project@1.0.0 dev: `webpack-dev-server --inline --progress --config build/webpack.dev.conf.js` npm ERR! Exit status 1 npm ERR! npm ERR! Failed at the project@1.0.0 dev script. npm ERR! This is probably not a problem with npm. There is likely additional logging output above. npm ERR! A complete log of this run can be found in: npm ERR! /root/.npm/_logs/2018-12-06T17_23_48_779Z-deb

調べると、vue loaderがないのでは?という記事を見つけたので、
webpackに追加しました。

build/webpack.dev.conf.js(修正箇所のみ追加。あと省略)

const VueLoaderPlugin = require('vue-loader/lib/plugin') rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap, usePostCSS: true, loader: 'vue-loader' }) new VueLoaderPlugin()

これで結果は変わらず。

次にキャッシュを消したり、npm installやらを再度実施しました。

それでも同じでした。

原因わかる方いれば教えてください。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

guest

回答の取得に失敗しました

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問