TypeError: new ColorTracker is not a Constructor?

[Caroisawesome]

Hi I am setting up Tracking.js on a react app, and I installed it via nmp. I set up a class that instantiates the ColorTracker class, but I am getting a TypeError when I try to call it. The error is: Uncaught TypeError: _tracking.ColorTracker is not a constructor

and my code is:

import tracking, { ColorTracker } from 'tracking';

class ColorNoiseMaker {
    constructor(videoId, canvasId) {
        this.colors = ['magenta', 'cyan', 'yellow'];
        this.videoId ='#'+videoId;
        this.canvas = $('canvas#'+canvasId)[0];
        this.context = this.canvas.getContext('2d');
        this.colorTracker = new ColorTracker(this.colors);
...

I tried using it with new tracking.ColorTracker and new ColorTracker with the same error.

Do you know why this is happening?

Many thanks!

[wobsoriano]

I get this too. Managed to fix it?

[Caroisawesome]

I couldn't fix it while using npm, but I got it to work by adding it as a script to the head of my React project.

I added the minified tracking library to the public folder in my React project and then added the library as a regular script tag in the head section of my html. Anywhere I use the library in the code I add a /* global tracking */ comment to the top of the page to access the library (but that is a React specific implementation).

It seemed like the npm version was not exporting the endpoints to the library in the right way, but I couldn't figure out how to fix that easily.

[bsaf]

Hi! I also got this while trying to implement into a Vue.js project. I also tried importing it with a regular script tag like you @Caroisawesome but I couldn't get it to work with my Webpack pipeline.

So I fixed it for my purposes by just grabbing tracking.js like you did and adding a module.exports at the bottom of the file which lets you import it as normal:

(function(window, undefined) {
  window.tracking = window.tracking || {};

  // ... code snipped ...

}());

module.exports = window.tracking // this is the line I added

This worked for me :)

[zhuzheng314]

when you used in vue.js 2.00+ , `(function(window, undefined) { window.tracking = window.tracking || {};

// ... code snipped ...

}());

export default window.tracking // this is the line I added`

[ggsjyoon]

I'm having so much trouble using the library in React 😢. Can someone provide a working example of using the library in React?

@Caroisawesome It seems that you made it working in your React project. Could you provide me some example codes or any references you used?

[admsugar]

Also having this issue when installing through npm