Require is not defined javascript ошибка

Сегодня я начал писать новый проект на Node.js и при первом же запуске получил ошибку:

const express = require('express');
                ^
ReferenceError: require is not defined
    at ModuleJob.run (node:internal/modules/esm/module_job:152:23)
    at async Loader.import (node:internal/modules/esm/loader:166:24)
    at async Object.loadESM (node:internal/process/esm_loader:68:5)

Первым делом я проверил установленную версию Node.js:

Тут проблем не было

v15.5.1

Выглядело это довольно странно и раньше в серверных приложениях я такой ошибкой не сталкивался.

Быстрый поиск на stackoverflow нашел несколько тем, в которых говорят, что require не работает в браузере и советуют использовать webpack или browserify.

Еще несколько минут и я нашел то, что мне было нужно. Похоже, что в версиях Node.js 14+ ошибка ReferenceError: require is not defined может встречаться и на сервере.

Проблема в том, что в файле package.json была такая строка:

С ее помощью активируется подключение npm модулей через ключевое слово import.

Решение

Чтобы избавиться от ошибки require is not defined в Node.js можно сделать 3 вещи:

• изменить тип модулей в package.json на commonjs:

• удалить строку "type": "module" из файла package.json

• изменить тип подключения модулей на import:

  // const express = require('express');
  import express from 'express';
  

When Node.js first came out in 2009, the dream of JavaScript everywhere finally became a reality for many JavaScript developers. Full-stack web developers can effectively use the same programming language for both their front and back end work which is huge for developer efficiency and the developer experience overall.

Tech stacks such as MEAN and MERN have further increased the popularity of using JavaScript literally everywhere. While writing your JavaScript code in the frontend is very similar to the backend, there are subtle differences that can create problems. One such problem is receiving the ReferenceError: require is not defined exception.

The Problem

While overwhelmingly similar, client-side and server-side JavaScript does have its differences. Most of these differences stem from the innovation needed to allow JavaScript to run in a non-browser environment. In Node.js, require is a function that is available to use JavaScript modules elsewhere. The syntax for using require is defined by the CommonJS specification which you can learn more about here. By contrast, client-side JavaScript supports the ES6+ specification for using modules via import and export.

The Solution

Your ReferenceError: require is not defined likely has one of two causes:

1. You tried using require in a browser environment
2. You are in a Node.js environment but your project has "type": "module" in its package.json

Let’s go over solutions for each possible cause.

You tried using require in a browser environment

Using require is not supported by JavaScript in the browser so you will need to replace it or find a way to make that work such as using Browserify. The choice is ultimately yours but the most simple solution is to just use the ES6 module syntax instead of require. What’s the difference? In the ES6 syntax you use import rather than require and you use export in the module itself. For example let’s say you have some code setup similar to this:

// math.js
function add(a, b) {
  return a + b;
}

// named export
module.exports = {
  add,
};

// subtract.js
function subtract(a, b) {
  return a - b;
}

// default export
module.exports = subtract;

// main.js
const { add } = require("./math"); // named import
const subtract = require("./subtract"); // default import

console.log(add(1, 2));
console.log(subtract(1, 2));
Code language: JavaScript (javascript)

Here is that same example using ES6 import and export module syntax:

// math.js
// named export
export function add(a, b) {
  return a + b;
}

// subtract.js
function subtract(a, b) {
  return a - b;
}

// default export
export default subtract;

// main.js
import { add } from "./math"; // named import
import subtract from "./subtract"; // default import

console.log(add(1, 2));
console.log(subtract(1, 2));
Code language: JavaScript (javascript)

It should be noted that in both examples, you can name the default import anything you want. In this case, that means you could use the subtract function import like this to the same effect:

// main.js
import foo from "./subtract";

console.log(foo(1, 2));
Code language: JavaScript (javascript)

Additionally, in the subtract.js module above, you can use export default on anonymous functions as well:

// subtract.js
export default function (a, b) {
  return a - b;
}
Code language: JavaScript (javascript)

You are using require in a Node.js environment

In this case, check your package.json file for an property called type. If that is set to module, ES6 modules will be enabled and you will run into the error mentioned above (specifically ReferenceError: require is not defined in ES module scope, you can use import instead). Simply remove that entry and you will be able to use require.

Conclusion

To recap, require is a keyword that is only supported in a Node.js environment using the CommonJS module syntax. In browser environments, modules use ES6 syntax with import and export. There are workarounds for each scenario but the simplest approach is to stick to the syntax that is supported in the environment you are currently using. Now that you have your modules set up accordingly, you can get back to enjoying JavaScript everywhere.

A common error you’ll run into, especially when transitioning from writing JavaScript in the Node runtime to writing JavaScript in the browser, is «Uncaught ReferenceError: require is not defined«. The two environments have different ways of importing modules, so trying to import code in the browser like you would in Node results in this error.

However, this isn’t the only time you might run into this error. Here are the various ways you might run into it:

• You try to use the require statement in the browser
• You try to use require in Node when ES modules are specified in package.json via "type": "module"
• You’re trying to use require in a file ending in .mjs, which typically specifies ES modules

Node

If you encounter this error in a Node environment, you’ve likely either specified to use ES modules via package.json or via the command line.

In case it is specified in package.json, you can fix this by removing the following line in the file:

{
 "type": "module"
}

If you specified to use ES modules via the command line with --eval, you can fix this by removing the --input-type parameter from the command line call.

Browser

The require method is not available in the browser. To solve this, you have a few options, a few of which we’ll briefly describe here.

You can use a bundler like Webpack, which compiles your JavaScript code into a format that is compatible with the browser. Internally, a bundler like this would remove the require statement and instead merge the code into a single file. In some cases, some bundlers may even convert your require calls to import since that is supported by most browsers.

Another option is to just use ES modules, which is natively supported by most browsers. In order to use this, you’ll need to convert all of your require statements to import statements. You’ll also need to explicitly specify the type of the module in the <script> tag, like this:

<script type="module" src="./app.js"></script>

How you choose to fix this may depend on personal preference, if you’re using a bundler, etc.

• Version:v12.18.0
• Platform:Linux dev 5.3.0-53-generic V8 upgrades and what they mean for versioning #47~18.04.1-Ubuntu SMP Thu May 7 13:10:50 UTC 2020 x86_64 x86_64 x86_64 GNU/Linux
• Subsystem:require

What steps will reproduce the bug?

1. Download LTS 12.18.0 from https://nodejs.org/dist/v12.18.0/node-v12.18.0-linux-x64.tar.xz
2. Untar compressed file
3. Save a js file with the following code: (Let’s called it test.js)
   console.log(require)
4. Run //node-v12.18.0-linux-x64/bin/node test.js
5. Node returns error output stating that require is not defined.

How often does it reproduce? Is there a required condition?

All the time.

What is the expected behavior?

The behavior should be similar to node executing the same one liner in REFL interactive shell.

$ node
Welcome to Node.js v12.18.0.
Type ".help" for more information.
> console.log(require)
[Function: require] {
  resolve: [Function: resolve] { paths: [Function: paths] },
  main: undefined,
  extensions: [Object: null prototype] {
    '.js': [Function],
    '.json': [Function],
    '.node': [Function]
  },
  cache: [Object: null prototype] {}
}

What do you see instead?

$ node test.js
(node:13608) ExperimentalWarning: The ESM module loader is experimental. file:///somedirectory/test.js:1 console.log(require); ^ ReferenceError: require is not defined

Additional information

The issue does not happen in older node versions. See text output below

$ node --version
v8.10.0
$ node test.js
{ [Function: require]
  resolve: { [Function: resolve] paths: [Function: paths] },
  main:
   Module {
     id: '.',
     exports: {},
     parent: null,
     filename: '/somedirectory/test.js',
     loaded: false,
     children: [],
     paths:
      [ '/somedirectory/node_modules',
      ...,
      ...,
        '/node_modules' ] },
  extensions: { '.js': [Function], '.json': [Function], '.node': [Function] },
  cache:
   { '/somedirectory/test.js':
      Module {
        id: '.',
        exports: {},
        parent: null,
        filename: '/somedirectory/test.js',
        loaded: false,
        children: [],
        paths: [Array] } } }

Require not defined javascript: The “ReferenceError: require is not defined” error can arise for several reasons:

• When we use the require() function in a browser environment.
• When we use the require() function in a Node.js project, where type is set to module in the package.json file.
• When we use the require() function in Node.js, where files have a .mjs extension.

Use the ES6 module import and export syntax to resolve the “ReferenceError need is not defined” error.

index.html:

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

  <body>
    <!-- Write your HTML elements here  -->

    <!-- adding type as module in the script   -->
    <script type="module" src="index.js"></script>
    <script type="module" src="anotherFile.js"></script>
  </body>
</html>

• Now we can use the ES6 imports/exports syntax in index.js and anotherFile.js.
• The index.js file exports a variable and a function.

index.js:

// Create a default export function say multiply which accepts
// two numbers as arguments and returns their multiplication result
export default function multiply(x, y) {
  // Returns the multiplication result of the passed two numbers
  return x * y;
}

// This is named export
export const id = 50;

Now we import the above index.js file into another file and can be accessed there.

index.js:

// Here we are importing the default and named export from the
// index.js file using the import keyword
import multiply, {id} from './index.js';

// Passing two numbers as arguments to the multiply() function
// (of index.js file) to get the multiplication of two numbers and
// print the result
console.log(multiply(3, 4)); // Output => 12
// Printing the 'id' variable value (of index.js file)
console.log(id); // Output => 50

Output:

12
50

NOTE:

Please keep in mind that each file can only have one default export.
In the browser, use this syntax (ES6 Modules) rather than the 'require()' function.

Alternatively, you can insert the index.js file’s script above the anotherFile.js file’s script, and the function and variables from the index.js file will be made available to anotherFile.js without exporting and importing them.

Here’s an example that doesn’t include any imports or exports.

index.js:

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

  <body>

    <!--Here the index.js file is loaded first, hence we can use the functions of it in anotherFile.js file-->
    <script src="index.js"></script>
    <script src="another-file.js"></script>
  </body>
</html>

The index.js file just defines a function and a variable.

index.js:

// Create a default export function say multiply which accepts
// two numbers as arguments and returns their multiplication result
export default function multiply(x, y) {
  // Returns the multiplication result of the passed two numbers
  return x * y;
}

// This is named export
export const id = 50;

We can now utilize the function and variable in our other code without even having to import them.

anotherFile.js:

// Passing two numbers as arguments to the multiply() function
// (of index.js file) to get the multiplication of two numbers and
// print the result
console.log(multiply(3, 4)); // Output => 12
// Printing the 'id' variable value (of index.js file)
console.log(id); // Output => 50

Output:

12
50

Fixing the ERROR

If the require() function of the server is not specified/defined, we have set the type attribute/property to module in our package.jsonfile, or all files that have an extension of .mjs instead of .js.

To resolve the “ReferenceError require is not defined” error, remove the type property from your package.json file if it is set to the module and rename any files with file.mjs extension to have file.js extension.

package.json:

{
  // It should be removed if we want to use require
   "type": "module",
   
  // Write the rest of the code.....
}

You may also utilize the ES6 module syntax with the import and export keywords.

Set the type property in your package.json file to module if you wish to utilize the import/export syntax to import and export modules.

package.json:

{
  // Here we must add this below one
  "type": "module",
   // Write the rest of the code.....
}

We must have to replace the require and module.exports syntax with the import and export keywords.

Let us see an example where we define a function and a variable, and then export the function as a default export and the variable as a named export.

index.js:

// Create a function(default export) say multiply which accepts
// two numbers as arguments and returns their multiplication result
export default function multiply(x, y) {
  // Returns the multiplication result of the passed two numbers
  return x * y;
}

// This is named export
export const id = 50;

Now we are importing them into anotherFile.js from the above index.js file

anotherFile.js:

// Here we are importing the default and named import from the
// index.js file using the import keyword
import multiply, {id} from './index.js';

// Passing two numbers as arguments to the multiply() function
// (of index.js file) to get the multiplication of two numbers and
// print the result
console.log(multiply(2, 10)); // Output => 20
// Printing the 'id' variable value (of index.js file)
console.log(id); // Output => 50

Output:

20
50

NOTE:

• As said earlier, please keep in mind that you can only use 1 default export per file.
• You cannot use the require() function in combination with the ES6 Module import/export syntax. You must use one or the other on a consistent basis.