Search code examples
angularkineticjs

Angular2 + KineticJS error: kinetic_kinetic__WEBPACK_IMPORTED_MODULE_4__.Kinetic is undefined

Background:

I'm currently working to migrate an old website from PHP+MySQL+Jquery+KineticJS to Angular6 + Firebase. They have an extensive area with a lot of drag and drop functionality and Canvas fun that is all written in Jquery+KineticJS - which I was hoping I could just import it almost as is into a Component saving a lot of time for the client and myself.

Angular Stack:

"dependencies": {
    "@angular/animations": "^6.0.5",
    "@angular/common": "^6.0.5",
    "@angular/compiler": "^6.0.5",
    "@angular/core": "^6.0.5",
    "@angular/flex-layout": "^6.0.0-beta.16",
    "@angular/forms": "^6.0.5",
    "@angular/http": "^6.0.5",
    "@angular/platform-browser": "^6.0.5",
    "@angular/platform-browser-dynamic": "^6.0.5",
    "@angular/router": "^6.0.5",
    "angular2-notifications": "^1.0.0",
    "core-js": "^2.5.7",
    "font-awesome": "^4.7.0",
    "hammerjs": "^2.0.8",
    "jquery": "^3.3.1",
    "kinetic": "^5.2.0",
    "lodash": "^4.17.5",
    "nodemailer": "^4.6.7",
    "rxjs": "^6.2.1",
    "typescript": ">=2.7.0 <2.8.0",
    "zone.js": "^0.8.26"
  },

Steps taken:

As you can see above, both the jquery and kinetic packages are installed.

I then added this to the project's index.html to handle the missing global scope that KineticJS uses:

<script>
    var global = global || window;
    var Buffer = Buffer || [];
    var process = process || {
      env: { DEBUG: undefined },
      version: []
    };
</script>

And now I get this error:

ERROR TypeError: "kinetic_kinetic__WEBPACK_IMPORTED_MODULE_4__.Kinetic is undefined"

When I call:

new Kinetic.Stage({
    container: 'elementId',
    width: canvasWidth,
    height: canvasHeight
});

That I can't figure out and it looks as if no one else has either searching around :(

I just tried KineticJS 5.1.0 which is the same as the old site, and same error.

So, does anyone know of a way to fix this? Or should I stop trying to fit this square into the circle and go for a rebuild? Any clarity or ideas would be greatly appreciated thank you :)

Solution

  • Ok for any poor souls who are trying to do this, my recommendation is don't bother - just rebuild using one of these libraries:

    I went with Dragula and so far it's been super easy to use and is actually not taking me too much time to rebuild.

    Case closed...