Fix Uncaught ReferenceError: require is not defined in JavaScript

by

Uncaught ReferenceError: require is not defined is a common JavaScript error message.

The error occurs when you try to call require() outside of Node.js environment, most of the time you’re in the browser JavaScript console. The thing is, client-side and server-side JavaScript are not the same. The syntax for using require is defined by the CommonJS specification, which can only be used inside client-side JavaScript.

The cause of Uncaught ReferenceError: require is not defined can be either one of the following reasons:

  •  require() is used in a browser environment, either inside a <script> tag or in the browser console.
  • JavaScript file is ran with Node.js, but you’ve specified type: module inside your package.jsonfile.
  • The JavaScript script is named with a .mjs extension instead of .js

With that said, in order to fix Uncaught ReferenceError require is not defined error in JavaScript, simply rename any files that have a .mjs extension to .js extension and remove the type:module line in package.json file.

Contents hide
1 require is not defined fixes for browsers
2 ReferenceError require is not defined on the server-side

require is not defined fixes for browsers

By default, require()  is included in Node.js environments only, which means that browsers such as Chrome/Edge/Firefox don’t understand what require() actually is. If you still want to load other modules in the browsers, what you should do is placing each JavaScript snippet inside <script> tags in your HTML file.

But require() is actually not needed because browsers automatically load all the <script> files you added to your HTML file.

For example, you can embed a scriptlib.js` file inside your HTML source code as follows:

<body>
  <script src="script.js"></script>
</body>Code language: HTML, XML (xml)

Suppose the script.js file defines test() function, it is now loaded in global scope and can be called anywhere below the line that loads script.js:

<body>
  <script src="script.js"></script>
  <script>
    test();
  </script>
</body>Code language: HTML, XML (xml)

What happened is that the browser, by default, loads all JavaScript files and code snippet sequentially from the top. Once your script.js is loaded, its contents can be used anywhere in the HTML file.

Alternatively, you can use the ES6 Module import / exports syntax in the browser like follows :

  <body>
    <!-- include scripts setting type="module" -->
    <script type="module" src="script1.js"></script>
    <script type="module" src="script2.js"></script>
  </body>Code language: HTML, XML (xml)

Now you can call a function defined in script1.js inside script2.js. The contents of script1.js contains the definition of samplenum and sum(), all prefixed with export keyword like below.

export const samplenum = 999;

export default function sum(a, b) {
  return a + b;
}Code language: JavaScript (javascript)

The script2.js can use import syntax to load the variables and functions and use them.

// import default and named export
import sum, {num} from './script1.js';

console.log(sum(5, 5));
console.log(num);Code language: JavaScript (javascript)

Server-side environments like Node doesn’t have the <script> tag, so you have to rely on the require() function.

ReferenceError require is not defined on the server-side

If you’re seeing Uncaught ReferenceError - require is not defined pops up on the server-side, you may have placed a "type": "module" somewhere in the package.json file.

{
  "name": "n-app",
  "version": "1.0.0",
  "type": "module"
}Code language: JSON / JSON with Comments (json)

The package.json file is core to the Node.js ecosystem and is a fundamental part of understanding and working with Node.js, npm, and even modern JavaScript. This file is used as a manifest, storing information about applications, modules, packages, and more.

Adding "type": "module" to the package.json enables ES 6 modules. When you have "type": "module" in the package.json file, your JavaScript source code should use import syntax. When you do not have, you should use require syntax. For more info, see here.

In rare cases, your file may have been named with the .mjs extension instead of .js. Node supports two JavaScript extensions: .mjs and .cjs extensions. The .mjs extension is meant to be ran as an ES Module or CommonJS Module.

If you named the file with the .mjs extension, Node will not be able to load the module using require(). This is why you need to make sure you are using .js extension.

We hope that the short article provide helpful information on how to fix Uncaught ReferenceError – require is not defined in JavaScript. You may want to check out our other tutorials on common JavaScript errors such as Unexpected end of JSON input, Not allowed to load local resource, Prettier not working. Another type of error that bugs new JavaScript developers that we have covered is IntelliSense doesn’t work in VSCode and ESLint not working in VSCode, which you may also want to read.

If you have any question, don’t hesitate to let us know in the comment section below.

Leave a Comment