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");

Solution 1

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.

Solution 2

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

Solution 3

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

nodeExternals({
   importType: 'umd'
})

Solution 4

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.

Solution 5

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

View more solutions