How to Fix ReferenceError require is not defined in JavaScript

Require not defined javascript – How to Fix ReferenceError require is not defined in JavaScript?

by

Require not defined javascript: The “ReferenceError: require is not defined” error can arise for several reasons:

  • When we use the require() function in a browser environment.
  • When we use the require() function in a Node.js project, where type is set to module in the package.json file.
  • When we use the require() function in Node.js, where files have a .mjs extension.

Fixing the ReferenceError require is not defined in JavaScript

Use the ES6 module import and export syntax to resolve the “ReferenceError need is not defined” error.

index.html:

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

  <body>
    <!-- Write your HTML elements here  -->

    <!-- adding type as module in the script   -->
    <script type="module" src="index.js"></script>
    <script type="module" src="anotherFile.js"></script>
  </body>
</html>
  • Now we can use the ES6 imports/exports syntax in index.js and anotherFile.js.
  • The index.js file exports a variable and a function.

index.js:

// Create a default export function say multiply which accepts
// two numbers as arguments and returns their multiplication result
export default function multiply(x, y) {
  // Returns the multiplication result of the passed two numbers
  return x * y;
}

// This is named export
export const id = 50;

Now we import the above index.js file into another file and can be accessed there.

index.js:

// Here we are importing the default and named export from the
// index.js file using the import keyword
import multiply, {id} from './index.js';

// Passing two numbers as arguments to the multiply() function
// (of index.js file) to get the multiplication of two numbers and
// print the result
console.log(multiply(3, 4)); // Output => 12
// Printing the 'id' variable value (of index.js file)
console.log(id); // Output => 50

Output:

12
50

NOTE:

Please keep in mind that each file can only have one default export.
In the browser, use this syntax (ES6 Modules) rather than the 'require()' function.

Alternatively, you can insert the index.js file’s script above the anotherFile.js file’s script, and the function and variables from the index.js file will be made available to anotherFile.js without exporting and importing them.

Here’s an example that doesn’t include any imports or exports.

index.js:

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

  <body>

    <!--Here the index.js file is loaded first, hence we can use the functions of it in anotherFile.js file-->
    <script src="index.js"></script>
    <script src="another-file.js"></script>
  </body>
</html>

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

index.js:

// Create a default export function say multiply which accepts
// two numbers as arguments and returns their multiplication result
export default function multiply(x, y) {
  // Returns the multiplication result of the passed two numbers
  return x * y;
}

// This is named export
export const id = 50;

We can now utilize the function and variable in our other code without even having to import them.

anotherFile.js:

// Passing two numbers as arguments to the multiply() function
// (of index.js file) to get the multiplication of two numbers and
// print the result
console.log(multiply(3, 4)); // Output => 12
// Printing the 'id' variable value (of index.js file)
console.log(id); // Output => 50

Output:

12
50

Fixing the ERROR

If the require() function of the server is not specified/defined, we have set the type attribute/property to module in our package.jsonfile, or all files that have an extension of .mjs instead of .js.

To resolve the “ReferenceError require is not defined” error, remove the type property from your package.json file if it is set to the module and rename any files with file.mjs extension to have file.js extension.

package.json:

{
  // It should be removed if we want to use require
   "type": "module",
   
  // Write the rest of the code.....
}

You may also utilize the ES6 module syntax with the import and export keywords.

Set the type property in your package.json file to module if you wish to utilize the import/export syntax to import and export modules.

package.json:

{
  // Here we must add this below one
  "type": "module",
   // Write the rest of the code.....
}

We must have to replace the require and module.exports syntax with the import and export keywords.

Let us see an example where we define a function and a variable, and then export the function as a default export and the variable as a named export.

index.js:

// Create a function(default export) say multiply which accepts
// two numbers as arguments and returns their multiplication result
export default function multiply(x, y) {
  // Returns the multiplication result of the passed two numbers
  return x * y;
}

// This is named export
export const id = 50;

Now we are importing them into anotherFile.js from the above index.js file

anotherFile.js:

// Here we are importing the default and named import from the
// index.js file using the import keyword
import multiply, {id} from './index.js';

// Passing two numbers as arguments to the multiply() function
// (of index.js file) to get the multiplication of two numbers and
// print the result
console.log(multiply(2, 10)); // Output => 20
// Printing the 'id' variable value (of index.js file)
console.log(id); // Output => 50

Output:

20
50

NOTE:

  • As said earlier, please keep in mind that you can only use 1 default export per file.
  • You cannot use the require() function in combination with the ES6 Module import/export syntax. You must use one or the other on a consistent basis.