When dealing with web applications and programming projects, programmers often face the error "ReferenceError: require is not defined." It became one of the typical errors that web browsers throw due to a lack of adequate resources.
Such an error arises when users use the require() function in a JavaScript file and execute it in the web browser, but it actually works in a Node.js environment.
These errors can feel aggravating if you are a beginner or new to coding. This article will explain how to fix this error and run JavaScript programs smoothly in web browsers.
What is a ReferenceError?
When users try to use a non-existent variable in the program, it will throw a ReferenceError object. Before digging deep into how to solve the error "ReferenceError: require is not defined," users should first know how these errors work in JavaScript.
In JavaScript, there are two distinct types of errors other than the JS errors in logic, i.e., syntax errors and runtime errors, which users typically term as exceptions.
The JavaScript compilers throw syntax errors at compile time when it finds an invalid statement. But, we are dealing with a runtime error, which we will discuss in the following section.
When the compiler returns an error though the users have created a program with no syntax error, it is called a runtime error. This type of error depends on the type of mistake or hurdle the program encounters, and it can be of different types, and ReferenceError is one of them.
JavaScript compiler when throws an error, where in our case, we found a ReferenceError, which will show this in the output along with the error message when we refer to our variable that does not exist.
The error message "require is not defined" implies an error that involves a variable, a method, or a function, which has the name “require." Also, when users refer to a variable that does not exist; or have not initialized it in their current program scope, this error occurs.
For example:
var a = require('Hello');
var b = require('JavaScript');
var c = require('Error');
Output:
Explanation:
The above program will generate a ReferenceError in JavaScript "Required not defined." It is because we have not specified what we want with the required() function in the program. So the compiler returned an error in this program.
When does the JavaScript referenceError "ReferenceError: require is not defined" happens?
Some special cases users must remember when working with JavaScript programs. The three situations as follows that can cause this error in JavaScript/Node.js:
When users use the require() method in the browser context, it will not accept the method and return a ReferenceError.
When users use the package.json file with the Node.js require() method and apply the type to the "module," it can also cause this error.
When users use the .mjs file extension with the require() function in Node.js.
The following section will highlight different solutions to this "ReferenceError: require is not defined" error in JavaScript:
Solution 1: When users get the error in a browser environment
When the browsers do not support the require() function of JavaScript, users will get the "ReferenceError: require is not defined" error. It usually occurs to programmers who shift from a Node.js environment and use a browser.
Using the ES6 module import and export syntax can solve this error when the browser does not support the Node-specific require() function.
To use the ES6 module import and export syntax, users first specify the type of scripts to "module" in the HTML document where they attach their JavaScript document. Follow the code snippet to work with the type attribute in the HTML document:
Code Snippet:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>require is not defined: in JavaScript or Node.js </title>
</head>
<body>
<script type = "module" src = "demo1.js" > </script>
<script type = "module" src = "demo2.js" > </script>
</body>
</html>
Here, we have used two scripts, "demo1" and "demo2," and now we will use the ES6 imports/exports syntax in both the scripts written inside the HTML document.
We will add the following code in the demo1 script:
export default function func(x) {
return x * x;
}
export const pi = 3.14;
And then, we will call the first script "demo1" in the second script to use these default and named exports.
Our demo2 script will have this code:
import func, {pi} from './demo1.js';
console.log(func(pi));
Solution 2: When users get the error in Node.js
In this case, when users get such errors, they are probably using the type property to the module in their package.json document or using the require() function in the document, which includes a .mjs file extension that can cause the error "require-is-not-defined."
To resolve this error, users can remove the "module" set to the type property in the package.json document. Also, users must rename the documents having a .mjs extension to .js.
Some important points to remember:
- While using the ES6 imports/exports syntax, when users use two scripts, here we used demo1 and demo2, they can add only one default export in any one script.
- Users cannot use both the require() function and the ES6 imports/exports syntax in one single project. If they use the ES6 imports/exports syntax in any part of the project, they should use only this, else; they should fully use the require() function from the beginning.
Conclusion:
Attempting to find the actual solution behind this error can quickly solve this. In this article, we have discussed the efficient solutions which fix the error "ReferenceError: require is not defined." Also, this article provided practical and critical points that users should not overlook while practicing such programs and crushing such bumps in the cycle of creating projects.