Hey there, I’ve dealt with this exact headache when upgrading a Vue project to Webpack 4. That error usually boils down to mismatched dependencies or misconfigured Webpack settings that break how Vue compiles components. Let’s walk through the most common fixes:

1. Ensure You’re Using Vue’s Full Build (Runtime + Compiler) #

Webpack 4’s default resolution might pull in Vue’s runtime-only build by default, which doesn’t include the template compiler. If your components use the template option (instead of single-file .vue files), this will trigger the error immediately.

Fix it by adding an alias in your webpack.config.js to force Webpack to use the full compiler-included build:

module.exports = {
  // ... other config settings
  resolve: {
    alias: {
      'vue$': 'vue/dist/vue.esm.js' // Points to the full build with compiler
    }
  }
}

2. Sync Vue Loader and Template Compiler Versions #

Webpack 4 requires a newer version of vue-loader (v15+), and it must be paired with a matching vue-template-compiler version (exact same as your Vue core version). If these are out of sync, the template-to-render-function compilation fails silently, leading to the missing render function error.

First, upgrade the dependencies:

npm install vue-loader@^15 vue-template-compiler@^2 --save-dev
# For yarn users:
yarn add vue-loader@^15 vue-template-compiler@^2 --dev

Then, add the mandatory VueLoaderPlugin to your Webpack config (required for vue-loader v15+):

const VueLoaderPlugin = require('vue-loader/lib/plugin');

module.exports = {
  // ... other config
  plugins: [
    new VueLoaderPlugin() // This is non-negotiable for vue-loader v15+
  ],
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      }
    ]
  }
}

3. Update Webpack Module Rule Syntax #

Webpack 4 deprecated some old loader syntax, so make sure your .vue file rules are using the modern format. Avoid loaders (use use instead) and ensure all related loaders are properly configured. For example, if you’re using CSS in Vue components, your rules should look like this:

module.exports = {
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: {
          compilerOptions: {
            preserveWhitespace: false
          }
        }
      },
      // Process CSS inside Vue components
      {
        test: /\.css$/,
        use: [
          'vue-style-loader',
          'css-loader'
        ]
      }
    ]
  }
}

4. Double-Check Component Syntax #

Quickly verify that your components aren’t using outdated syntax that the new tooling can’t handle:

• Ensure single-file components have proper <template>, <script>, and <style> blocks.
• If you’re using the runtime-only build (without the compiler), avoid using the template option in root Vue instances or components—stick to render functions or single-file components instead.

After applying these fixes, restart your Webpack dev server, and most of your components should load without the error.

内容的提问来源于stack exchange，提问作者jesal