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

When working on a programming project, it’s simple to hit some bumps in the process. There are instances when no amount of Google searches seem to be able to solve the issue. “require-is-not-defined” kinds of problems can be especially annoying if you’re new to coding or JavaScript in general.

It is not uncommon to run into errors like “ReferenceError: require is not defined” when learning how to code or develop projects. This post will explain the meaning of that annoying error message and how to fix it for good.

What is ReferenceError?

We need to understand how errors work in JavaScript in order to understand ReferenceError. In JavaScript, there are two different kinds of errors apart from the errors in logic: syntax errors and runtime errors(commonly known as exceptions).

Syntax errors occur at compile time when it detects an incorrect statement. In our case, however, ReferenceError is a runtime error. When a program encounters an error even though the syntax is correct, it is a runtime error. Depending on the kind of issue the program encounters, there can be several kinds of runtime errors, and ReferenceError is one of them.

The type of exception that your program encountered (in this case, ReferenceError) is shown in the output along with the error message whenever one occurs. In our case, the error message is “require is not defined” which indicates the problem is with the variable or method named “require”. When a variable that isn’t present (or hasn’t been initialized) in the current scope is referred to, this error happens.

When does this error occur?

This error can occur when using JavaScript in both browsers and in Node.js. Here are the 3 main scenarios where you might see this error happening,

• When using the require() method in a browser context.
• When using the Node.js require() method, with the type set to “module” in the package.json file.
• When using the .mjs file extension and the require() function in Node.js.

The solution

When getting the error in a browser environment

You are getting the “ReferenceError: require is not defined” error in the browser environment because the require() method is supported in browsers. This often happens to developers shifting from a Node.js environment to a browser one.

You can make use of the ES6 module import and export syntax to resolve this error. The browser does not support the Node-specific require() function.

If you want to use ES6 module import and export, you need to first set the type of scripts to “module” in the HTML file where you link your JavaScript files.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
  </head>

  <body>
    <!-- HTML body goes here  -->

    <!-- Notice how I've set type="module" -->
    <script type="module" src="script1.js"></script>
    <script type="module" src="script2.js"></script>
  </body>
</html>
Code language: HTML, XML (xml)

Now we can use the ES6 imports/exports syntax in the script1.js and script2.js files.

For example, script1.js might look like this,

// Default export
export default function foo(a) {
  return a * a;
}

// Named export
export const PI = 3.14;
Code language: JavaScript (javascript)

Now our other file script2.js can use these default and named exports. One thing to note here is that 1 file can only have 1 default export, but you can have as many named export as you’d like.

Our script2.js may look something like this,

// import the exports
import foo, {PI} from './script1.js';

// use the imported stuff
console.log(foo(PI));
Code language: JavaScript (javascript)

You can read more about using ES6 modules in the MDN docs.

Alternatively, if you do not want to use modules you can put the script for the script1.js file above the script script2.js, in which case script2.js will have access to the function and variable from script1.js without having to export and import them.

When getting the error in Node.js

If you are getting the “ReferenceError: require is not defined” or “require-is-not-defined” error in Node.js, you probably either have set the type property to module in your package.json file or you are using the require() function in the files that have a .mjs file extension.

If your package.json file’s “type” property is set to “module”, remove it to resolve “require-is-not-defined” error. You should also rename any files with a .mjs extension to .js.

// package.json
{
  // ...
  // You should REMOVE the below line if you want to use require()
  "type": "module",
  // ... 
}
Code language: JSON / JSON with Comments (json)

One important thing to note here is that if you are using ES6 modules in some other parts of your Node project then you should either continue using that instead of require() or you should change all your ES6 modules so that they instead use require().

The require() function and the import/export syntax for ES6 modules cannot be combined within a single project. One or the other must be used consistently.

Conclusion

The first thing you should do when you encounter an error is to Google it. There’s a possibility that another programmer has previously run into this problem and solved it! You can start attempting to determine what caused the mistake and how to fix it after making sure that it isn’t being brought on by a computer issue. These errors could at first look very perplexing if you are new to coding. You’ll be able to swiftly and simply solve them, though, with a little effort and persistence! I hope this article has helped you fix the “ReferenceError: require is not defined” or “require-is-not-defined” error in either a browser or a Node.js environment.

If you have any questions regarding this article or want to talk about anything technology, you can find me on Twitter. Thank you for reading!

This tutorial help to learn how you can fix JavaScript ReferenceError: require is not defined. The browser and Node.js environment.

When importing a module, JavaScript could occasionally provide you with the following error message: require is not defined.

The error:

Uncaught ReferenceError: require is not defined

What’s the use of require

The require() function is used when you need to load a package or a module into your JavaScript file.

Why This Error has happened

The most common reason for this is that the JavaScript environment cannot manage the call to the require() method that was specified in your code.

Some common causes for this Error in Server Side

• using require() without RequireJS in a browser
• Utilizing Node.js require() with the type: module specified in your package.json file
• Your JavaScript file’s extension has a type error.

You can fix this issue in the client side(Browser) or the Server side, Let’s discuss it one by one :

Browser: How to Fix requirements is not defined in JS

Only the Node.js environment is loaded by default with the JavaScript require() function. So whenever you run the program code by using the browser.

The browser won’t be understood by the browser and throws an error. You can solve this problem that is using script tag.

A simple way to Load methods in the HTML file

We can normally load the method into an HTML file using a script tag. Let’s create a common.js file and define hello() method.

function hello() {
alert("Hello! js team");
}

We can call the hello() function after the script tag.

Sample Code

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
  </head>

  <body>
    <script src="common.js"></script>
	<script>
    hello();
  </script>
  </body>
</html>

You can access all method into you application.

How Solve in Modern Browser

Modern browsers like Chrome, Safari, and Firefox support import/export syntax inside a script with type module.

Create the common.js file and define a hello method. Finally, We have exported the function as follows:

function hello() {
  alert("Hello! js team");
}

export { hello };

Let’s import common.js file into our project file, the exported function will available in another file.

Create an HTML file and load the script with the type attribute as shown below:

Sample Html File

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
  </head>

  <body>
    <!-- define using type="module" attribute -->
    <script type="module" src="common.js"></script>
  </body>
</html>

How To call js method

we’ll import the method and call it.

import { hello } from "./common.js";

hello();

Let’s run the above file and You should see an alert box called from the above file.

How To use Require lib in Html

You can also use the require() function in a browser by including RequireJS libs in HTML file.

A module loader library for in-browser use is called RequireJS. You must download the most recent RequireJS release and place it in your scripts/ folder in order to add it to your project.

A unique attribute called data-main is utilized by RequireJS to load a certain script immediately after RequireJS has been loaded. In the aforementioned scenario, the scripts/app.js file will be loaded.

The fix require is not defined on server-side

Server-side environments like Node don’t have the script tag, so it needs the require() function.

Sample Example

//load library from node_modules
const lodash = require("axios");

//load your exported modules
const { hello } = require("./common");

How To Remove Nodejs type module

You may still see the require is not defined error because of your configurations. You need to remove type: module from your package.json file as shown below:

{
  "name": "app",
  "version": "1.0.0",
  "type": "module"
}

The module type is used to make Node treat .js files as ES modules.

Conclusion

We have learned the different ways of solutions to the ReferenceError: require is not defined issue from the server and browser environment. You can apply any one of the provided solutions.