Webpack: Uncaught ReferenceError: require is not defined

uncaught referenceerror: require is not defined react
cypress uncaught referenceerror: require is not defined
axios = require is not defined
firebase require is not defined
require is not defined react native
webpack externals
vue js require is not defined
webpack target

In my PHP project - I am trying to build my js files using webpack and babel. There are 3 js files - config.js helper.js script.js. They have dependency on each other. helper.js is dependent on config.js and script.js is dependent on helper.js.

config.js:

module.exports = {
  const DG_GRAPH_TYPE = 'line';

  const DG_XAXIS_TICKS = 4;

  const DG_SINGLE_POST_GRAPH_CANVAS_HEIGHT = 250;
  ......



helper.js:

const config = require('./config');

module.exports = {
......



script.js:

const helper = require('./helper');

jQuery(document).ready(function ($) {
......

Here is my wepack.config.js file where I configured with following code:

const path = require('path');

module.exports = {
    entry: {
        script: [
            './assets/js/script.js'
        ]
    },
    output: {
        filename: '[name].bundle.min.js',
        path: path.resolve(__dirname, 'build'),
    },
    resolve: {
        extensions: ['.js', '.css']
    },
    module: {
        rules: [
            {
                test: /\.js/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['@babel/preset-env'],
                        plugins: [require('@babel/plugin-proposal-object-rest-spread')]
                    }
                },
                parser: {
          amd: false, // disable AMD
          commonjs: false, // disable CommonJS
          system: false, // disable SystemJS
          harmony: true, // disable ES2015 Harmony import/export
          requireInclude: false, // disable require.include
          requireEnsure: false, // disable require.ensure
          requireContext: false, // disable require.context
          browserify: true, // disable special handling of Browserify bundles
          requireJs: true, // disable requirejs.*
          node: false, // disable __dirname, __filename, module, require.extensions, require.main, etc.
        }
            }
        ],
    }
};

Everything works fine except when I add the built script file within project, I get following browser console error -

Uncaught ReferenceError: require is not defined at Object. (script.bundle.min.js?ver=4.9.8:1) at a (script.bundle.min.js?ver=4.9.8:1) at Object. (script.bundle.min.js?ver=4.9.8:1) at a (script.bundle.min.js?ver=4.9.8:1) at script.bundle.min.js?ver=4.9.8:1 at script.bundle.min.js?ver=4.9.8:1

What I was expecting require.js should solve the issue. But it doesn't.

Can you please suggest me the appropriate way to solve the issue?

EDIT

The main concept of the work is just to build multiple js files in one place also adding babel to make it browser friendly if I have to add ES6/ES7.

My main js file is script.js which its has two dependencies config.js and helper.js. So, I was to build only script.js where I wanted to import/require dependencies file there.

At first I tried to entry all js files, but all I got script.js was built not others. -

entry: {
        script: [
            './assets/js/config.js'
            './assets/js/helper.js'
            './assets/js/script.js'
        ]
    },

Here is the package.json -

{
  "name": "GRAPH",
  "version": "1.0.0",
  "description": "Graph plugin",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack"
  },
  "author": "ABC",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.1.0",
    "@babel/polyfill": "^7.0.0",
    "@babel/preset-env": "^7.1.0",
    "babel-loader": "^8.0.4",
    "jquery": "^3.3.1",
    "mini-css-extract-plugin": "^0.4.3",
    "requirejs": "^2.3.6",
    "webpack": "^4.20.2",
    "webpack-cli": "^3.1.1",
    "webpack-dev-server": "^3.1.9"
  }
}

Also, yes. I was adding the built js file in <script> tag.

END EDIT

Thanks in advance!

You need to build the bundle first to make it understandable to the browser. The error require is not defined gives you the hint that you are not in an node environment (it was not called by something like node runthiscurrentprogram.js or by a program that runs node for you. Read more about the output format with require here

Webpack is a bundler that runs in node that can bundle and/or transform source files (could be javascript, css, etc.) and places them where you want. The bundles file can be included in a <script> tag to make it understandable to the browser.

To run webpack either run npm run build (because you have a script named build in your package.json scripts or npx webpack (more about npx here). What this does is call the webpack executable in /path_to_your_project/node_modules/.bin/webpack. If you open that file, you will see it is run in node (it starts with #!/usr/bin/env node)

Now you mention that your main file is script.js which "requires" those other files. In that case you only have to put script.js in the webpack entry. Webpack automatically bundles the required files in the bundle. All the code will be out put in your outputPath in a single file. (There are ways/reasons to have multiple entries, but not in your case I guess, read more here).

So run npm run webpack , npx webpack and look at the output path if there's a new file there and include that file in the <script> tag.

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.

The require function does not exist in browsers, only in Node environments. Take a look at this.

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  What is the current behavior? Thrown the error Uncaught ReferenceError: require is not defined. If the current behavior is a bug, please provide the steps to reproduce.

I arrived to the same error but, instead of using webpack I used gulp. Babel transpiled ES6 to ES5 but it failed to comply with import and required statements. In short, gulp-bro library saved my day. You can find step by step instructions in this answare.

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  (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)

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

"Uncaught ReferenceError: require is not defined" when , Solvedamplify js aws-amplify 0.3.0: "Uncaught ReferenceError: require is not defined" when packaged with webpack. react · cloud-service. 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.

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  without const getting an error: VM1842:4 Uncaught ReferenceError: exports is not defined – Pavel Babin Jul 6 '16 at 8:42. definitely, because its not copy paste code, you should setup webpack to support es6 – webdeb Jul 6 '16 at 8:42. To get it up and running take a simple boilerplate, and check out what its doing

Comments
  • How are you "building"? . It looks like you are just including the script in the browser's <script> tag. require only works in a node environment. After the build process, the transformed javascript will be understood by the browser. If you edit your answer to include what buildsteps you are running, I could look into it more. also, are there any scripts in your package.json?
  • @axm__ Thanks for your comment. I updated my question.
  • Your package.json mentions { build: webpack }. Did you actually run npm run build to run the command? If not, could you do so before I try to answer the question and tell me what the output is. The command should output the built file to the output path you mentioned in webpack.config.json . To read more about npm scripts: michael-kuehnel.de/tooling/2018/03/22/…
  • @axm__ yes, I built the output js file using npm run build. When I add the output js file and add it to <script> tag in browser console I get the error require is undefined.
  • Ok, that is weird. How does your output file look like? Can you see if there is any transform at all?
  • The problem is script.js file can't require other two files. That's why in console I get the error. So, what is the appropriate way to require other two js within script.js?