Vue.jsを使用したプロジェクトにStorybook for Vueを入れようとしたところ、ブラウザに表示するところまではできるのですが、コンポーネントが下記のエラーになってしまいます。
Failed to mount component: template or render function not defined.
当初は自分でインストールしていたのですが、どうにも解決できず @storybook/cli
を使用してみても同様の問題が発生してしまいます。
どなたか解決方法をご存知の方がいらっしゃいましたらご教授いただけると幸いです。
ちなみに環境は以下の通りです。
"dependencies": {
"axios": "^0.18.0",
"element-ui": "^2.4.6",
"reset-css": "^4.0.1",
"vue": "^2.5.17",
"vue-router": "^3.0.1",
"vuex": "^3.0.1",
"vuex-router-sync": "^5.0.0"
},
"devDependencies": {
"@storybook/addon-actions": "^3.4.10",
"@storybook/addon-knobs": "^3.4.10",
"@storybook/vue": "^3.4.10",
"babel": "^6.23.0",
"babel-core": "^6.26.3",
"babel-eslint": "^8.2.6",
"babel-loader": "^7.1.5",
"babel-preset-env": "^1.7.0",
"babel-register": "^6.26.0",
"browser-sync": "^2.24.6",
"cross-env": "^5.2.0",
"css-loader": "^1.0.0",
"eslint": "^5.4.0",
"eslint-config-airbnb-base": "^13.1.0",
"eslint-friendly-formatter": "^4.0.1",
"eslint-loader": "^2.1.0",
"eslint-plugin-import": "^2.14.0",
"eslint-plugin-vue": "^4.7.1",
"extract-text-webpack-plugin": "^4.0.0-beta.0",
"node-sass": "^4.9.3",
"sass-loader": "^7.1.0",
"storybook-vue-router": "^1.0.1",
"style-loader": "^0.22.1",
"ts-loader": "^4.5.0",
"typescript": "^3.0.1",
"vue-loader": "^15.4.0",
"vue-style-loader": "^4.1.2",
"vue-template-compiler": "^2.5.17",
"vue-test-utils": "^1.0.0-beta.11",
"webpack": "^4.17.1",
"webpack-cli": "^3.1.0",
"@storybook/addon-links": "^3.4.10",
"@storybook/addons": "^3.4.10",
"babel-preset-vue": "^2.0.2"
}
.storybook/
配下には下記があります。
addons.js
import '@storybook/addon-actions/register';
import '@storybook/addon-knobs/register';
config.js
import { configure } from '@storybook/vue';
const context = require.context('../src/js/app/stories/', true, /^.*?\.js$/);
function loadStories() {
context.keys().forEach((filename) => {
context(filename);
});
};
configure(loadStories, module);
webpack.config.js
const path = require('path');
const { VueLoaderPlugin } = require('vue-loader');
module.exports = (storybookBaseConfig) => {
const config = storybookBaseConfig;
config.module.rules.push({
test: /\.scss$/,
use: [
'vue-style-loader',
'css-loader',
'sass-loader',
],
});
config.module.rules.push({
test: /\.vue$/,
loader: 'vue-loader',
});
config.plugins.push(new VueLoaderPlugin());
return config;
};