Client on Node.js: Uncaught ReferenceError: require is not defined

javascript node.js sockets express pug

I am writing an application with the Node.js, Express.js, and Jade combination.

I have file client.js, which is loaded on the client. In that file I have code that calls functions from other JavaScript files. My attempt was to use

var m = require('./messages');

in order to load the contents of messages.js (just like I do on the server side) and later on call functions from that file. However, require is not defined on the client side, and it throws an error of the form Uncaught ReferenceError: require is not defined.

These other JavaScript files are also loaded at runtime at the client, because I place the links at the header of the webpage. So the client knows all the functions that are exported from these other files.

How do I call these functions from these other JavaScript files (such as messages.js) in the main client.js file that opens the socket to the server?

Why don't you just <script src="messages.js"></script> and call them after that?

Perhaps this can be a solution, but there is another thing that concerns me. I also have a file called "representation.js" for abstracting the representation that is common to the client and the server. In that file I also have require statements and on the server side it should be ok because I am running node. However, on the client side this will be an issue. What do you think?

For newbies like me (who couldn't even spell "npm" a week ago! :-), it may be helpful to understand that browserify's --require option causes require() to be defined on the client side. See: lincolnloop.com/blog/speedy-browserifying-multiple-bundles

@Sterling Archer... If there are 100 such files... we can't keep on loading the, in HTML right.........

Peter Mortensen

This is because require() does not exist in the browser/client-side JavaScript.

Now you're going to have to make some choices about your client-side JavaScript script management.

You have three options:

Use the

Notes!

Use require(['moudle-name']) in your-script.js, not require('moudle-name')

Use const {ipcRenderer} = require(['electron']), not const {ipcRenderer} = require('electron')

Never, ever recommend a "click here", ever. Best case, it's a RickRoll, but we have no idea whatsoever what's awaiting us at the end of that link.

this was help me!! but now my problem is that I need manually change the require... that's a problem, exits somethings in tsconfig that do this when I compile?

Peter Mortensen

In my case I used another solution.

As the project doesn't require CommonJS and it must have ES3 compatibility (modules not supported) all you need is just remove all export and import statements from your code, because your tsconfig doesn't contain

"module": "commonjs"

But use import and export statements in your referenced files

import { Utils } from "./utils"
export interface Actions {}

Final generated code will always have(at least for TypeScript 3.0) such lines

"use strict";
exports.__esModule = true;
var utils_1 = require("./utils");
....
utils_1.Utils.doSomething();

Do you really mean ES3? ES3 is 21 years old, from December 1999.

Some old smart TVs hasn't full es5 support. So only es3 works everywhere.

Peter Mortensen

Even using this won't work. I think the best solution is Browserify:

module.exports = {
  func1: function () {
   console.log("I am function 1");
  },
  func2: function () {
    console.log("I am function 2");
  }
};

-getFunc1.js-
var common = require('./common');
common.func1();

double-beep

window = new BrowserWindow({
    webPreferences: {
        nodeIntegration: true,
        contextIsolation: false
    }
});

Welcome to Stack Overflow and thanks for taking the time to create an answer. However, this very answer has been given numerous times as a solution for this question and thus does not add any value whatsoever. If you could elaborate a bit (by editing this post) on why and how this solution works, this answer could turn to good advice which is exactly what this site is for. Also, this is an answer purely for the Electron framework, which the OP of the question does not even use -- please consider posting (a more elaborate version) on a more appropriate spot.

consider updating with details as to how this answer is different from the other answers; does this answer address an issue not addressed by other answers?

although it is not clear but somehow is worked.

Peter Mortensen

I confirm. We must add:

webPreferences: {
    nodeIntegration: true
}

For example:

mainWindow = new BrowserWindow({webPreferences: {
    nodeIntegration: true
}});

For me, the problem has been resolved with that.

This was basically already answered by stackoverflow.com/a/56342771/2358409

us_david

People are asking what is the script tag method. Here it is:

<script src='./local.js'></script>.

Or from network:

<script src='https://mycdn.com/myscript.js'></script>

You need plugin the right url for your script.

Enrico

I was trying to build metronic using webpack. In my package.json I had to remove the "type": "module" section.

https://i.stack.imgur.com/NIMd6.png

Client on Node.js: Uncaught ReferenceError: require is not defined

Follow WeChat

Want to stay one step ahead of the latest teleworks?

相似问题

Platform

Support

Contact US