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-22 15:05:54Z

47

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, 2017 at 15:05

answered Aug 22, 2017 at 14:20

Maxim Kuzmin

2,63421 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

vijay Over a year ago

i am using babel-preset-envinstead 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

Maxim Kuzmin Over a year ago

@vijay see my updated answer. I reproduced ypur config and it is working as expected without nodeExternals.

Yan Yankowski Over a year ago

I just had the exact same problem and had indeed nodeExternals() placed inside the config targeting web.

OtaconKiko Over a year ago

damn I lost 1 hour because I forgot that after cloning webpack config from a Node Typescript project 😂

Aman Jha Over a year ago

Yes totally agree, since it will exclude built in method, file, require and path that's the reason, we should not use nodeExternals() package

shoop · Accepted Answer · 2021-08-19 17:42:22Z

12

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, 2021 at 17:42

shoop

4867 silver badges14 bronze badges

1 Comment

The Dead Man Over a year ago

very good haloooo

Khalil · Accepted Answer · 2022-02-09 18:53:37Z

7

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',
   ...
}

answered Feb 9, 2022 at 18:53

Khalil

3313 silver badges11 bronze badges

Comments

cs95 · Accepted Answer · 2018-12-14 12:49:55Z

6

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

nodeExternals({
   importType: 'umd'
})

edited Dec 14, 2018 at 12:49

cs95

406k106 gold badges744 silver badges797 bronze badges

answered Dec 14, 2018 at 11:16

Hovorun Art

611 silver badge1 bronze badge

Comments

Manuco Bianco · Accepted Answer · 2018-09-28 22:10:21Z

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

guilherme · Accepted Answer · 2020-07-01 19:58:30Z

-1

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

answered Jul 1, 2020 at 19:58

guilherme

1

Collectives™ on Stack Overflow

webpack : Uncaught ReferenceError: require is not defined

`babel-preset-env`

6 Answers 6

5 Comments

1 Comment

Comments

Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

babel-preset-env

6 Answers 6

5 Comments

1 Comment

Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related

`babel-preset-env`