Posted inJavaScript / jQuery

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.

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



  
    RequireJS Tutorial - www.paakinfo.com
    
  
  
    
  

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.

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:



  
    RequireJS Tutorial - www.pakainfo.com
    
  
  
    
    
  

require is not defined – 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 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.

I am Jaydeep Gondaliya , a software engineer, the founder and the person running Pakainfo. I'm a full-stack developer, entrepreneur and owner of Pakainfo.com. I live in India and I love to write tutorials and tips that can help to other artisan, a Passionate Blogger, who love to share the informative content on PHP, JavaScript, jQuery, Laravel, CodeIgniter, VueJS, AngularJS and Bootstrap from the early stage.

Leave a Reply

Your email address will not be published. Required fields are marked *

We accept paid guest Posting on our Site : Guest Post Chat with Us On Skype