webpack : Uncaught ReferenceError: require is not defined

webpack externals
uncaught referenceerror: require is not defined react
webpack-node-externals
referenceerror: require is not defined nodejs
uncaught referenceerror: require is not defined axios
jest referenceerror: require is not defined
webpack target
angularjs referenceerror: require is not defined

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

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.

Uncaught ReferenceError: require is not defined · Issue #17 · liady , When I add this to my commonconfig in webpack, it throws this error. I can't understand why is it occurring or how to solve this. Any help will be It will typically be the value of the entry: key in the WebPack config with -bundle appended. If you’re not doing explicit chunking, your entry chunk should be both an initial and entry chunk and have the WebPack runtime in it. The WebPack runtime contains and loads the require function before your code runs.

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

nodeExternals({
   importType: 'umd'
})

When I run the dev server, I got an error 'Uncaught ReferenceError , I have just started to study Webpack and trying to setup development environment Uncaught ReferenceError: require is not defined at eval (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)

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.

Getting started with Webpack, If you open this file in your browser, you get an error: “Uncaught ReferenceError: require is not defined”. We haven't used Webpack yet, so this webpack_require. I am using Babel with Angular2 and Webpack. Whenever I use the webpack-server to develop the bundles are created and rendered fine. When try to build the bundle to be used in my .Net mvc application I get the following arrow when the page loads. Uncaught ReferenceError: __webpack_require__ is not defined. Webpack config

"Uncaught ReferenceError: require is not defined" when , Ok I found something that helped Graphql-js uses .mjs as file extension which caused issues with the webpack build Adding to my webpack rules helped. So why do we need to assign the library to a variable and then expose it on window?I thought jQuery does that for us? It does, but only if module.exports is undefined. If module.exports is defined -- which it will be with our webpack import -- module.exports = jQuery.

Client on node: Uncaught ReferenceError: require is not defined , Client on node: Uncaught ReferenceError: require is not defined. So, I am writing an Webpack - Does everything (bundles JS, CSS, etc). Made popular by the Fix Uncaught ReferenceError: videojs is not defined … Verified This commit was created on GitHub.com and signed with a verified signature using GitHub’s key.

Uncaught ReferenceError: require is not defined webpack with , telegram-mt-node, telegram-tl-node) inside webpack on a client web app. currently I am getting this error: Uncaught ReferenceError: require is not defined the Dismiss Track tasks and feature requests. Join 40 million developers who use GitHub issues to help identify, assign, and keep track of the features and bug fixes your projects need.

Comments

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
@vijay see my updated answer. I reproduced ypur config and it is working as expected without nodeExternals.
What is the reason for a downvote ?
This helped me a lot. Thank you sir.
i am already using babel-preset-env.you can see in .babelrc