How To Fix ReferenceError require is not defined in JavaScript

When Node.js first came out in 2009, the dream of JavaScript everywhere finally became a reality for many JavaScript developers. Full-stack web developers can effectively use the same programming language for both their front and back end work which is huge for developer efficiency and the developer experience overall.

Tech stacks such as MEAN and MERN have further increased the popularity of using JavaScript literally everywhere. While writing your JavaScript code in the frontend is very similar to the backend, there are subtle differences that can create problems. One such problem is receiving the ReferenceError: require is not defined exception.

The Problem

While overwhelmingly similar, client-side and server-side JavaScript does have its differences. Most of these differences stem from the innovation needed to allow JavaScript to run in a non-browser environment. In Node.js, require is a function that is available to use JavaScript modules elsewhere. The syntax for using require is defined by the CommonJS specification which you can learn more about here. By contrast, client-side JavaScript supports the ES6+ specification for using modules via import and export.

The Solution

Your ReferenceError: require is not defined likely has one of two causes:

1. You tried using require in a browser environment
2. You are in a Node.js environment but your project has "type": "module" in its package.json

Let’s go over solutions for each possible cause.

You tried using require in a browser environment

Using require is not supported by JavaScript in the browser so you will need to replace it or find a way to make that work such as using Browserify. The choice is ultimately yours but the most simple solution is to just use the ES6 module syntax instead of require. What’s the difference? In the ES6 syntax you use import rather than require and you use export in the module itself. For example let’s say you have some code setup similar to this:

// math.js
function add(a, b) {
  return a + b;
}

// named export
module.exports = {
  add,
};

// subtract.js
function subtract(a, b) {
  return a - b;
}

// default export
module.exports = subtract;

// main.js
const { add } = require("./math"); // named import
const subtract = require("./subtract"); // default import

console.log(add(1, 2));
console.log(subtract(1, 2));Code language: JavaScript (javascript)

Here is that same example using ES6 import and export module syntax:

// math.js
// named export
export function add(a, b) {
  return a + b;
}

// subtract.js
function subtract(a, b) {
  return a - b;
}

// default export
export default subtract;

// main.js
import { add } from "./math"; // named import
import subtract from "./subtract"; // default import

console.log(add(1, 2));
console.log(subtract(1, 2));Code language: JavaScript (javascript)

It should be noted that in both examples, you can name the default import anything you want. In this case, that means you could use the subtract function import like this to the same effect:

// main.js
import foo from "./subtract";

console.log(foo(1, 2));Code language: JavaScript (javascript)

Additionally, in the subtract.js module above, you can use export default on anonymous functions as well:

// subtract.js
export default function (a, b) {
  return a - b;
}Code language: JavaScript (javascript)

You are using require in a Node.js environment

In this case, check your package.json file for an property called type. If that is set to module, ES6 modules will be enabled and you will run into the error mentioned above (specifically ReferenceError: require is not defined in ES module scope, you can use import instead). Simply remove that entry and you will be able to use require.

Conclusion

To recap, require is a keyword that is only supported in a Node.js environment using the CommonJS module syntax. In browser environments, modules use ES6 syntax with import and export. There are workarounds for each scenario but the simplest approach is to stick to the syntax that is supported in the environment you are currently using. Now that you have your modules set up accordingly, you can get back to enjoying JavaScript everywhere.