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
 
})

Answer 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');

Answer 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",
  },