Sometimes, JavaScript may suddenly give you a require is not defined error like this:
Uncaught ReferenceError: require is not defined
This usually happens because your JavaScript environment doesn’t understand how to handle the require() function reference. The require() function is only available by default on Node.js environment.
If you need to use it on the browser, you need to add the require() function to the browser by using the RequireJS library.
Using RequireJS on your HTML file.
To add RequireJS to your project, you need to download the latest RequireJS release and put it in your scripts/ folder.
Next, you need to call the script on your main HTML header as follows:
<!DOCTYPE html>
<html>
<head>
<title>RequireJS Tutorial</title>
<script data-main="scripts/app" src="scripts/require.js"></script>
</head>
<body>
<h1 id="header">My Sample Project</h1>
</body>
</html>
The data-main attribute is a special attribute that’s used by RequireJS to load a specific script right after RequireJS is loaded. In the case of above, scripts/app.js file will be loaded.
Inside of app.js, you can load any scripts you need to use in your project. Suppose you need to include the Lodash library in your file. You first need to download the script from the website, then include the lodash.js script in the scripts/ folder.
Your project structure should look as follows:
├── index.html
└── scripts
├── app.js
├── lodash.js
└── require.js
Now all you need to do is use requirejs function to load lodash, then pass it to the callback function.
Take a look at the following example:
requirejs(["lodash"], function (lodash) {
const headerEl = document.getElementById("header");
headerEl.textContent = lodash.upperCase("hello world");
});
In the code above, RequireJS will load lodash library. Once its loaded, the <h1> element will be selected, and the textContent will be replaced with “hello world” text, transformed to uppercase by lodash.uppercase() call.
You can wait until the whole DOM is loaded before loading scripts by listening to DOMContentLoaded event as follows:
document.addEventListener("DOMContentLoaded", function () {
requirejs(["lodash"], function (lodash) {
const headerEl = document.getElementById("header");
headerEl.textContent = lodash.upperCase("hello world");
});
});
Finally, you may also remove the data-main attribute and add the <script> tag right at the end of the <body> tag as follows:
<!DOCTYPE html>
<html>
<head>
<title>RequireJS Tutorial</title>
<script src="scripts/require.js"></script>
</head>
<body>
<h1 id="header">My Sample Project</h1>
<script>
document.addEventListener("DOMContentLoaded", function () {
requirejs(["scripts/lodash"], function (lodash) {
const headerEl = document.getElementById("header");
headerEl.textContent = lodash.upperCase("hello world");
});
});
</script>
</body>
</html>
Feel free to structure your script as you see fit.
And that’s how you can use RequireJS to add require() function to the browser. You can download an example code on this requirejs-starter repository on GitHub.
