CODEWITHSUNDEEP
node.jswebpackwebpack-dev-server
Lorentz9
Lorentz9

Reputation: 131

WebPack-Dev-Server error: require is not defined

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

Upvotes: 12

Views: 14011

Answers (4)

Liam
Liam

Reputation: 713

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.

Upvotes: 2

Dheeraj Kumar
Dheeraj Kumar

Reputation: 4175

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.

Upvotes: 0

Claudia Dávila
Claudia Dávila

Reputation: 31

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)

  1. 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

Upvotes: 3

user1695975
user1695975

Reputation: 171

Try adding: 

target: 'web'

to your module block.

Upvotes: 14

Related Questions