Skip to main content

How to Solve the "ReferenceError: require is not defined" Error in JavaScript

The ReferenceError: require is not defined is a common error that occurs when you try to use the CommonJS require() syntax in an environment that is expecting ES Module (import/export) syntax. This can happen in two main contexts: the browser and a modern Node.js project.

This guide will explain why this error occurs in both environments and show you the correct, modern solutions for modularizing your code.

The Core Problem: CommonJS vs. ES Modules

JavaScript has two primary module systems:

  • CommonJS (CJS): This is the classic module system for Node.js. It uses the require() function to import modules and module.exports to export them. It is not supported natively by web browsers.
  • ES Modules (ESM): This is the modern, standardized module system for JavaScript. It uses the import and export keywords and is supported by all modern browsers and recent versions of Node.js.

The require function is a global variable that only exists in a CommonJS environment. When your code is running in an ES Module context, require is not defined, which causes the ReferenceError.

Scenario 1: The Error Occurs in the Browser

This is the most common cause of the error. You are trying to use a Node.js-specific function (require) in a front-end script that is running in a web browser.

Example of problem:

// my-script.js (intended for a browser)

// ⛔️ ReferenceError: require is not defined
// The browser does not have a `require` function.
const moment = require('moment');

console.log(moment().format());

The solution is to use the modern ES Module import syntax, which is the standard for browsers.

another-file.js:

// Use `export` to make members available to other files.
export function greet(name) {
return `Hello, ${name}`;
}

export const PI = 3.14;

main.js:

// Use `import` to consume the exported members.
import { greet, PI } from './another-file.js';

console.log(greet('World')); // Output: Hello, World
console.log(PI); // Output: 3.14

To make this work in an HTML file, you must add type="module" to your <script> tag.

<script type="module" src="main.js"></script>

Scenario 2: The Error Occurs in Node.js

This error occurs in Node.js when your project is configured to use ES Modules, but a file is still using the older CommonJS require() syntax.

Problem: your package.json file contains "type": "module", which tells Node.js to treat all .js files as ES Modules.

// package.json
{
"name": "my-project",
"type": "module"
}

Now, a file using require() will fail.

// index.js

// ⛔️ ReferenceError: require is not defined in ES module scope
const fs = require('fs');

Solution: There are two ways to fix this, depending on your goal:

1. Switch to ES Module Syntax (Recommended): This is the modern and recommended approach. Convert your require calls to import.

// ✅ Correct: Use the `import` syntax.
import fs from 'fs';

console.log(fs.readFileSync('./package.json', 'utf8'));

2. Switch Back to CommonJS: If you want to continue using require, you must tell Node.js to treat your project as CommonJS.

  • Remove "type": "module" from your package.json file.
  • Alternatively, if you want to keep your project as ESM but have a specific file use CommonJS, you can rename that file with a .cjs extension (e.g., my-script.cjs).

How to Enable ES Modules in Your Project

To ensure you can use the import/export syntax consistently:

  • In Node.js: Add "type": "module" to your package.json.
  • In the Browser: Add type="module" to your <script> tags in your HTML.

Conclusion

The ReferenceError: require is not defined is a clear signal that you are mixing JavaScript module systems.

  • If you are in the browser, you must use the import/export syntax and include your scripts with <script type="module">.
  • If you are in Node.js, the error means your project is in ES Module mode. You should either:
    • Consistently use import/export across your project (recommended).
    • Or, remove "type": "module" from your package.json to revert to the CommonJS (require) system.

By understanding the difference between these two module systems and using one of them consistently, you can easily resolve this error.