ReferenceError: require is not defined in JavaScript

The “ReferenceError: require is not defined” error occurs when the require function is used in a JavaScript file that is intended to be executed in a web browser, rather than in a Node.js environment.

So, in this case, an error is thrown if you try to use the require function in a file that is intended to be executed in a web browser.

To fix this error, you will need to remove any references to the require function from your code.

// This code will throw a "ReferenceError: require is not defined" error
const myModule = require('./my-module');

// To fix the error, remove the require function and use a different approach to load the module
import myModule from './my-module';

In this example, the require function is used to load a Node.js module from a file. However, since this code is intended to be executed in a web browser, the require function is not defined and will throw a “ReferenceError: require is not defined” error.

Instead, you can remove the require function and use the import syntax to load the module.

Browser

To use ES6 modules directly in the browser, you need to set the type="module" attribute:

<script type="module" src="./my-module.js"></script>
<script type="module" src="./my-script.js"></script>

Node.js

One way to fix this error is to ensure that your code is being executed in a Node.js environment.

node my-script.js

… so the require function will be available to your code.

Alternatively, you can use the ES6 module import and export syntax, rather than the require function. This will allow your code to be executed in both Node.js and web browsers, without using the require function.

// my-module.js

export const myFunction = () => {
  // Function body
};

// my-script.js

import { myFunction } from './my-module.js';

myFunction();

You can also reference it in your package.json file:

package.json

{
  "name": "example",
  "type": "module",
  ...
}

Default export

Here is an example of how you can define a function and a variable, export the function as a default export and the variable as a named export using the ES6 module syntax:

// my-module.js

const myVariable = 'Hello, world!';

const myFunction = () => {
  console.log(myVariable);
};

export default myFunction;

export { myVariable };

Here is an example of how you can import the default export and the named export from the my-module.js file:

// my-script.js

import myFunction, { myVariable } from './my-module.js';

myFunction();

console.log(myVariable);

A few things to remember:

• You can only use the export default keyword once per module. This means that you can only have one default export per file. You will get an error if you try to use the keyword more than once in the same module.
• When using the ES6 module syntax to import a module, you have to specify the module’s file extension. This is because the JavaScript interpreter needs to know the type of file that you are importing to process it properly.
• While the require() function and the ES6 module import and export syntax are both ways of organizing and managing modules, they are not compatible with each other. This means that you cannot mix and match the require() function and the ES6 module syntax in the same module.