126

Just started working with Node.js. In my app/js file, I am doing something like this:

app.js

var http = require('http');

http.createServer(function (request, response) {
  response.writeHead(200, {'Content-Type': 'text/plain'});
  response.end('Am I really running a server?!');
}).listen(8080, '127.0.0.1');

console.log('running server!');

When I'm in my terminal and run node app.js, the console spits out 'running server!', but in my browser I get, Uncaught ReferenceError: require is not defined.

Can someone explain to me why in the terminal, it works correctly but in the browser, it doesn't?

I am using the node's http-server to serve my page.

Max
  • 1,054
  • 1
  • 12
  • 20
Richard Bustos
  • 2,870
  • 5
  • 24
  • 31
  • 13
    Are you... running that js file in the browser? You're not meant to do that... – david Aug 11 '15 at 01:11
  • 2
    I had the same problem too, I just removed the `"type": "module"` line from the package.json file – Synchro Sep 12 '21 at 09:02
  • @Synchro Thanks! I removed my package.json file and it worked. I'm just learning so it's not prod setup. – Adrian Oct 26 '21 at 13:20
  • Because this is the top Google result: I was able to fix this error during an Angular 8->14 upgrade by removing `"strict": true` from my compilerOptions in tsconfig.json – VoNWooDSoN Jun 21 '23 at 23:48

9 Answers9

155

This can now also happen in Node.js as of version 14.

It happens when you declare your package type as module in your package.json. If you do this, certain CommonJS variables can't be used, including require.

To fix this, remove "type": "module" from your package.json and make sure you don't have any files ending with .mjs.

Joshua Wade
  • 4,755
  • 2
  • 24
  • 44
Abel
  • 2,371
  • 3
  • 15
  • 29
  • 8
    This can happen with anything in your project folder. So if you have an unrelated build script written with `CommonJS` imports but a `project.json` with `"type": "module"`, then the build script will break, even if it's not referenced in the `package.json`. – Joshua Wade May 05 '20 at 21:40
  • 4
    You can still use require in a module using [createRequire](https://nodejs.org/api/modules.html#modules_module_createrequire_filename) – codedread May 13 '20 at 16:08
  • I am using nvm, so i switched from node 14 to node 10, and this error was fixed. – Milind Oct 26 '20 at 13:49
  • 3
    You can also rename the file extension to `.cjs` – Tibor Udvari May 16 '21 at 21:18
  • 9
    Using Node 14, taking out `"type": "module"` from package.json results `(node:7396) Warning: To load an ES module, set "type": "module" in the package.json or use the .mjs`. I don't have any .mjs – Jeb50 Aug 23 '21 at 23:17
  • 4
    That way you can't use `import`. – Piotr Henryk Dabrowski Dec 17 '21 at 19:03
113

In the terminal, you are running the node application and it is running your script. That is a very different execution environment than directly running your script in the browser. While the Javascript language is largely the same (both V8 if you're running the Chrome browser), the rest of the execution environment such as libraries available are not the same.

node.js is a server-side Javascript execution environment that combines the V8 Javascript engine with a bunch of server-side libraries. require() is one such feature that node.js adds to the environment. So, when you run node in the terminal, you are running an environment that contains require().

require() is not a feature that is built into the browser. That is a specific feature of node.js, not of a browser. So, when you try to have the browser run your script, it does not have require().

There are ways to run some forms of node.js code in a browser (but not all). For example, you can get browser substitutes for require() that work similarly (though not identically).

But, you won't be running a web server in your browser as that is not something the browser has the capability to do.


You may be interested in browserify which lets you use node-style modules in a browser using require() statements.

jfriend00
  • 683,504
  • 96
  • 985
  • 979
  • 45
    @N73k - I won't take that as a serious question. If you want to read about node.js, what it is and what people use it for, that's a completely different topic and you can start by doing your own searches on the web and find all sorts of articles. Javascript is a real OOP language. Perhaps different than what you think you want, but that's only your opinion and there are many who do not share your opinion for a variety of reasons. This is not the place to debate or discuss that. – jfriend00 Sep 18 '18 at 02:51
  • 11
    @HasinduDahanayake - What is the point of that inflammatory statement? JS is a very real object oriented language. Everything in the language is an object with methods, with classes, with an ability to extend classes or objects. It is loosely typed, but that doesn't make it any less OO. – jfriend00 Jan 18 '21 at 08:37
107

As Abel said, ES Modules in Node >= 14 no longer have require by default.

If you want to add it, put this code at the top of your file:

import { createRequire } from 'module';
const require = createRequire(import.meta.url);

Source: https://nodejs.org/api/modules.html#modules_module_createrequire_filename

Dr-Bracket
  • 4,299
  • 3
  • 20
  • 28
64

Node.JS is a server-side technology, not a browser technology. Thus, Node-specific calls, like require(), do not work in the browser.

See browserify or webpack if you wish to serve browser-specific modules from Node.

Rob Raisch
  • 17,040
  • 4
  • 48
  • 58
6

Just remove "type":"module" from your package.json.

Pang
  • 9,564
  • 146
  • 81
  • 122
SHACHI PRIYA
  • 105
  • 1
  • 2
  • 14
    Using Node 14, taking out `"type": "module"` from package.json results `(node:7396) Warning: To load an ES module, set "type": "module" in the package.json or use the .mjs`. I don't have any .mjs – Jeb50 Aug 23 '21 at 23:20
  • 2
    it doesn't help. – Jasdev Singh Moun Dec 13 '21 at 04:32
  • this is not helping, you have to write a warning says "in case you don't have ES6 imports in your app files" – Anas Sep 13 '22 at 11:03
2

I solve this by doing this steps:-

step 1: create addRequire.js file at the project root.

step 2: inside addRequire.js add this lines of code

import { createRequire } from "module";
const require = createRequire(import.meta.url);

global.require = require; //this will make require at the global scobe and treat it like the original require

step 3: I imported the file at the app.js file head

import "./start/addRequire.js";

now you have require beside import across the whole project and you can use both anywhere.

Anas
  • 1,000
  • 11
  • 18
1

Point 1: Add require() function calling line of code only in the app.js file or main.js file.

Point 2: Make sure the required package is installed by checking the pacakage.json file. If not updated, run "npm i".

Daniel R
  • 89
  • 1
  • 3
  • 13
Sowndharya
  • 19
  • 1
1

My mistake: I installed ESLint to my project and made a mistake when I filled out the questionnaire and chose wrong type of modules) Maybe it will be helpful for someone))

What type of modules does your project use? · * commonjs

xb-dx
  • 11
  • 2
0

I solve it, by removing below line from package.json file

 "type": "module"

Hope it will solve the problem.

Basavaraj SK
  • 245
  • 3
  • 3
  • This appears to be just a repeat of [this existing answer](https://stackoverflow.com/a/68679274). – Pang Jan 09 '23 at 09:12