How can I access functions from other JavaScript files in my client-side client.js file it throws Uncaught ReferenceError: require is not defined?

Product Support LT Browser
,
#1

How can I access functions from other JavaScript files in my client-side client.js file it throws Uncaught ReferenceError: require is not defined?

I attempted to use require(‘./messages’) to load the contents of messages.js, but it throws an error (Uncaught ReferenceError: require is not defined). The other JavaScript files are also loaded at runtime on the client side, so the client knows about the functions exported from these files. How can I call these functions from messages.js in my client.js file, which opens a socket to the server?

#2

Hey MattD,

To replace all require statements with import statements, you can follow this syntax:

Before:

const Web3 = require('web3');

After:

import Web3 from 'web3';

This change should allow your code to work correctly.

#3

Hey MattD,

This issue usually arises because the require() function is not available in browser or client-side JavaScript environments.

To manage your client-side JavaScript scripts, you have several options:

  1. Use the script tag: Include your JavaScript files using the script tag in your HTML. This is simple but can lead to script loading order issues and global namespace pollution.

  2. Use a CommonJS implementation: CommonJS is a module system that allows for synchronous dependencies, similar to how Node.js handles modules. To use CommonJS in the browser, you can use tools like Browserify, Webpack, or Rollup. These tools bundle your JavaScript code, including dependencies, into a single file for deployment.

Browserify allows you to use most Node.js modules in the browser, while Webpack is more comprehensive and can bundle not just JavaScript but also CSS and other assets. Rollup is a newer tool that focuses on ES6 modules and includes tree-shaking capabilities to remove unused code.

  1. Use an Asynchronous Module Definition (AMD) implementation: AMD is another module system for JavaScript that focuses on the asynchronous loading of modules. RequireJS is a popular AMD implementation. It allows you to define modules and their dependencies and then asynchronously load them when needed. However, AMD can be more complex and harder to manage than CommonJS.

In your evaluation of these options, you may also come across Bower, which is a package manager for front-end dependencies. However, Bower is only for managing package dependencies and does not provide a module definition system like CommonJS or AMD.

I hope I was able to give a brief on the issue . Happy to help :slight_smile:

#4

Hey Shahank

Your explanation is very detailed and informative. Thank you .

In my case, I used a different solution. Since the project doesn’t require CommonJS and needs to have ES3 compatibility (modules not supported), all I did was remove all export and import statements from my code. This is because the tsconfig doesn’t contain "module": "commonjs".

However, I continued to use import and export statements in my referenced files:

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

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