Client on Node.Js: Uncaught Referenceerror: Require Is Not Defined

Client on Node.js: Uncaught ReferenceError: require is not defined

This is because require() does not exist in the browser/client-side JavaScript.

Now you're going to have to make some choices about your client-side JavaScript script management.

You have three options:

1. Use the <script> tag.
2. Use a CommonJS implementation. It has synchronous dependencies like Node.js
3. Use an asynchronous module definition (AMD) implementation.

CommonJS client side-implementations include (most of them require a build step before you deploy):

1. Browserify - You can use most Node.js modules in the browser. This is my personal favorite.
2. Webpack - Does everything (bundles JavaScript code, CSS, etc.). It was made popular by the surge of React, but it is notorious for its difficult learning curve.
3. Rollup - a new contender. It leverages ES6 modules and includes tree-shaking abilities (removes unused code).

You can read more about my comparison of Browserify vs (deprecated) Component.

AMD implementations include:

1. RequireJS - Very popular amongst client-side JavaScript developers. It is not my taste because of its asynchronous nature.

Note, in your search for choosing which one to go with, you'll read about Bower. Bower is only for package dependencies and is unopinionated on module definitions like CommonJS and AMD.

Uncaught ReferenceError: require is not defined in nodeJs

You need to run your Node.js code using Node.js.

Linking to it with a <script> element and trying to run it using a web browser won't work. Web browsers are not Node.js.

Web browsers do not have features to support running servers. Web browsers do not support CommonJS modules. Web browsers do not support Node.js style module resolution where they search a node_modules directory when you import from a name instead of a URL.

You need to use Node.js.

Javascript require() function giving ReferenceError: require is not defined

RequireJS is a JavaScript file and module loader. It is optimized for
in-browser use, but it can be used in other JavaScript environments,
like Rhino and Node. Using a modular script loader like RequireJS will
improve the speed and quality of your code.

IE 6+ .......... compatible ✔
Firefox 2+ ..... compatible ✔
Safari 3.2+ .... compatible ✔
Chrome 3+ ...... compatible ✔
Opera 10+ ...... compatible ✔

http://requirejs.org/docs/download.html

Add this to your project: https://requirejs.org/docs/release/2.3.5/minified/require.js

and take a look at this http://requirejs.org/docs/api.html

require is not defined? Node.js

In the terminal, you are running the node application and it is running your script. That is a very different execution environment than directly running your script in the browser. While the Javascript language is largely the same (both V8 if you're running the Chrome browser), the rest of the execution environment such as libraries available are not the same.

node.js is a server-side Javascript execution environment that combines the V8 Javascript engine with a bunch of server-side libraries. require() is one such feature that node.js adds to the environment. So, when you run node in the terminal, you are running an environment that contains require().

require() is not a feature that is built into the browser. That is a specific feature of node.js, not of a browser. So, when you try to have the browser run your script, it does not have require().

There are ways to run some forms of node.js code in a browser (but not all). For example, you can get browser substitutes for require() that work similarly (though not identically).

But, you won't be running a web server in your browser as that is not something the browser has the capability to do.

---

You may be interested in browserify which lets you use node-style modules in a browser using require() statements.

Webpack 5 error - Uncaught ReferenceError: require is not defined

I solved the issues after looking at my webpack config file, after adding source maps to the config:

  devtool: 'inline-source-map',

I noticed something weird when I looked at the error again in DevTools, it showed fs, events and other folders outside of the file structure which lead me to question this line of code within the config:

  externalsPresets: { node: true },

According to the documentation, the description is

Treat node.js built-in modules like fs, path or vm as external and load them via require() when used.

So I removed that and got more errors which lead me to resolving the issue by adding the following fallback:

  resolve: {
    extensions: ['*', '.js', '.jsx', '.tsx', '.ts'],
    alias: {
      '~': path.resolve(__dirname, '../src'),
      handlebars: 'handlebars/dist/handlebars.min.js',
    },
    fallback: {
      fs: false,
      tls: false,
      net: false,
      path: false,
      zlib: false,
      http: false,
      https: false,
      stream: false,
      crypto: false,
      assert: false,
    },

---

Related Topics