Nuxt•4mo ago

Component provided template option but runtime compilation is not supported in this build of Vue

I'm getting this runtime error in the browser when I run Storybook. The error specifically only happens for this story:

import Label from './Label.vue'

export default {
  title: 'Atoms/Label',
  component: Label,
  tags: ['autodocs'],
  parameters: {
    layout: 'centered',
  },
}

// This fails because of the `template` key
export const Default = () => ({
  components: { Label },
  template: '<Label>Hello world!</Label>', 
})

// Stories like this work fine
// But I have no way of passing in `<slot/>`s
export const Default: Story = {
  args: {
    someProp: 'xxx'
  },
}

import Label from './Label.vue'

export default {
  title: 'Atoms/Label',
  component: Label,
  tags: ['autodocs'],
  parameters: {
    layout: 'centered',
  },
}

// This fails because of the `template` key
export const Default = () => ({
  components: { Label },
  template: '<Label>Hello world!</Label>', 
})

// Stories like this work fine
// But I have no way of passing in `<slot/>`s
export const Default: Story = {
  args: {
    someProp: 'xxx'
  },
}

This is my ./storybook/main.ts:

import type { StorybookConfig } from '@storybook-vue/nuxt'

const config: StorybookConfig = {
  stories: ['../components/**/*.story.ts'],
  addons: ['@storybook/addon-essentials'],
  framework: {
    name: '@storybook-vue/nuxt',
    options: {},
  },
  docs: {
    autodocs: 'tag',
  },
}
export default config

import type { StorybookConfig } from '@storybook-vue/nuxt'

const config: StorybookConfig = {
  stories: ['../components/**/*.story.ts'],
  addons: ['@storybook/addon-essentials'],
  framework: {
    name: '@storybook-vue/nuxt',
    options: {},
  },
  docs: {
    autodocs: 'tag',
  },
}
export default config

The full error in browser:

runtime.js:8247 [Vue warn]: Component provided template option but runtime compilation is not supported in this build of Vue. Configure your bundler to alias "vue" to "vue/dist/vue.esm-bundler.js". 
  at <Anonymous> 
  at <Anonymous> 
  at <App>

runtime.js:8247 [Vue warn]: Component provided template option but runtime compilation is not supported in this build of Vue. Configure your bundler to alias "vue" to "vue/dist/vue.esm-bundler.js". 
  at <Anonymous> 
  at <Anonymous> 
  at <App>

1 Reply

joe_black_unlucky•4mo ago

have you tried aliasing it like it recommends? The warning you're encountering occurs because Vue's runtime-only build is being used, which does not support templates in components. The runtime-only build is lighter and faster but requires that your templates are pre-compiled during the build step, often using tools like Vue Loader in a Webpack setup or Vite. To resolve this, you need to configure your bundler (Webpack, Vite, etc.) to use the build of Vue that includes the template compiler. This can be done by aliasing Vue to vue/dist/vue.esm-bundler.js. Here’s how you can do it depending on the bundler you’re using: For Webpack: If you're using Webpack, you can add an alias in your Webpack configuration file (webpack.config.js):

module.exports = {
  // other configurations...
  resolve: {
    alias: {
      'vue$': 'vue/dist/vue.esm-bundler.js'
    }
  }
}

module.exports = {
  // other configurations...
  resolve: {
    alias: {
      'vue$': 'vue/dist/vue.esm-bundler.js'
    }
  }
}

For Vite: If you're using Vite, you can add the alias in your Vite configuration file (vite.config.js):

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  resolve: {
    alias: {
      'vue$': 'vue/dist/vue.esm-bundler.js'
    }
  },
  plugins: [vue()]
})

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  resolve: {
    alias: {
      'vue$': 'vue/dist/vue.esm-bundler.js'
    }
  },
  plugins: [vue()]
})

For Nuxt 3: If you're using Nuxt 3, this issue usually doesn't arise because Nuxt handles these configurations internally. However, if it does, you might need to look into custom build configurations in your nuxt.config.js.

export default defineNuxtConfig({
  alias: {
    'vue$': 'vue/dist/vue.esm-bundler.js'
  }
})

export default defineNuxtConfig({
  alias: {
    'vue$': 'vue/dist/vue.esm-bundler.js'
  }
})

After adding this alias, your bundler will use the correct Vue build that includes the template compiler, and the warning should be resolved. wow, chatgpt can answer all your questions

Gaming

Programming

Component provided template option but runtime compilation is not supported in this build of Vue