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.

Krunal

Krunal Lathiya is a seasoned Computer Science expert with over eight years in the tech industry. He boasts deep knowledge in Data Science and Machine Learning. Versed in Python, JavaScript, PHP, R, and Golang. Skilled in frameworks like Angular and React and platforms such as Node.js. His expertise spans both front-end and back-end development. His proficiency in the Python language stands as a testament to his versatility and commitment to the craft.