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:
$ npm install moment
Then I created an HTML file to do the job. This is the code:
<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:
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 outthis.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!