How to fix “require is not defined” in JavaScript / Node.js?

When working on a programming project, it’s simple to hit some bumps in the process. There are instances when no amount of Google searches seem to be able to solve the issue. “require-is-not-defined” kinds of problems can be especially annoying if you’re new to coding or JavaScript in general.

It is not uncommon to run into errors like “ReferenceError: require is not defined” when learning how to code or develop projects. This post will explain the meaning of that annoying error message and how to fix it for good.

What is ReferenceError?

We need to understand how errors work in JavaScript in order to understand ReferenceError. In JavaScript, there are two different kinds of errors apart from the errors in logic: syntax errors and runtime errors(commonly known as exceptions).

Syntax errors occur at compile time when it detects an incorrect statement. In our case, however, ReferenceError is a runtime error. When a program encounters an error even though the syntax is correct, it is a runtime error. Depending on the kind of issue the program encounters, there can be several kinds of runtime errors, and ReferenceError is one of them.

The type of exception that your program encountered (in this case, ReferenceError) is shown in the output along with the error message whenever one occurs. In our case, the error message is “require is not defined” which indicates the problem is with the variable or method named “require”. When a variable that isn’t present (or hasn’t been initialized) in the current scope is referred to, this error happens.

When does this error occur?

This error can occur when using JavaScript in both browsers and in Node.js. Here are the 3 main scenarios where you might see this error happening,

When using the require() method in a browser context.
When using the Node.js require() method, with the type set to “module” in the package.json file.
When using the .mjs file extension and the require() function in Node.js.

The solution

When getting the error in a browser environment

You are getting the “ReferenceError: require is not defined” error in the browser environment because the require() method is supported in browsers. This often happens to developers shifting from a Node.js environment to a browser one.

You can make use of the ES6 module import and export syntax to resolve this error. The browser does not support the Node-specific require() function.

If you want to use ES6 module import and export, you need to first set the type of scripts to “module” in the HTML file where you link your JavaScript files.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
  </head>

  <body>
    <!-- HTML body goes here  -->

    <!-- Notice how I've set type="module" -->
    <script type="module" src="script1.js"></script>
    <script type="module" src="script2.js"></script>
  </body>
</html>
Code language: HTML, XML (xml)

Now we can use the ES6 imports/exports syntax in the script1.js and script2.js files.

For example, script1.js might look like this,

// Default export
export default function foo(a) {
  return a * a;
}

// Named export
export const PI = 3.14;
Code language: JavaScript (javascript)

Now our other file script2.js can use these default and named exports. One thing to note here is that 1 file can only have 1 default export, but you can have as many named export as you’d like.

Our script2.js may look something like this,

// import the exports
import foo, {PI} from './script1.js';

// use the imported stuff
console.log(foo(PI));
Code language: JavaScript (javascript)

You can read more about using ES6 modules in the MDN docs.

Alternatively, if you do not want to use modules you can put the script for the script1.js file above the script script2.js, in which case script2.js will have access to the function and variable from script1.js without having to export and import them.

When getting the error in Node.js

If you are getting the “ReferenceError: require is not defined” or “require-is-not-defined” error in Node.js, you probably either have set the type property to module in your package.json file or you are using the require() function in the files that have a .mjs file extension.

If your package.json file’s “type” property is set to “module”, remove it to resolve “require-is-not-defined” error. You should also rename any files with a .mjs extension to .js.

// package.json
{
  // ...
  // You should REMOVE the below line if you want to use require()
  "type": "module",
  // ... 
}
Code language: JSON / JSON with Comments (json)

One important thing to note here is that if you are using ES6 modules in some other parts of your Node project then you should either continue using that instead of require() or you should change all your ES6 modules so that they instead use require().

The require() function and the import/export syntax for ES6 modules cannot be combined within a single project. One or the other must be used consistently.

Conclusion

The first thing you should do when you encounter an error is to Google it. There’s a possibility that another programmer has previously run into this problem and solved it! You can start attempting to determine what caused the mistake and how to fix it after making sure that it isn’t being brought on by a computer issue. These errors could at first look very perplexing if you are new to coding. You’ll be able to swiftly and simply solve them, though, with a little effort and persistence! I hope this article has helped you fix the “ReferenceError: require is not defined” or “require-is-not-defined” error in either a browser or a Node.js environment.

If you have any questions regarding this article or want to talk about anything technology, you can find me on Twitter. Thank you for reading!