webpack : Uncaught ReferenceError: require is not defined

Question

This error comes when in webpack target = node but i have done target=web(default)

also i am not loading reactjs externally

this error comes on loading app in browser

what i am doing wrong ?

In Console

File

webpack.config.js

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

const config = {
    target: 'web',
    externals: [nodeExternals()],
    entry: './src/index.js',
    output: {
        filename: '[name].bundle.js',
        path: __dirname + '/build'
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                loader: 'babel-loader',
                exclude: /node_modules/
            },
            {
                test: /\.css$/,
                use: ExtractTextPlugin.extract({
                    fallback: "style-loader",
                    use: "css-loader"
                })
            },
            {
                test: /\.(png|svg|jpe?g|gif)$/,
                use: [{
                        loader: 'file-loader',
                        options: {
                            name: '[path][name].[ext]'
                        }
                    }
                ]
            },
            {
                test: /\.(woff|woff2|eot|ttf|otf)$/,
                use: ['file-loader']
            }
        ]
    },
    devtool: 'inline-source-map',
    plugins: [
        new HtmlWebpackPlugin({
            title: 'Instarem.com'
        })
    ]
};

module.exports = config;

.babelrc using

`babel-preset-env`

{
    "presets": [
        "react",
        [
            "env",
            {
                "targets": {
                    "browsers": ["last 2 versions"]
                },
                "debug": true,
                "modules": "commonjs"
            }
        ]
    ],
    "plugins": [
        "transform-object-rest-spread",
        "transform-class-properties"
    ]
}

thanks :)

I found Clue

In facebook's create react app generator bundle it shows

module.exports = __webpack_require__(/*! ./lib/React */ "./node_modules/react/lib/React.js");

but in my case it shows only

module.exports = require("react");

Maxim Kuzmin · Accepted Answer · 2017-08-22T15:05:54.780

45

You should not use

externals: [nodeExternals()],

in web app. According to https://github.com/liady/webpack-node-externals it is only for backend. Since you use nodeExternals in web app you get CommonJS modules, that expects built in node require function. So just remove it to fix error.

edited Aug 22 '17 at 15:05

answered Aug 22 '17 at 14:20

Maxim Kuzmin

2,574
19
24

i am using `babel-preset-env`instead of `babel-preset-es2015` both almost do same thing .just `babel-preset-env` does little bit more .so at a time only one should be used – vijay Aug 22 '17 at 14:45
@vijay see my updated answer. I reproduced ypur config and it is working as expected without `nodeExternals`. – Maxim Kuzmin Aug 22 '17 at 15:06
I just had the exact same problem and had indeed nodeExternals() placed inside the config targeting web. – Yan Yankowski Aug 24 '20 at 08:02
damn I lost 1 hour because I forgot that after cloning webpack config from a Node Typescript project – OtaconKiko May 31 '22 at 11:13

score 9 · Answer 2 · answered Aug 19 '21 at 17:42

9

My issue was in my package.json, I had to remove

"type":"module"

It was trying to load the file as an es6 module

https://nodejs.org/api/packages.html#packages_type

answered Aug 19 '21 at 17:42

shoop

285
3
11

very good haloooo – The Dead Man Oct 04 '21 at 14:22

score 7 · Answer 3 · answered Feb 09 '22 at 18:53

I encountered this problem a few minutes ago. This usually happens when you mix up the target property for the bundle in webpack.config file. E.g. if you are creating a bundle for React the target should be target: 'web' and should not include anything relating to node like 'async-node' or 'node'.

const reactConfig = {
   name: 'React Bundle',
   target: 'web',
   ...
}

score 6 · Answer 4 · edited Dec 14 '18 at 12:49

6

Maybe it will be helpful for someone. Add into call nodeExternals option importType with value 'umd'.

nodeExternals({
   importType: 'umd'
})

edited Dec 14 '18 at 12:49

cs95

379,657
97
704
746

answered Dec 14 '18 at 11:16

Hovorun Art

61
1
1

This helped me a lot. Thank you sir. – Efe Özazar Apr 29 '20 at 09:43

score 2 · Answer 5 · edited Sep 28 '18 at 22:10

I set this config up (minus the extraneous things that seem to be specific to your env) locally and it worked.

package.json

{
  "name": "test-webpack",
  "version": "1.0.0",
  "description": "",
  "main": "webpack.config.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.2",
    "babel-preset-env": "^1.6.0",
    "babel-preset-react": "^6.24.1",
    "webpack": "^3.5.5"
  },
  "dependencies": {
    "react": "^15.6.1",
    "react-dom": "^15.6.1"
  }
}

.babelrc

{
  "presets": [
    "react",
    [
      "env",
      {
        "targets": {
          "browsers": ["last 2 versions"]
        },
        "debug": true,
        "modules": "commonjs"
      }
    ]
  ]
}

webpack.config.js

const config = {
  target: 'web',
  entry: './index.js',
  output: {
    filename: '[name].bundle.js',
    path: __dirname + '/build',
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        loader: 'babel-loader',
        exclude: /node_modules/,
      },
    ],
  },
};
module.exports = config;

index.js

import React from 'react';
import ReactDOM from 'react-dom';
ReactDOM.render(<div>Hello</div>, document.getElementById('root'));

index.html

<body>
    <div id="root" />
    <script src=" ./build/main.bundle.js "></script>
</body>

Running npm start built the bundle and running index.html ran the react app.

i am already using `babel-preset-env`.you can see in .babelrc — vijay, Aug 22 '17 at 14:25

score -1 · Answer 6 · answered Jul 01 '20 at 19:58

-1

If you are using webpack and HtmlWebpackPlugin, try to remove <script src="./src/app.js"></script> from index.html

answered Jul 01 '20 at 19:58

guilherme

1

webpack : Uncaught ReferenceError: require is not defined

`babel-preset-env`

6 Answers6

Linked