Skip to content

How to resolve 'ReferenceError: Can't find variable: require when import a javascript library using require within HTML'

1. Purpose

In this post, I will demonstrate how to resolve the following problem when trying to import a JavaScript library using require within HTML:

ReferenceError: Can't find variable: require

2. The code that caused the error

We want to display the current date and time on our page, so I imported a library named moment.js, which is a JavaScript library for date and time processing.

Moment.js is a free and open-source JavaScript library that removes the need to use the native JavaScript Date object directly. The library is a wrapper for the Date object (in the same way that jQuery is a wrapper for JavaScript) making the object a whole lot easier to work with.

I installed the library using the npm install command as follows:

Terminal window
$ npm install moment

Then I created an HTML file to do the job. This is the code:

index.html
<html>
<head>
<title>Vue.js Message List</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
crossorigin="anonymous">
</head>
<body>
<script>
var moment = require("moment");
console.log(moment().format('HH:mm:ss DD/MM/YYYY');
</script>
</body>
</html>

When I tested the above HTML in the browser, I got this error in the browser console:

Terminal window
ReferenceError: Can't find variable: require

3. Why I get this problem?

After researching, I found that this problem is caused by a misunderstanding of the require function in JavaScript.

4. How to resolve this problem?

4.1 Step 1: Remove the require statement from your script

We should remove the require("moment") statement in the script block. Instead, we can import moment.js in one of the following ways.

4.2 Step 2: Load the JavaScript library from an internet CDN using the <script> tag

Here is the code that imports moment.js into our HTML file:

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js" integrity="sha512-qTXRIMyZIFb8iQcfjXWCO8+M5Tbc38Qi5WzdPOYZHIlZpzBHG3L3by84BBBOiRGiEb7KKtAOAs5qYdUiZiQNNQ==" crossorigin="anonymous"></script>

Then use moment.js as follows:

// var moment = require("moment"); // Comment this line out
this.message = moment().format('HH:mm:ss DD/MM/YYYY');
console.log(this.message);

With these changes, everything works as expected.

5. Summary

In this post, I demonstrated how to resolve the “ReferenceError: Can’t find variable: require” error when trying to load JavaScript modules using the require statement. If you are testing HTML in a browser (not using Node.js), you should use the <script> tag to load libraries instead of the require statement. This approach ensures compatibility with browser environments.

Final Words + More Resources

My intention with this article was to help others who might be considering solving such a problem. So I hope that’s been the case here. If you still have any questions, don’t hesitate to ask me by email: Email me

Here are also the most important links from this article along with some further resources that will help you in this scope:

Oh, and if you found these resources useful, don’t forget to support me by starring the repo on GitHub!