0

Even if there are a lot threads that talk about this particular problem, non of them solved the issue I am seeing.

I have an existing Angular 4 application in which I am loading Javascript files as follows within the index.html:

<script src="assets/js/libs/three.js.r86/three.js"></script>
<script src="assets/js/libs/three.js.r86/controls/OrbitControls.js"></script>
<script src="assets/js/TrackballControls.js"></script>
...

Some of those JS files are having the following statement:

module.exports = DetectionPoint;

When loading the application I am consistently getting the following error:

ReferenceError: module is not defined

Based on my reading It seems related to a very basic problem in loading commonJS(not 100% sure)

  • Is there something to add in the package.json for having the CommonJS loaded?

  • Is this related to the fact that i am loading those JS in the index.html?

P.S: I already went over the following threads with no luck:

Thx

isaac.hazan
  • 3,772
  • 6
  • 46
  • 76
  • actually angular4 is built with typescript. so every js library you wnat to use you should declare the library object like: declare const $:any, or to install proper typing like:npm i @types/jquery – happyZZR1400 Feb 19 '18 at 13:10

1 Answers1

0

After a few hours of investigation, following are the steps required to solve this problem.

  1. Download browserify
  2. Run browserify on each problematic file
  3. Include the resulted file in your HTML/JS file
npm install -g browserify
browserify  log.js > logBundle.js
<script src="assets/js/logBundle.js"></script>
isaac.hazan
  • 3,772
  • 6
  • 46
  • 76