

Vue.jsを使用したプロジェクトにStorybook for
Vueを入れようとしたところ、ブラウザに表示するところまではできるのですが、コンポーネントが下記のエラーになってしまいます。

`Failed to mount component: template or render function not defined.`

当初は自分でインストールしていたのですが、どうにも解決できず `@storybook/cli` を使用してみても同様の問題が発生してしまいます。  
どなたか解決方法をご存知の方がいらっしゃいましたらご教授いただけると幸いです。

ちなみに環境は以下の通りです。

[code]

    "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"
    }
    
[/code]

`.storybook/` 配下には下記があります。

# addons.js

[code]

    import '@storybook/addon-actions/register';
    import '@storybook/addon-knobs/register';
    
[/code]

# config.js

[code]

    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);
    
[/code]

# webpack.config.js

[code]

    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;
    };
    
[/code]


CC BY-SA 4.0
2018-08-24T05:14:50.487
47775
2021-04-04T00:56:36.537
2021-04-04T00:56:36.537
32986
29844
question
javascript vue.js axios
Storybook for Vueで「Failed to mount component: template or render function not defined.」になる


こちら自己解決しました。  
原因は `vue-loader` で、バージョン15から指定の仕方が変わったために、 `@storybook/vue` が動かなかったようです。

<https://github.com/storybooks/storybook/issues/3492>

上記のissueを発見し、 `@storybook/vue@4.0.0-alpha.16` をインストールしたところ無事動きました。


CC BY-SA 4.0
2018-08-24T07:59:07.750
47779
2018-08-24T07:59:07.750
29844
47775
answer