Vue3 Vite - Component is missing template or render function
See original GitHub issueI have a fresh "@storybook/vue3": "6.4.0-beta.25" installation, where I removed the examples and tried adding an extremely basic story. The story appears in the sidebar, but the component is not rendering, and I get the following warning:
runtime-core.esm-bundler.js:6871 [Vue warn]: Component is missing template or render function.
link.stories.js
import Link from '../app/javascript/my_app/components/Link.vue';
export default {
title: 'My App/Link',
component: Link,
};
export const Default = () => ({
components: { Link },
template: '<Link>More</Link>',
});
Link.vue
<template>
<a v-bind="$props" class="text-blue-600">
<slot></slot>
</a>
</template>
main.js
const { resolve } = require('path');
const { loadConfigFromFile, mergeConfig } = require("vite");
module.exports = {
"stories": [
"../stories/**/*.stories.mdx",
"../stories/**/*.stories.@(js|jsx|ts|tsx)"
],
"addons": [
"@storybook/addon-links",
"@storybook/addon-essentials"
],
"framework": "@storybook/vue3",
"core": {
"builder": "storybook-builder-vite"
},
async viteFinal(config, { configType }) {
const { config: userConfig } = await loadConfigFromFile(
resolve(__dirname, "../vite.config.js")
);
return mergeConfig(config, {
...userConfig,
resolve: {
alias: {
...userConfig.resolve.alias,
vue: 'node_modules/vue3/dist/vue.esm-bundler.js'
}
}
});
},
}
vite.config.js
import { resolve } from 'path';
import { defineConfig } from 'vite';
import RubyPlugin from 'vite-plugin-ruby';
import vue from '@vitejs/plugin-vue';
import eslintPlugin from 'vite-plugin-eslint';
export default defineConfig({
resolve: {
alias: {
vue: 'vue3',
'vue-router': 'vue-router4',
vuex: 'vuex4',
'@': resolve(__dirname, 'app/javascript/my_app/'),
assets: resolve(__dirname, 'app/javascript/assets'),
'tailwind.config.js': resolve(__dirname, 'app/javascript/my_app/tailwind.config.js'),
},
},
plugins: [RubyPlugin(), vue(), eslintPlugin()],
css: {
postcss: {
plugins: [require('tailwindcss')('./app/javascript/my_app/tailwind.config.js')],
},
},
optimizeDeps: {
include: ['tailwind.config.js']
},
});
Any ideas?
Issue Analytics
- State:
- Created 2 years ago
- Comments:6 (2 by maintainers)
Top Results From Across the Web
Vue.js - Component is missing template or render function
Component is missing template or render function. Here, the Home component is causing the problem. Can't we pass the result of component() to...
Read more >"Component is missing template or render function" after HMR
When using Vite with Vue 3, regularly a component update will cause the component to vanish from the browser page and the following...
Read more >Vue 3: Component is missing template or render function.
Hello, today i tested vue 3 with typescript and wanted to used components. Unfortunately I always get the message "Component is missing template...
Read more >Component is missing template or render function after ...
Coding example for the question Component is missing template or render function after publishing vue3+vite package-Vue.js.
Read more >[Vue 3] Fresh project hot reload resulting in "Component is ...
Steps to simulate: ... “[Vue warn]: Component is missing template or render function.” also the “mounted” gets logged but still component is not ......
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
@IanVS finally got it working! Here’s the repo.
https://github.com/olemarius/storybook-builder-vite-example-vue-in-isolation
Edit: Oops, made it Private first. Changed to Public now.
The error occurs when @vitejs/plugin-vue is added. I was importing my vite.config.ts file where I need the vue() plugin, but when I handled vite’s config seperately in main.js it worked.
I also added some plugins and alias that I use in my project to make sure it work.
@IanVS haha yea been struggling with getting things to work for a while now. At least I got it to work in a test repo, but getting it to work in a pretty complex set up saas application is a bit more tricky. But at least storybook starts now, only thing missing is the components actually being rendered.