Aurelia: Using Functions from Raphael.js, a legacy 3rd party library

Question

I am new to web development and therefore, Aurelia as well. I've been going through other questions and forums to try different ideas, but haven't found a solution. I think I may be missing something simple, but I'm not sure if my problem lies with how I'm adding the library, adding it into the module, bundling it, etc.

I am using Aurelia CLI and NPM.

In my test.js, I am trying to add the following, shown in the Raphael documentation:

let paper = new Raphael(document.getElementById('canvasArea'), 100, 100);
let rect = paper.rect(0, 0, 10, 10);

My test.js is this:

import {inject} from 'aurelia-framework';
import * as raphael from 'raphael';
@inject(raphael)
export class Test {
    constructor() {
        this.raphael = raphael;
        console.log(raphael);
    }
    attached() {
        this.createCan();
    }

    createCan() {
         let paper = new Raphael(document.getElementById('canvasArea'), 100, 100);
         let rect = paper.rect(0, 0, 10, 10);
    }
}

My test.html is this:

<template>
    <div id="canvasArea"></div>
</template>

My error, in the browser console, when loading the page is:

Unhandled rejection ReferenceError: Raphael is not defined at Test.createCan...

The console log for raphael is an object.

Object
    > _ISURL: /^url\(['"]?(.+?)['"]?\)$/i
    > _Paper: ()
    > _availableAnimAttrs: Object
    > _availableAttrs: Object
    > ...

Some of the various ways I have tried without success are the following:

• not doing an inject
• import {raphael} from 'raphael'
• import raphael from 'raphael'
• do this.raphael.Raphael(...)
• do raphael.Raphael(...)
• using constructor(raphael) {...
• use a script on my index.html page instead
• prepend the raphael file in the aurelia.json file instead

To add Raphael.js, I did:

npm install raphael --save

and added the following to my aurelia.json file:

"dependencies" : [
    {
        "name": "raphael",
        "path": "../node_modules/raphael",
        "main": "raphael.min",
        "deps": ["eve-raphael"]
    }
]

Any help would be greatly appreciated such as possible solutions, better way to ask this question, where to look/what to read, other way to implement my end goal, etc. Thanks!

Edits 1. Clarification on location of error 2. Add some of console log for raphael

Answer 1

The solution is to add Raphael.js in the prepend section for the vendor-bundle in aurelia.json. I had tried this before, but I must have had other errors at that time too, such as new Raphael(...) instead of just Raphael (thanks @LStarky).

"prepend": [
    ...
    "node_modules/raphael/raphael.min.js",
    ...
]

While looking up what a legacy library was (thanks @LStarky), I got to the "A Very Stubborn Legacy Library" in the Aurelia Documentation, which stated how sometimes libraries can't "work with the module loading system". My assumption is my problem falls under this category, especially since following this allowed me to use the 3rd party library.

Test.js now looks like this:

export class Test {
    constructor() {
    }
    attached() {
        this.createCan();
    }
    createCan() {
        let paper = Raphael(document.getElementById('canvasArea'), 100, 100);
        let rect = paper.rect(0, 0, 10, 10);
    }
}