How To Fix the Error Javascript Require is not Defined

Category: How to | February 12, 2022

Here you will learn how to fix Javascript require is not defined error.

Though programming in HTML and CSS is one interesting task, having to program in JavaScript might seem a bit easy until an error pops out of nowhere and now you are clueless for your next step.

One of the common errors we, as programmers face, is the “Javascriptrequire is not defined” error and there are multiple reasons for this error to pop up.

Uncaught ReferenceError: require is not defined

This usually happens when your JavaScript doesn’t know how to handle require() function reference. This function is only available by default on node.js environments.

Following are some other reasons for this error to occur within your program:

  1. Use of require() function in a browser environment
  2. Using the require() function in Node.js project, where ‘type’ is set to ‘module’ in the ‘package.json’ file
  3. Use of require() function in Node.js, with files having the ‘.mjs’ extension.

Now if your question is how do we fix this error? Then don’t worry we have done our homework! This error occurs in two different scenarios; In the browser and In the server. And we have solutions for both of your scenarios. So let’s get started with it!

How to fix error Javascript “require is not defined” in a browser”:

Since the require() function is node js specific and is not supported in the browser. In order to resolve this error, we will use the ES6 module export and import syntax. This method is only valid for browsers and acts as an alternative to the require() function.

Following is the HTML code for the ES6 import/export syntax:

<!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>

Once you have imported this, you can use this syntax in your .js files. Next, we will export a function and a variable in our JavaScript file:

// default export
export default function sum(a, b) {
  return a + b;
}

// named export
export const num = 100;

Now import another .js file in order to use the syntax:

// import default and named export
import sum, {num} from './index.js';

console.log(sum(5, 5)); // 10
console.log(num); // 100

You are all set now! This is the syntax you should be using in the browser and not the ‘require() function’.

How to fix error “require is not defined” on a server”:

If this error occurs in your server then this is because the require() function may not be defined on the server. In order to resolve this issue, you have to 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.

The .json code goes like:

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

You can also use ES6 module syntax with import and export keywords as an alternative. Simply use the import and export keywords to move modules according to your requirements.

An example is shown below:

File Name: test.js
// default export
export default function sum(a, b) {
  return a + b;
}

// named export
export const num = 100;

Now since you have exported this block of code, you can import it and use it in another file according to your need.

An example of this is shown below:

// default and named import
import sum, {num} from './test.js';

console.log(sum(5, 5)); // 10
console.log(num); // 100

Final words:

Now you are all set! You just need to find where your error lies and just code it accordingly. One important note you want to keep in mind is that you are not able to mix between the require() function and the ES6 module. You are only allowed to use one at a time!

You Might Be Interested In:

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.