Client on node: Uncaught ReferenceError: require is not defined

Question

So, I am writing an application with the node/express + jade combo.

I have client.js, which is loaded on the client. In that file I have code that calls

Answer 1

I am coming from an electron environment, where I need IPC communication between a renderer process and the main process. The renderer process sits in an HTML file between script tags and generates the same error. The line

const {ipcRenderer} = require('electron')

throws the Uncaught ReferenceError: require is not defined

I was able to work around that by specifying node integration as true when the browser window (where this HTML file is embedded) was originally created in the main process.

function createAddItemWindow() {
//Create new window
addItemWindown = new BrowserWindow({
    width: 300,
    height: 200,
    title: 'Add Item',

    //The lines below solved the issue
    webPreferences: {
        nodeIntegration: true
    }
})}

That solved the issue for me. The solution was proposed here. Hopes this helps someone else. Cheers.

Answer 2

In my case I used another solution.

As 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();

Answer 3

Replace all require statements to import statements. Example:

//BEFORE:
const Web3 = require('web3');
//AFTER:
import Web3 from 'web3';

Worked for me.

Answer 4

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:

1. Use <script> tag.
2. Use a CommonJS implementation. Synchronous dependencies like Node.js
3. Use an AMD implementation.

CommonJS client side-implementations include:

(most of them require a build step before you deploy)

1. Browserify - You can use most Node.js modules in the browser. This is my personal favorite.
2. Webpack - Does everything (bundles JS, CSS, etc). Made popular by the surge of React.js. Notorious for its difficult learning curve.
3. Rollup - New contender. Leverages ES6 modules. Includes tree-shaking abilities (removes unused code).

You can read more about my comparison of Browserify vs (deprecated) Component.

AMD implementations include:

1. RequireJS - Very popular amongst client-side JavaScript developers. Not my taste because of its asynchronous nature.

Note, in your search for choosing which one to go with, you'll read about Bower. Bower is only for package dependencies and is unopinionated on module definitions like CommonJS and AMD.

Hope this helps some.

Answer 5

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

Answer 6

ES6: In html include main js file using attribute type="module" (browser support):

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

And in script.js file include another file like that:

import { hello } from './module.js';
...
// alert(hello());

Inside included file (module.js) you must export function/class that you will import

export function hello() {
    return "Hello World";
}

Working example here. More info here