Client on Node js Uncaught ReferenceError require is not defined

Question

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

User · Answer

This worked for me  Save the file https   requirejs org docs release 2 3 5 minified require js  It is the file for RequestJS which is what we will use  Load it into your HTML content like this   lt script data-main  quot your-script js quot  src  quot require js quot  gt  lt  script gt   Notes  Use require   moudle-name    in your-script js  not require  moudle-name   Use const  ipcRenderer    require   electron     not const  ipcRenderer    require  electron

User · Answer

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  lt script gt  tag  Use a CommonJS implementation  It has synchronous dependencies like Node js Use an asynchronous module definition  AMD  implementation   CommonJS client side-implementations include  most of them require a build step before you deploy    Browserify - You can use most Node js modules in the browser  This is my personal favorite  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  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   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

User · Answer

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  quot module quot    quot commonjs quot   But use import and export statements in your referenced files import   Utils   from  quot   utils quot  export interface Actions     Final generated code will always have at least for TypeScript 3 0  such lines  quot use strict quot   exports   esModule   true  var utils 1   require  quot   utils quot         utils 1 Utils doSomething

User · Answer

Even using this won t work  I think the best solution is Browserify  module exports       func1  function         console log  quot I am function 1 quot           func2  function          console log  quot I am function 2 quot            -getFunc1 js- var common   require    common    common func1

User · Answer

Replace all require statements with import statements  Example     Before  const Web3   require  web3        After  import Web3 from  web3    It worked for me

User · Answer

ES6  In HTML  include the main JavaScript file using attribute type  quot module quot   browser support    lt script type  quot module quot  src  quot script js quot  gt  lt  script gt   And in the script js file  include another file like this  import   hello   from    module js          alert hello      Inside the included file  module js   you must export the function class that you will import  export function hello         return  quot Hello World quot      A working example is here  More information is here

User · Answer

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 js integration as true when the browser window  where this HTML file is embedded  was originally created in the main process  function createAddItemWindow             Create a 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

User · Answer

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

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

Examples related to javascript

Examples related to node.js

Examples related to sockets

Examples related to express

Examples related to pug