[Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build.

jay763190097 commented 6 years ago

Version

3.0.5

Reproduction link

http://excuse

Node and OS info

Node 8.11.1

Steps to reproduce

excuse

What is expected?

运行不了

What is actually happening?

报上面的错误

LinusBorg commented 6 years ago

https://cli.vuejs.org/config/#runtimecompiler

jay763190097 commented 6 years ago

我用的vue-cli3, 没有vue.config.js 也没有 webpack配置文件，怎么弄呢？

haoqunjiang commented 6 years ago

请自行创建 vue.config.js 文件

blocka commented 5 years ago

What if you wanted the runtime compiler only for jest tests?

LinusBorg commented 5 years ago

Use NODE_ENV to switch it

LinusBorg commented 5 years ago

Use NODE_ENV to switch it or rewite the module path in jest config

LinusBorg commented 5 years ago

Remap the module path in jest config

tenadolanter commented 5 years ago

i had the same question , and resolved it ! change your webpack.config.js or App.vue like this :

webpack.config.js

resolve: { alias: { vue: 'vue/dist/vue.esm.js' } }

App.vue

new Vue({ el: '#app', router, render: h => h(App) })

TIps:

if you created your app by @vue/cli, please add code to your vue.config.js like this:

module.exports = { runtimeCompiler: true, }

lc-thomas commented 5 years ago

that render: h => h(App) thing was also what I was missing

razorwu1994 commented 5 years ago

that render: h => h(App) thing was also what I was missing

if pass in render: h => h(App) , it ignores router. I am new to Vue but that is not the solution. I am following the tutorials ,exact code. Blank page.

lc-thomas commented 5 years ago

You have to pass the router to your Vue instanciation :

import Vue from 'vue'
import App from './App'
import store from './store'
import router from './router'

console.log('[i] Starting client app')

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
  store,
  router,
  components: { App }
}).$mount('#app')

kevinvega09 commented 5 years ago

You have to pass the router to your Vue instanciation :

import Vue from 'vue'
import App from './App'
import store from './store'
import router from './router'

console.log('[i] Starting client app')

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
  store,
  router,
  components: { App }
}).$mount('#app')

This solution work out for me. Thank you!

smelike commented 5 years ago

请自行创建 vue.config.js 文件

Fixed by this way.

db12138 commented 5 years ago

the problem has been solved at https://github.com/vuejs-templates/webpack/issues/215 Simple way, change

import Vue from 'vue' to

import Vue from 'vue/dist/vue.js'; It resolved my issue

hoophony commented 5 years ago

I also encountered this problem when I converted the vue-cli 2.0 project into vue-cli 3.0. I change new Vue({ el: '#app', router, store, components: {App}, template: '' }) to new Vue({ render: h => h(App),
store, router, components: { App } }).$mount('#app')

It resolved my issue

gg4u commented 5 years ago

Hi everybody,

getting close to a solution:

so problem is related to syntax for vue 3.0 + ? Is it different than vue 2.0 ?

So could you please show a syntax that translate how to make use of multiple templates and components ? e.g

import Vue from 'vue'
import App from './App.vue'
import Rating from './components/Rating' 
new Vue({  el: '#app',  template: '<Rating/>',  components: { Rating }})

if I try:

new Vue({
  render: h => h(App, Rating),
  Rating,
  template: '<Rating :grade="3" :maxStars="5" :hasCounter="true"/>',
  components: { App, Rating}
}).$mount('#app')

I cannot see the rating component.

what is that render: h => h(App), and then mounted ?

I found former sytax more readable, espeically for more complex structures.

P..s.

could you help to pintpoint a tutorial that shows how to migrate to new syntax? I created quite quickly a demo by putting everything in one index.html, including scripts and html. I would like to break down into templates and components, for the sake of maintanance, and attempting to use vue cli.

But feeling it consumes quite much of time to solve this hiccups.

Thank you for point at practical resources

gg4u commented 5 years ago

I also add useful resource: https://codewithhugo.com/writing-multiple-vue-components-in-a-single-file/

sky1225 commented 4 years ago

You have to pass the router to your Vue instanciation :

import Vue from 'vue'
import App from './App'
import store from './store'
import router from './router'

console.log('[i] Starting client app')

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
  store,
  router,
  components: { App }
}).$mount('#app')

This solution work out for me. Thank you!

great! thank you

mediafreakch commented 4 years ago

Why do I need a render function within the root Vue instance? The official vue-router getting started example doesn't need one: https://jsfiddle.net/yyx990803/xgrjzsup/

Why doesn't vue-loader transform my component within the route config?

tomsour1s commented 4 years ago

For me, the solution was: create a new file "vue.config.js" in the root folder and add module.exports = { runtimeCompiler: true }

yveyeh commented 4 years ago

the problem has been solved at vuejs-templates/webpack#215 Simple way, change

import Vue from 'vue' to

import Vue from 'vue/dist/vue.js'; It resolved my issue

This literally saved my day after over 3 hours of knocking my head! Thanks @db12138 .

Storm75 commented 4 years ago

i had the same question , and resolved it ! change your webpack.config.js or App.vue like this :
1. **webpack.config.js**
resolve: { alias: { vue: 'vue/dist/vue.esm.js' } }
1. **App.vue**
new Vue({ el: '#app', router, render: h => h(App) })

TIps:

if you created your app by @vue/cli, please add code to your vue.config.js like this:

module.exports = { runtimeCompiler: true, }

Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.

configuration has an unknown property 'runtimeCompiler'. These properties are valid: object { amd?, bail?, cache?, context?, dependencies?, devServer?, devtool?, entry?, externals?, infrastructureLogging?, loader?, mode?, module?, name?, node?, optimization?, output?, parallelism?, performance?, plugins?, profile?, recordsInputPath?, recordsOutputPath?, recordsPath?, resolve?, resolveLoader?, serve?, stats?, target?, watch?, watchOptions? } For typos: please correct them. For loader options: webpack >= v2.0.0 no longer allows custom properties in configuration. Loaders should be updated to allow passing options via loader options in module.rules. Until loaders are updated one can use the LoaderOptionsPlugin to pass these options to the loader: plugins: [ new webpack.LoaderOptionsPlugin({ // test: /.xxx$/, // may apply this only for some modules options: { runtimeCompiler: … } }) ]

Tofandel commented 4 years ago

Or just add

new Vue({
  store,
  router,
  render: (h) => {
    return h();
  },
}).$mount('#app');

For some reason the render function is required or it tries to compile an empty template and throws this warning, I think there should be a check if the template is empty as well to not throw this warning

And you can get rid of your App.vue file as well as the vue template compiler to reduce build size

arikardnoir commented 4 years ago

On the vue.config.js file put:

module.exports = { runtimeCompiler: true }

ryuchaehwa commented 3 years ago

Hey, I'm using ant-design-vue and vue-router, this problem came up when I try to use router-view. adding vue.config.js file doesn't help me out to fix the issue. btw router doesn't work at all.

any idea how to fix it?

main.js

import router from '../router/main.js'

Vue.config.productionTip = false

new Vue({
  router,
  render: h => h(App),
}).$mount('#app')

./router/main.js

import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use( VueRouter )

// const TodInfo = require( '../src/components/tod/TodInfo.vue' )
// const Login = require('../src/components/util/BucheonLogin.vue')

const TodInfo = {template: '<div>Foo</div>'}
console.log(TodInfo)

const router = new VueRouter( {

    mode: 'history',
    routes: [
        // {
        //     path: '/',
        //     name: 'login',
        //     component: Login
        // },
        {
            path: '/todinfo',
            name: 'todinfo',
            component: TodInfo
        }
    ]
} )

export default router

App.vue

    <a-layout>
     ..
       ..
      ..
      ..
        <router-view></router-view>
        data
    ..
    </a-layout>

fulutas commented 3 years ago

the problem has been solved at vuejs-templates/webpack#215 Simple way, change import Vue from 'vue' to import Vue from 'vue/dist/vue.js'; It resolved my issue

This literally saved my day after over 3 hours of knocking my head! Thanks @db12138 .

Thank you! :)

zerotower69 commented 3 years ago

i had the same question , and resolved it ! change your webpack.config.js or App.vue like this :

webpack.config.js

resolve: { alias: { vue: 'vue/dist/vue.esm.js' } }

App.vue

new Vue({ el: '#app', router, render: h => h(App) })

TIps:

if you created your app by @vue/cli, please add code to your vue.config.js like this:

module.exports = { runtimeCompiler: true, }

Thanks, it can work.

stijnjanmaat commented 3 years ago

If anyone encounters this warning in running unit tests with vue-test-utils, it turns out I needed to supply a localVue in mount of shallowMount which includes the template compiler:

// SomeComponent.spec.js

import { mount } from '@vue/test-utils';
import Vue from 'vue/dist/vue.common.js';
import SomeComponent from './SomeComponent.vue';

const wrapper = mount(SomeComponent, {
  localVue: Vue,
});

...

I expected webpack to take care of using the correct vue because I set the correct alias, but vue-test-utils needed some help here.

ebwittenberg commented 3 years ago

Use NODE_ENV to switch it or rewite the module path in jest config

@LinusBorg This is regards to: What if you wanted the runtime compiler only for jest tests?

Do you have an example of this? I've been trying to figure out how to get the compiler-included build to run in my jest tests but can't seem to get it to work. Thanks for the help, I know it's from awhile ago.

melkishengue commented 2 years ago

@ebwittenberg in the jest config you can re-map theVue import like this:

moduleNameMapper: {
    ...
    '^vue$': 'vue/dist/vue.common.dev.js',
    ...
},

Doing so, jest will use that path to resolve Vue for testing. This version includes the template compiler.

suraiyaaysha commented 2 years ago

i had the same question , and resolved it ! change your webpack.config.js or App.vue like this :

webpack.config.js

resolve: { alias: { vue: 'vue/dist/vue.esm.js' } }

App.vue

new Vue({ el: '#app', router, render: h => h(App) })

TIps:

if you created your app by @vue/cli, please add code to your vue.config.js like this:

module.exports = { runtimeCompiler: true, }

What is the solution if my projects in Nuxt.js. I am doing a Nuxt.js project and facing the same problem. What is the solution for Nuxt.js?

hanmeiting commented 2 months ago

I created project by @vue/cli. I solved my problem use this:

module.exports = { runtimeCompiler: true, }

vuejs / vue-cli