Failed to mount component: template or render function not defined. in Storybook for Vue

When I tried to put Storybook for Vue into a project using Vue.js, I could see it in my browser, but the components got the following error:

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

I installed it myself at first, but I couldn't solve it, so I had a similar problem using @storybook/cli.
If anyone knows how to solve this problem, I would appreciate it if you could let me know.

By the way, the environment is as follows.

"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-ass": "^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"
}

Below .storybook/ are:

import'@storybook/addon-actions/register';
import '@storybook/addon-knobs/register';

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);

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;
};

javascript vue.js axios

2022-09-30 11:04

1 Answers

I solved myself.
The reason is vue-loader, and @storybook/vue didn't seem to work because the way you specified it changed from version 15.

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

I discovered the above issue and installed @storybook/[email protected], and it worked fine.

2022-09-30 11:04

If you have any answers or tips

Popular Tags

python x 4647

android x 1593

java x 1494

javascript x 1427

c x 927

c++ x 878

ruby-on-rails x 696

php x 692

python3 x 685

html x 656