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

Question

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 below.
# package.json
"scripts": {
"dev": "webpack-dev-server --mode development",
}
However, there was an error message like below 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 below.
# 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 below.
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?

Answer 1

I think you have a problem in your config file. I ran a sample with this and it worked:
const nodeExternals = require('webpack-node-externals')
module.exports = {
target: 'web',
externals: [nodeExternals()],
devServer: {
host: 'localhost',
port: 3000,
open: true,
},
}