CODEWITHSUNDEEP
javascriptjquerytypescript
Marian Ene
Marian Ene

Reputation: 665

Export and Require is not defined

I've created a class that adds some jQuery data to the UI:

/// <reference path="../typings/jquery/jquery.d.ts" />
/// <reference path="../typings/custom.d.ts" />
export class Semaphore {
info: any[];

constructor(info: any[]) {
    this.info = info;
}

AddJqueryData() {
    var self = this;

    for (let bigKey in this.info) {
        let object = this.info[bigKey];
        for (let smallKey in object) {
            $(`#etape_3CosmeticAppraisal table td.${smallKey}.row_M${bigKey}`).tooltip({
                content() {
                    return object[smallKey].txt + '<img src="' + object[smallKey].img + '" class="cimage">';
                },
                show: { delay: 600 }
            });
        }
    }        
}

}

Now, I'd want to import this class from another file and give it a specific array to work with:

import { Semaphore } from "./SemaphoreLogic";

let cosmeticData = [];

$(document).ready(() => {
    let x = new Semaphore(cosmeticData);
    x.AddJqueryData();
});

In my View page, I give a referece to the js file that has the import statement. (I've also tried adding the js file that has the basic functionality but still no luck).

The error I get is: require is not defined or exports is not defined and I'm not sure why is that. I've searched the web a lot and I didn't find anyting that can help me.

Thank you in advance

P.S.: If you give can think of a better approach than mine, feel free to open my eyes :D. (I'm preety new to TypeScript)

Upvotes: 3

Views: 740

Answers (1)

Joe Attardi
Joe Attardi

Reputation: 4521

Sounds like your transpiler is turning your import/export statements into CommonJS-style require/export statements. Which, of course, won't work in the browser (unless you're using something like Browserify, which it sounds like you aren't). You'll need to use a tool like Browserify or Webpack to get this to work.

Upvotes: 3

Related Questions