Skip to content
Fix Code Error

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

March 13, 2021 by Code Error
Posted By: Anonymous

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?

Solution

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 the <script> tag.
  2. Use a CommonJS implementation. It has synchronous dependencies like Node.js
  3. Use an asynchronous module definition (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 JavaScript code, CSS, etc.). It was made popular by the surge of React, but it is notorious for its difficult learning curve.
  3. Rollup – a new contender. It leverages ES6 modules and 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. It is 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.

Answered By: Anonymous

Related Articles

  • Error: request entity too large
  • error LNK2005: ✘✘✘ already defined in…
  • ExpressJS How to structure an application?
  • Error: Failed to lookup view in Express
  • Using Jade templates in Backbone.js
  • integrating disqus with emberjs only works on first page…
  • Adding Dynamic Input Fields With VueJs
  • bootstrap-datepicker in dd/mm/yyyy - selected date is…
  • Express JS: TypeError [ERR_INVALID_ARG_TYPE]: The "url"…
  • Jade can't access variable unless it's rendered as {{…

Disclaimer: This content is shared under creative common license cc-by-sa 3.0. It is generated from StackExchange Website Network.

Post navigation

Previous Post:

How do I run a Python program in the Command Prompt in Windows 7?

Next Post:

How to split a String by space

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

  • Get code errors & solutions at akashmittal.com
© 2022 Fix Code Error