Getting Error from webpack-cli: "TypeError: merge is not a function" in webpack config

Question

I'm using webpack-merge to combine two webpack.config files together but I keep getting the error "TypeError: merge is not a function when I run the command "webpack --config ./config/webpack.config.prod.js"

Has anybody else run across this issue?

webpack.config.prod.js

const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const getCSSModuleLocalIdent = require('react-dev-utils/getCSSModuleLocalIdent');
const TerserPlugin = require('terser-webpack-plugin');
const commonConfig= require('./webpack.config.common');
const merge = require('webpack-merge');

module.exports = merge(commonConfig, {

    //config code
 
})

Solution 1

You are importing merge incorrectly. Try it like this:

const { merge } = require('webpack-merge');

UPD: Based on the following changelog, starting with webpack-merge 5.0.3 and higher, you should use the code I provided above. If the version is lower than 5.0.3, then you need to use:

const merge = require('webpack-merge');

Solution 2

Also you can do this using cmd.

webpack -m -c ./webpack.config.js -c ./webpack.dev.js

or you can create a script in package.json for faster use

  "scripts": {
    "build:dev": "webpack -m -c ./webpack.config.js -c 
    ./webpack.dev.js",
  },

Comments

[Baby Coder]

that fixed it I was confused because I have another project that has it written the other way and it works fine I'll assume it's a version issue

[RICHARD ABRAHAM]

Yes, it is a version issue as it is working without the curly brackets in Webpack v^4.2.2 but not in v^5.1.1

[Muhammed Moussa]

not working "webpack": "^5.3.2", "webpack-merge": "^4.2.2"

[Rustam D9RS]

Based on the following changelog, starting with webpack-merge 5.0.3 and higher, you should use the code that I gave in the solution. If the version is lower than 5.0.3, then you need to use const merge = require('webpack-merge');.

[TommyAutoMagically]

Breaking changes like this are part of why Javascript development can be incredibly frustrating. (Thanks, btw!)