Vue js – Template or render function not defined

Question

Background

I have a relatively old project built using laravel-mix with some Vue components and I thought I would update all of its scripts.

After making a number of changes I kept getting this error:

Vue packages version mismatch:

- vue@2.5.13
- vue-template-compiler@2.3.3

At this point, I tried to npm update vue and npm update vue-template-compiler but had similar issues. I then followed some advice to "nuke" node_modules and install everything again.

I came up against similar issues again and made some changes to my package.json, reinstalled everything and now my build scripts work great.

The issue

In browser none of the components are loading. In the console, for each component on the page I get the following error:

[Vue warn]: Failed to mount component: template or render function not defined.

found in

---> <WorldMap>
       <Root>

I have checked the following...

• the <world-map> tag is on the page and the WorldMap component is being loaded
• the component has an export default { in its script section
• My template is wrapped in template tags
• I've never needed a render function so don't have one, but I have looked at this as a solution
• Its also worth pointing out that all my files worked before I ran this update, so its either a Vue version or an npm version issue.

Am I missing a crucial vue module? A lot of my searches say something about having the run-time version of vue installed, but to date my setup has never needed any changes there.

I am an npm noob so feel free to patronise me / over explain

This is my package.json

{
  "private": true,
  "scripts": {
    "dev": "npm run development",
    "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
    "watch": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
    "watch-poll": "npm run watch -- --watch-poll",
    "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
    "prod": "npm run production",
    "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
  },
  "devDependencies": {
    "axios": "^0.17",
    "bootstrap-sass": "^3.3.7",
    "browser-sync": "^2.23.5",
    "browser-sync-webpack-plugin": "^1.2.0",
    "cross-env": "^5.1",
    "jquery": "^3.2",
    "laravel-mix": "^1.0",
    "lodash": "^4.17.4",
    "vue": "^2.5.7"
  },
  "dependencies": {
    "bodymovin": "^4.13.0",
    "jquery-match-height": "^0.7.2",
    "medium-editor": "^5.23.3",
    "numeral": "^2.0.6",
    "rangeslider.js": "^2.3.2",
    "rellax": "^1.5.0",
    "vue-loader": "^13.7.0",
    "vue-sortable": "^0.1.3"
  }
}

Answer 1

I remember having this too, there was a breaking change introduced in one of the updates.

If you are using require to load your components, you need to add a .default call to the end.

here is my boot.js

new Vue({
    el: "#app-root",
    store,
    router: router,
    render: h => h(require("./components/app/app.vue").default)
});

And here is my router.js

const routes = [
    { path: '/', component: require('./components/home/home.vue').default, name : "home" },    
...
];