Vue-loader: [Production] Failed to mount component: template or render function not defined.

[njleonzhang]

I bootstrap my app in this way. It's works when dev, but if I release the project, I encounter this issue.

import App from './App'

/* eslint-disable no-new */
new Vue({
  el: '#app',
  template: '<App/>',
  components: { App },
  router
})

error stack:

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

found in

---> <App>
       <Root>
warn    @   vue.js:440
mountComponent  @   vue.js:2413
Vue$3.$mount    @   vue.js:7565
Vue$3.$mount    @   vue.js:9664
init    @   vue.js:3356
createComponent @   vue.js:4895
createElm   @   vue.js:4838
patch   @   vue.js:5337
Vue._update @   vue.js:2320
updateComponent @   vue.js:2443
get @   vue.js:2780
Watcher @   vue.js:2763
mountComponent  @   vue.js:2447
Vue$3.$mount    @   vue.js:7565
Vue$3.$mount    @   vue.js:9664
Vue._init   @   vue.js:4004
Vue$3   @   vue.js:4089
78  @   main.js:11
__webpack_require__ @   bootstrap 5b2fa1d…:54
webpackJsonpCallback    @   bootstrap 5b2fa1d…:25
(anonymous) @   app.15bc53d….js:1

vue loader version:

"vue": "^2.3.3",
"vue-loader": "^12.2.1"

[njleonzhang]

I add vue-loader twice in webpack rule property, which cause this issue.
I don't know if this is a bug?

[LinusBorg]

Well, adding it twice is certainly not intended to work.

[jh-thank-you]

Vue Team,

Thanks for all that you do.

I can confirm that this is happening with my setup as well. I only call vue-loader once in my webpack config. This started with vue-loader v13.x.x. No issue with v12.2.1 or v12.2.2. Here is my package.json:

{
  "name": "hainis-vue-js-main",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "browserslist": [
    "> 1%",
    "ie > 9"
  ],
  "//": [
    "COMMENT - NOTE: If you want a fancy dashboard in the terminal add 'webpack-dashboard -- ' at the beginning of the desired script below",
    "Also, uncomment the DashboardPlugin var and plugin within the webpack config file"
  ],
  "scripts": {
    "preinstall": "mkdir node_modules && touch node_modules/.metadata_never_index",
    "build": "rimraf dist && mkdir dist && touch dist/.metadata_never_index && cross-env NODE_ENV=production webpack --env production --progress --hide-modules",
    "dev": "nodemon --watch webpack.config.js --watch dev-server.js --exec \"cross-env NODE_ENV=development node --max_old_space_size=2048 dev-server.js --env development\"",
    "lint:js": "eslint src/ webpack.*.js --cache --ignore-path .gitignore file.js --format 'node_modules/eslint-friendly-formatter' -- --fix || true",
    "lint:vue": "eslint src/ webpack.*.js --ext=js,vue --cache --ignore-path .gitignore file.js --format 'node_modules/eslint-friendly-formatter' -- --fix || true"
  },
  "events": {
    "restart": "osascript -e 'display notification \"app restarted\" with title \"nodemon\"'"
  },
  "keywords": [
    "webpack",
    "tutorial",
    "uppsalajs",
    "meetup"
  ],
  "author": "Jim Hainis",
  "license": "ISC",
  "devDependencies": {
    "autoprefixer": "^7.1.1",
    "babel-core": "^6.25.0",
    "babel-loader": "^7.1.1",
    "babel-preset-latest": "^6.24.1",
    "babel-preset-stage-0": "^6.24.1",
    "copy-webpack-plugin": "^4.0.1",
    "cross-env": "^5.0.1",
    "css-loader": "^0.28.4",
    "eslint": "^4.1.1",
    "eslint-friendly-formatter": "^3.0.0",
    "eslint-loader": "^1.8.0",
    "eslint-plugin-html": "^3.0.0",
    "eslint-plugin-vue": "^3.5.0",
    "extract-text-webpack-plugin": "^2.1.2",
    "favicons-webpack-plugin": "0.0.7",
    "file-loader": "^0.11.2",
    "friendly-errors-webpack-plugin": "^1.6.1",
    "git-revision-webpack-plugin": "^2.5.1",
    "html-webpack-plugin": "^2.29.0",
    "http-server": "^0.10.0",
    "image-webpack-loader": "^3.3.1",
    "multipage-webpack-plugin": "^0.3.0",
    "nodemon": "^1.11.0",
    "postcss-loader": "^2.0.6",
    "preload-webpack-plugin": "^1.2.2",
    "prerender-spa-plugin": "^2.0.1",
    "resource-hints-webpack-plugin": "0.0.1",
    "rimraf": "^2.6.1",
    "style-loader": "^0.18.2",
    "url-loader": "^0.5.9",
    "vue-loader": "^12.2.2",
    "vue-router": "^2.7.0",
    "vue-template-compiler": "^2.3.4",
    "webpack": "^3.0.0",
    "webpack-dashboard": "^0.4.0",
    "webpack-dev-server": "^2.5.0"
  },
  "dependencies": {
    "axios": "^0.16.2",
    "gsap": "^1.20.2",
    "jquery": "^3.2.1",
    "vue": "^2.3.4"
  }
}

Let me know if you need any other info

[LinusBorg]

Have you read the release notes and made sure that you fixed all require() and require.ensure calls you might have used?

[jh-thank-you]

Missed that... I will give it a try and report back...

UPDATE

Updating require as outlined in the release notes solved the issue for me.

Thanks for the speedy reply.

[isatrio]

I have same issue when I add vue-loader, but if I remove the app work normally. I'm not sure why. Maybe causing of "vue-template-compiler" this package. So the package conflicts.

[mekbiba]

i had the same issue, my component was named Test.vue
the issue was i misspelled the tag
template like tempalte which i had to rename
and the error is gone now