Fix - ReferenceError require is not defined in JavaScript

avatar

Borislav Hadzhiev

Last updated: Jul 25, 2022

banner

Check out my new book

Table of Contents #

  1. Fix - ReferenceError require is not defined in the Browser
  2. Fix - ReferenceError require is not defined on the Server

Fix - ReferenceError require is not defined #

The "ReferenceError: require is not defined" occurs for multiple reasons:

  1. Using the require() function in a browser environment.
  2. Using the require() function in Node.js, where type is set to module in the package.json file.
  3. Using the require() function in Node.js, where files have a .mjs extension.

referenceerror require is not defined

This article shows how to solve the error in the browser or on the server.

  1. Fix - ReferenceError require is not defined in the Browser
  2. Fix - ReferenceError require is not defined on the Server

Fix - ReferenceError require is not defined in the Browser #

To solve the "ReferenceError require is not defined" error, use the ES6 module import and export syntax. The require() function is Node.js specific and is not supported in the browser.

You can use the ES6 Module import / exports syntax in the browser. Here's an example:

index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> </head> <body> <!-- your HTML here --> <!-- 👇️ include scripts setting type="module" --> <script type="module" src="index.js"></script> <script type="module" src="another-file.js"></script> </body> </html>

Now our index.js and another-file.js can use the ES6 imports/exports syntax.

Our index.js file exports a function and a variable.

index.js
// 👇️ default export export default function sum(a, b) { return a + b; } // 👇️ named export export const num = 100;

And the other file can import them and use them.

index.js
// 👇️ import default and named export import sum, {num} from './index.js'; console.log(sum(5, 5)); // 👉️ 10 console.log(num); // 👉️ 100

Note that you can only have 1 default export per file.

You should use this ES6 Modules syntax in the browser, and not the require() function.

Alternatively, you can place the script for the index.js file above the script for another-file.js, and the function and variable from index.js will be made available to another-file.js without exporting and importing them.

Here's an example without imports or exports.

index.js
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> </head> <body> <!-- 👇️ index.js is loaded first, so we can use the functions in another-file --> <script src="index.js"></script> <script src="another-file.js"></script> </body> </html>

The index.js file simply defines a function and a variable.

index.js
function sum(a, b) { return a + b; } const num = 100;

Now we are able to use the function and variable in our other file without importing them.

another-file.js
console.log(sum(5, 5)); // 👉️ 10 console.log(num); // 👉️ 100

Fix - ReferenceError require is not defined on the Server #

If the require() function is not defined on the server, you have set the type property to module in your package.json file, or your files have an extension of .mjs instead of .js.

To solve the "ReferenceError require is not defined" error, remove the type property if it's set to module in your package.json file and rename any files that have a .mjs extension to have a .js extension.

package.json
{ // 👇️ this should be removed if you want to use require "type": "module", // ... 👇️ rest }

Alternatively, you can use the ES6 module syntax with the import and export keywords.

If you want to use the import/export syntax to import and export modules, set the type property to module in your package.json file.

package.json
{ // 👇️ add this "type": "module", // ... 👇️ rest }

You would have to replace the require and module.exports syntax with the import and export keywords.

Here's an example where we define a function and a variable, export the function as a default export and the variable as a named export.

index.js
// 👇️ default export export default function sum(a, b) { return a + b; } // 👇️ named export export const num = 100;

Now we can import them and use them in other files.

another-file.js
// 👇️ default and named import import sum, {num} from './index.js'; console.log(sum(5, 5)); // 👉️ 10 console.log(num); // 👉️ 100

Note that you can only use one default export per file.

You are not able to mix and match between the require() function and the ES6 Module import/export syntax. You have to be consistently using one or the other.

Further Reading #

Use the search field on my Home Page to filter through my more than 3,000 articles.