[Vue warn]: Failed to mount component: template or render function not defined in Webpack 4

Question

I started getting this error once I upgraded to Webpack and related dependencies to v4: [Vue warn]: Failed to mount component: template or render function not defined.

Here's the relevant snippets of my package.json and webpack.config.js before and after:

Before upgrade:

package.json

{
  "dependencies": {
    "vue": "^2.5.0",
    "vue-template-compiler": "^2.5.0"
  },
  "devDependencies": {
    "babel-core": "^6.9.0",
    "babel-loader": "^6.2.4",
    "babel-plugin-external-helpers": "^6.22.0",
    "babel-plugin-transform-es2015-block-scoping": "^6.26.0",
    "babel-plugin-transform-object-rest-spread": "^6.26.0",
    "babel-plugin-transform-runtime": "^6.23.0",
    "babel-preset-env": "^1.6.1",
    "babel-preset-es2015": "^6.9.0",
    "babel-preset-es2015-without-strict": "^0.0.4",
    "babel-preset-es2017": "^6.24.1",
    "babel-preset-latest": "^6.24.1",
    "css-loader": "^0.26.0",
    "eslint": "^4.3.0",
    "husky": "^0.14.3",
    "lint-staged": "^4.0.2",
    "resolve-url-loader": "^1.6.0",
    "sass-loader": "^4.0.1",
    "stats-webpack-plugin": "^0.2.1",
    "style-loader": "^0.13.1",
    "uglifyjs-webpack-plugin": "^1.1.6",
    "vue-loader": "^12.1.0",
    "webpack": "3.10.0",
    "webpack-dev-server": "^2.3.0",
    "webpack-monitor": "^1.0.13"
  }
}

webpack.config.js

 {
  resolve: {
    modules: [
      path.join(__dirname, '..', 'webpack'),
      'node_modules/'
    ],
    alias: {
      vue: process.env.NODE_ENV === 'production' ? 'vue/dist/vue.min.js' : 'vue/dist/vue.js',
      libs: 'libs/'
    }
  },

  plugins: [
    new StatsPlugin('manifest.json', {
      chunkModules: false,
      source: false,
      chunks: false,
      modules: false,
      assets: true
    })],
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: [
          {
            loader: 'babel-loader',
            options: {
              cacheDirectory: true,
              presets: ['es2015']
            }
          }
        ]
      }, {
        test: /\.vue$/,
        exclude: /node_modules/,
        use: [
          {
            loader: 'vue-loader'
          }
        ]
      },
      {
        test: /\.js$/,
        include: [
          path.resolve(process.cwd(), 'node_modules/')
        ],
        use: [
          {
            loader: 'babel-loader',
            options: {
              plugins: ['transform-es2015-block-scoping'],
              cacheDirectory: true
            }
          }
        ],
      },
    ]
  }
};

After upgrade:

package.json

{
  "dependencies": {
    "vue": "^2.5.13",
    "vue-template-compiler": "^2.5.13"
  },
  "devDependencies": {
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.3",
    "babel-plugin-external-helpers": "^6.22.0",
    "babel-preset-env": "^1.6.1",
    "babel-preset-latest": "^6.24.1",
    "css-loader": "^0.26.0",
    "eslint": "^4.3.0",
    "husky": "^0.14.3",
    "lint-staged": "^4.0.2",
    "resolve-url-loader": "^1.6.0",
    "sass-loader": "^4.0.1",
    "stats-webpack-plugin": "^0.2.1",
    "style-loader": "^0.13.1",
    "uglifyjs-webpack-plugin": "^1.1.6",
    "vue-loader": "^14.1.1",
    "webpack": "^4.0.1",
    "webpack-cli": "^2.0.9",
    "webpack-dev-server": "^3.0.0",
    "webpack-monitor": "^1.0.13"
  }
}

webpack.config.js

{
  resolve: {
    modules: [
      path.join(__dirname, '..', 'webpack'),
      'node_modules/'
    ],
    alias: {
      vue: process.env.NODE_ENV === 'production' ? 'vue/dist/vue.min.js' : 'vue/dist/vue.js',
      libs: 'libs/'
    }
  },

  plugins: [
    new StatsPlugin('manifest.json', {
      chunkModules: false,
      source: false,
      chunks: false,
      modules: false,
      assets: true
    })],
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: [
          {
            loader: 'babel-loader',
            options: {
              cacheDirectory: true
            }
          }
        ]
      }, {
        test: /\.vue$/,
        exclude: /node_modules/,
        use: [
          {
            loader: 'vue-loader'
          }
        ]
      },
      {
        test: /\.js$/,
        include: [
          path.resolve(process.cwd(), 'node_modules/')
        ],
        use: [
          {
            loader: 'babel-loader',
            options: {
              cacheDirectory: true
            }
          }
        ],
      },
    ]
  }
};

What is expected?

Vue components work without errors after upgrading

What is actually happening?

Most Vue components show an error and fail to load: [Vue warn]: Failed to mount component: template or render function not defined.

Temperament

Can you show how you are importing components? Are you doing async / dynamic imports? – Epexegesis

@Epexegesis Oh your question helped me figure this out! Basically I was declaring components like this: Vue.component('thing', require('libs/components/thing.vue')); I had to change that to Vue.component('thing', require('libs/components/thing.vue').default); – Temperament

Great! Glad it helped. – Epexegesis

Answer 1

Figured this out (h/t @skribe). Basically I was declaring components like this:

Vue.component('thing', require('libs/components/thing.vue'));

I had to change that to:

Vue.component('thing', require('libs/components/thing.vue').default);

Temperament

Other note. According to the release notes for vue-loader v13 imports need to be handled differently at times as well const Foo = () => import('./Foo.vue').then(m => m.default) github.com/vuejs/vue-loader/releases/tag/v13.0.0 – Epexegesis

You save my day. Weird though. It worked for me.. Can you tell the reason why you have to add .default? – Swept

@santanubera Glad to have helped! For me, this happened because the newer version of Webpack no longer implicitly uses the default export from a package. You have to now explicitly tell it to use default. – Temperament

Thank you so much @Temperament – Swept

This does work indeed, can confirm I had the same issue after updating to webpack 4 – Michalemichalski