We updated the dependencies of a frontend project today. The frontend uses Webpack to build the Vue files to a JavaScript bundle. The bundling process broke after bumping the dependencies to their newest versions.

Mainly because Webpack merge doesn’t work the same way after the upgrade. This tutorial shows you how to fix the Webpack merge error not being a function.

The Problem: Webpack Merge Is Not a Function

Running the build command to bundle the frontend assets didn’t work after updating the dependencies. Here’s the console output when building the frontend with Webpack:

$ npm run build:js

> webpack --config webpack.prod.js --hide-modules

/Users/marcus/Dev/project-name/node_modules/webpack-cli/bin/cli.js:93
                throw err;
                ^

TypeError: Merge is not a function  
    at Object.<anonymous> (/Users/marcus/Dev/project-name/webpack.prod.js:7:18)
    at … uff, the stacktrace is becoming quite long here

Well, the error is telling us what’s wrong: Merge was a function before and is not a function anymore. Let’s fix this!

Fixing Webpack Merge Is Not a Function

Starting with version 5 of webpack-merge, the merge function moved to a named export instead of being the default export.

You must destructure the merge function from the package import:

// webpack-merge v5 (and later)
const { merge } = require('webpack-merge')

// webpack-merge v4 (and earlier)
const merge = require('webpack-merge')  

You may need to adjust your Webpack configuration to match the named export where every letter is in lowercase. Here’s a sample Webpack configuration using Webpack merge:

webpack.dev.js

const { merge } = require('webpack-merge')  
const Common = require('./webpack.common.js')

module.exports = merge(Common, {  
  mode: 'development'
})

That’s it!

Mentioned Resources

• webpack-merge repository on GitHub