Search code examples
javascriptnode.jswebpackbrowserify

Node modules undefined in my webpack bundled script

I am making a web app which, based on a jped picture, recognizes characters and renders it in an interactive interface for the user - this includes some async code. There are 4 js scripts file, which all require npm modules, and an html view.

In order to test the app client-side, I have decided to bundle the scripts together. It shows the following error message:

Uncaught ReferenceError: require is not defined

List of my npm modules whose code returns this error at run time:

I have tried:

  1. browserify my scripts into a bundle, but I read that it would not work with async functions ;
  2. webpack the scripts into a bundle, but Node modules like fs and child_process are returning 'undefined' ;
  3. adding a specific Node module, child-process-ctor, to force child_process to the included

Alas, the same error message is returned.

Questions:

  1. Is bundling the scripts the right approach?
  2. Is the problem that webpack does not transpile fs and child_process correctly?
  3. Which possible solutions should I consider?

Thanks all. This is my 1st question on SO -- any feedback is much welcome!

PS: This might be redundant with Using module "child_process" without Webpack.

Solution

  • Okay this answer is a follow up to my comments, which answer the question more directly. However here I'll go into more detail than is probably necessary, but it will thoroughly answer what you asked. Plus it's educational and I'd say it's pretty fun once you start really digging into it :D

    To start at the beginning. As the internet in its early days became more advanced the need for a type of "front end logic" increased and Netscape's response to this demand was to birth a competitive, cutting edge programming language in record time.

    And by record time I mean 10 days, and by competitive I mean barely functional.

    That's right Javascript was born in 10 days (literally). As you can imagine it was a pretty poor language, but it worked well enough that people started using it.

    Because it was the programming language of the internet, and because of how fast the internet grew, enough people started to use it that the thought of removing it became scary.

    If you changed it you would destroy backward compatibility with millions of websites. The other idea would be to keep it, but also implement a new standard. However it would be hard to justify this because javascript already took a lot of work to upkeep, upkeeping multiple standards would be a nightmare (cough... flash cough).

    Javascipt was easy enough for "new" programmers to learn, but the problem was javascript's only 1 language in a world where php, ruby, mySql, Mongo, Css, Html all rule as dominant kings in their respective kingdoms.

    So someone thought it was a good idea to move javascript to the server and thus node.js was born.

    However for javascript to mean anything on the server it had to be able to do things that you wouldn't want it to be able to do in your browser. For example, scan your hard drive and edit your files.

    If every website you visit could start scanning and uploading everything in your system well....

    However if your server software can't edit or read files you need it to well....

    You get the idea. It's the same language, but because of security issues node.js has some differences. Mainly the modules it's allowed to use.

    Now for the fun part. Can you run node.js client side in a browser. Technically yes. In fact now that we're dumping entire operating systems into a subset of javascript called asm.js there really isn't anything javascript can't do with enough processing power.

    However even if you dump the entire node.js engine (which is basically a stripped down version of chrome) into asm.js you would still have the same security limitations placed by the "Host" browser and so your modules could only run within the sandbox the browser provides.

    So it is technically just a browser within another browser Running at half the speed with the same security limitations.

    Is it something I would recommend doing? Of course not.

    Is it something that people haven't already tried before? Of course not.

    So I hope that helps answer your question.