Webpack 4 production mode bundle throws an Uncaught ReferenceError: require is not defined

Bug report

What is the current behavior?
When using the mode : "production" setting I get an Uncaught ReferenceError: require is not defined error thrown, none and development modes work as expected.
The target is web not node.

If the current behavior is a bug, please provide the steps to reproduce.
These are my webpack config files:

#webpack.common.js:

const path = require("path");
// variables
const outPath = path.join(__dirname);
const htmlPath = path.join(__dirname, "html");

// plugins
const HtmlWebpackPlugin = require("html-webpack-plugin");
const htmlTemplate = path.join(htmlPath, "index.html");

module.exports = {
		entry: ["babel-polyfill", path.join(__dirname, "scripts", "src", "index.tsx")],
		output: {
			path: outPath,
			filename: "[name].bundle.js",
			publicPath: "/"
		},
		module: {
			noParse: [/\.min\.js$/, /\.bundle\.js$/],
			rules: [
				{
					test: /\.tsx?$/,
					use: 'ts-loader',
					exclude: /node_modules/
				},
				{
					test: /\.styl$/,
					use: [
						"style-loader",
						"css-loader",
						"stylus-loader"
					]
				}, {
					test: /\.css$/,
					use: [
						"style-loader",
						"css-loader",
					]
				}]
		},
		resolve: {
			extensions: [".ts", ".tsx", ".js"],
			mainFields: ["module", "browser", "main"]
		},
		target: "web",
		plugins: [
			new HtmlWebpackPlugin({
				template: htmlTemplate,
			}),
		]
	};

webpack.prod.js

const path = require("path");
const webpack = require("webpack");
const merge = require('webpack-merge');
const CompressionPlugin = require('compression-webpack-plugin');

const common = require("./webpack.common.js");

module.exports = merge(common, {
	mode: "production",
	stats: {
		warnings: false
	},
	plugins: [],
	optimization: {
		minimize: false,
	}
});

Sort of relevant package.json segments:

"dependencies": {
		"@types/react": "^16.0.38",
		"@types/react-dom": "^16.0.4",
		"@types/react-swipeable-views": "^0.12.1",
		"babel-polyfill": "^6.26.0",
		"css-loader": "^0.28.9",
		"react": "^16.2.0",
		"react-dom": "^16.2.0",
		"react-swipeable-views": "^0.12.13",
		"style-loader": "^0.21.0",
		"tslint-eslint-rules": "^4.1.1",
		"webpack-config-utils": "^2.3.0"
	},
	"devDependencies": {
		"compression-webpack-plugin": "^1.1.11",
		"html-webpack-plugin": "^3.2.0",
		"npm-run-all": "^4.1.2",
		"rimraf": "^2.6.2",
		"run-s": "0.0.0",
		"stylus": "^0.54.5",
		"stylus-loader": "^3.0.2",
		"ts-loader": "^4.2.0",
		"tslint": "^5.9.1",
		"typescript": "^2.6.2",
		"webpack":  #"^4.8.3",
		"webpack-bundle-analyzer": "^2.11.0",
		"webpack-cli": "^2.1.2",
		"webpack-dev-server": "^3.1.4",
		"webpack-merge": "^4.1.2"
	},
	"scripts": {
		"clean": "rimraf scripts/bin",
		"transpile": "tsc -p scripts",
		"transpile-watch": "npm run transpile -- --watch",
		"serve": "webpack-dev-server --color  --config webpack.dev.js",
		"serve-public": "webpack-dev-server --no-info --colors --port 3330 --host 0.0.0.0  --config webpack.dev.js",
		"dev": "npm-run-all transpile -p transpile-watch serve",
		"bundle": "webpack --env.prod --progress --colors -p --config webpack.prod.js",
		"build": "run-s transpile bundle",
		"test": "echo \"Error: no tests defined\" && exit 1",
		"analyze": "webpack --profile --json  --config webpack.prod.js > stats.tmp.json; webpack-bundle-analyzer stats.tmp.json && rm stats.tmp.json"
	}

What is the expected behavior?
Production mode optimizations should be applied to the bundled code. When loading the bundle it should run without any module loading related error.

Other relevant information:
webpack version: 4.8.3
Node.js version: N/A
Operating System:
Additional tools:

Author: Fantashit

1 thought on “Webpack 4 production mode bundle throws an Uncaught ReferenceError: require is not defined

Comments are closed.