How to Fix ReferenceError: require is not defined in JavaScript

ReferenceError: require is not defined error typically occurs if the “JavaScript require method is used but is not available in the current context.”

The require() function is specific to the CommonJS module system, predominantly used in Node.js.

When you attempt to use require in an environment that doesn’t support it, such as a standard web browser or another JavaScript runtime that doesn’t implement CommonJS, you’ll encounter the “ReferenceError: require is not defined” error.

Common scenarios

Web browser environment

Web browsers do not natively support the require() function from the CommonJS module system. Instead, they use the ES6 module system, which uses import and export for module management.

Non-Node.js environment

Other JavaScript environments, like those embedded in specific desktop applications or other platforms, may not support the CommonJS module system. If they do support module systems, it might be different, like ES6 modules or something proprietary.

For these environments, developers would need to ensure that the code is compatible by avoiding require() or using some intermediary tool or library that provides similar functionality.

Reproduce the error

const fs = require('fs');

Output

Uncaught ReferenceError: require is not defined

How to fix the ReferenceError: require is not defined

Web browser environment

The <script> tags: This is the traditional way to include external JavaScript files in web pages. If your dependencies are available as standalone scripts, you can include them using <script> tags.

<script src="path_to_dependency.js"></script>

Module loaders

Tools like RequireJS or SystemJS can help manage and load modules in the browser. These loaders have their syntax and methodology for defining and loading modules.

RequireJS: It uses the AMD (Asynchronous Module Definition) format. With RequireJS, you can asynchronously load JavaScript files as needed.

require(["dependency"], function(dependency) {
  // Use the loaded dependency here
});

Bundlers: Tools like Webpack or Parcel allow you to write modular JavaScript (using require() or ES6 import/export), which they then bundle into browser-compatible scripts. This approach is prevalent in modern web development.

Non-Node.js environment

The method to load external dependencies in non-Node.js environments will vary based on the specific environment.

Some might support ES6 modules using import/export, while others might have their proprietary system.

It’s essential to refer to the documentation or guidelines for the specific environment to understand how to load and manage external dependencies correctly.

1 thought on “How to Fix ReferenceError: require is not defined in JavaScript”

  1. I am coding in electron.js a small application, which has several windows for different HTML, which must communicate with each other. I need to code in each HTML, the following instruction, wrapped in a “script” tag:

    const { ipcRenderer } = require(‘electron’)

    ..and I get the error: “Uncaught ReferenceError: require is not defined”.

    The require() instructions inside the main program (index.js), work fine. It only fails in the given situation.

    I would be very grateful for your help, since I have searched all the documentation that exists and I have not been able to solve the problem or progress with the application.

Comments are closed.