When I run the dev server, I got an error 'Uncaught ReferenceError: require is not defined' in external "url".

[hapumee]

I have just started to study Webpack and trying to setup development environment based on Webpack4.

I put one script for executing dev server in package.json like bellow.

# package.json

	"scripts": {
		"dev": "webpack-dev-server --mode development",
	}

However, there was an error message like bellow when I execute 'npm run dev' on my terminal.

ERROR in ./node_modules/destroy/index.js
Module not found: Error: Can't resolve 'fs' in 'D:\webpack-setup\node_modules\destroy'
 @ ./node_modules/destroy/index.js 14:17-30

So, I installed 'webpack-node-externals' and put configuration in 'webpack.config.js' like bellow.

# install webpack-node-externals module

	# npm install --save-dev webpack-node-externals

# webpack.config.js

    const nodeExternals = require('webpack-node-externals');

	module.exports = {
		target: 'web',
		externals: [nodeExternals()]
		devServer: {
			host: 'localhost',
			port: 3000,
			open: true
		}
	};

When a browser was opened, there was an error on a browser like bellow.

Uncaught ReferenceError: require is not defined
    at eval (external_"url":1)
    at Object.url (main.js:289)
    at __webpack_require__ (main.js:20)
    at Object.eval (webpack:///(:3000/webpack)-dev-server/client?:6:11)
    at eval (webpack:///(:3000/webpack)-dev-server/client?:249:30)
    at Object../node_modules/webpack-dev-server/client/index.js?http://localhost:3000 (main.js:97)
    at __webpack_require__ (main.js:20)
    at eval (webpack:///multi_(:3000/webpack)-dev-server/client?:1:1)
    at Object.0 (main.js:190)
    at __webpack_require__ (main.js:20)

I'm not sure this error is related to 'webpack-node-externals' module or not,
but could I get some guide for solving this situation?

[inspectordanno]

I got that error as well when I added webpack-node-externals. Subsequently removed it and the error is gone. Something weird is going on.

[inspectordanno]

Ah I found the answer. This tool is not meant for projects that run in the browser.

#17

[philmirez]

@inspectordanno I don't see this confirmed with the author (@liady).

I found out that externals: [nodeExternals()] is compatible with mode: 'production' and target: 'web'.

So, why not just exclude the mode property from your webpack config and leave it as its default (production)?

Excluding externals: [nodeExternals()] may result in a larger bundle size.

[philmirez]

Ugh, I guess it was confirmed by the author in #17