require is not defined – how to fix require is not defined error in JavaScript?

require is not defined – Problem : require() is not a feature that is built into the browser. Sometimes, JavaScript may suddenly give you a require is not defined error like this: Javascript require() function giving ReferenceError: require is not defined

Uncaught ReferenceError: require is not defined

require is not defined – How to fix the error `require is not defined`?

Problem : Uncaught ReferenceError: require is not defined

require is not defined javascript

IE 6+ .......... compatible ✔
Firefox 2+ ..... compatible ✔
Safari 3.2+ .... compatible ✔
Chrome 3+ ...... compatible ✔
Opera 10+ ...... compatible ✔

// credit by : https://stackoverflow.com/

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 want to use it on the browser, you want to add the require() function to the browser by using the RequireJS library.

Don’t Miss : bootstrap’s javascript requires jquery

Using RequireJS on your HTML file.

To add RequireJS to your application, you want to free download the latest RequireJS release and put it in your scripts/ directory.

Read Also:  Simple Laravel Dynamic Select Boxes Example

Next, you want to call the script on your main HTML header as follows:

<!DOCTYPE html>
<html>
  <head>
    <title>RequireJS Tutorial - www.paakinfo.com</title>
    <script data-main="scripts/app" src="scripts/require.js"></script>
  </head>
  <body>
    <h2 id="header">Best System Management system</h2>
  </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 example of above, scripts/app.js file will be loaded.

Inside of app.js directory, you can load any scripts you want to use in your application. For Example you want to include the Lodash library in your main file. You first want to download the script from the website, then include the lodash.js script in the scripts/ directory.

Your application structure should look as follows:

├── index.html
└── scripts
    ├── app.js
    ├── lodash.js
    └── require.js

Now all you want to do is use requirejs function to load lodash, then pass it to the callback function.

Read Also:  Simple Jquery Scroll To Top Example

Take a look at the following example:

requirejs(["lodash"], function (lodash) {
  const ElementHdr = document.getElementById("header");
  ElementHdr.textContent = lodash.upperCase("welcome Pakainfo");
});

In the source code above, RequireJS will load lodash library. Once its loaded, the h2 element will be selected, and the textContent will be replaced with “welcome Pakainfo” text, transformed to uppercase by lodash.uppercase() call.

You can wait until the whole HTML DOM is loaded before loading scripts by listening to DOMContentLoaded event as follows:

document.addEventListener("DOMContentLoaded", function () {
  requirejs(["lodash"], function (lodash) {
    const ElementHdr = document.getElementById("header");
    ElementHdr.textContent = lodash.upperCase("welcome Pakainfo");
  });
});

And Last step, you may also remove or deleted the data-main attribute as well as add the script tag right at the end of the HTML body tag as follows:

<!DOCTYPE html>
<html>
  <head>
    <title>RequireJS Tutorial - www.pakainfo.com</title>
    <script src="scripts/require.js"></script>
  </head>
  <body>
    <h2 id="header">Best System Management system</h2>
    <script>
      document.addEventListener("DOMContentLoaded", function () {
        requirejs(["scripts/lodash"], function (lodash) {
          const ElementHdr = document.getElementById("header");
          ElementHdr.textContent = lodash.upperCase("welcome Pakainfo");
        });
      });
    </script>
  </body>
</html>

require is not defined – Feel free to structure your script as you see fit.

Read Also:  how to add two numbers in javascript using textbox?

And that’s how you can use RequireJS to add require() function to the browser. You can here step by step free download an example source code on this requirejs-starter repository on GitHub.

I hope you get an idea about javascript require is not defined.
I would like to have feedback on my infinityknow.com blog.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, don’t forget to share.