WebPack-Dev-Server error: require is not defined

Question

Webpack itself is working fine, but the webpack-dev-server is not. Basically, webpack created 2 build files for me, a back-end bundle and a front-end bundle. So, I have a webpack-config.js for each of these. I want to develop my front-end code with webpack-dev-server, as you can see from my webpack-config file for my front-end-bundle.js below. When I run web-pack-dev server, it is able to find and build my front-end.js and index.html, but nothing renders in the console and it gives me a "Uncaught ReferenceError: require is not defined"

// var nodeExternals = require('webpack-node-externals');
var webpack = require('webpack');

module.exports = {
entry: './browser/entry.js',
output: {
    path: './builds',
    filename: 'frontend.js'
},
plugins: [
    new webpack.DefinePlugin({
        'process.env.NODE_ENV': '"development"'
    }),
    new webpack.DefinePlugin({
        'process.env': {
            'NODE_ENV': '"development"'
        }
    })
],
module: {
    loaders: [
        {
            test: [/\.es6$/, /\.js$/, /\.jsx$/],
            exclude: 'node_modules',
            loader: 'babel-loader',
            query: {
                presets: ['react', 'es2015', 'stage-1']
            }
        }, 
        {
            test: /\.json$/,
            loader: 'json-loader'
        }, 
        {
            test: /\.html$/,
            loader: 'html-loader'
        }, 
    ]
},
resolve: {
    extensions: ['', '.js', '.es6', '.json'], 
    root: '/Users/johnhenry/Desktop/GAMR/gamr/browser'
}, 
devServer: {
    contentBase: 'builds/dev-build'
},
target: 'node',
// externals: [nodeExternals()]
}

The error is triggered by this in my front-end build (it is only in the dev server build, not in the non-dev-server webpack build):

function(module, exports) {

module.exports = require("url");

If anyone has insight into this, it would be much appreciated

score 14 · Answer 1 · answered Sep 21 '16 at 01:11

14

Try adding:

target: 'web'

to your module block.

answered Sep 21 '16 at 01:11

user1695975

161
5

2

For me, this throws *Can't resolve 'fs'*. The `node: { fs: "empty", }` suggestion throws *_fs2.default.readFileSync is not a function*. See [this](https://github.com/webpack-contrib/css-loader/issues/447). – Leo Jan 12 '18 at 14:22
I know I already upvoted, but this solved the "Require not defined" issue for me with `webpack-dev-middleware` also. Thanks! – Ben May 14 '18 at 00:13

score 3 · Answer 2 · edited Jun 20 '20 at 09:12

I had the same error and if anyone is still struggling with this, this solution also helped me:

... There are 2 ways to solve the issue:

1. (Recommended) Don't activate webpack-node-externals in your Webpack browser config, but let Webpack indeed bundle those modules when targeting the web (this is probable what you want to do)

Have the external modules loaded in some other way in the browser, and add the appropriate importType flag to the webpack-node-externals configuration (either var for scripts or amd for AMD)

more details here: https://github.com/liady/webpack-node-externals/issues/17#issuecomment-284222729

score 2 · Answer 3 · answered Aug 09 '18 at 14:47

I hit this issue when a webpack.config.js from a node app for the base of a react app.

I had the following:

target: 'web'

but still ran in to the same issue.

Removing reference to webpack-node-externals solved it, which does make sense when you think about what node-externals is actually doing.

Dheeraj Kumar · Answer 4 · 2018-03-28T12:36:10.800

0

I had below rule in my webpack.config.js

 rules: [
        {
            test: /\.js$/,
            use:['script-loader']
        }
    ]

Removing above rule from webpack.config.js removed the error.

Hope this helps.

edited Mar 28 '18 at 12:36

answered Mar 28 '18 at 12:24

Dheeraj Kumar

3,917
8
43
80

WebPack-Dev-Server error: require is not defined

4 Answers4

Linked