Uncaught ReferenceError: exports is not defined and require

Question

I'm using angularjs and typescript to create some app, I'm having a trouble with this error that I can't solve

Here is my *.ts code

export var NgApp = new application.Startup();

///<reference path="../../../../../typings/tsd.d.ts"/>
import {NgApp} from "../../bootstrap";



module views.components.home {
    export class HomeComponent {
        public constructor() {
        }

        public static factory():Function[] {
            return [
                () => new HomeComponent()
            ]
        }

    }

}

NgApp.registerComponents(views.components.home,() => this.app.controller);

Here is my GULP task

let tsResult = gulp.src('src/**/*.ts').pipe(ts({
    module: 'commonjs',
    sourceMap: true
}));

let taskTs = tsResult.js.pipe(gulp.dest('built/'));

This is my error: Uncaught ReferenceError: exports is not defined

The question is: How can I use import like es6 in typescript? What I am missing?

I assume you have a link to system.js on your web page. You can also try compiling with module:system as stated in angular2 quickstart guide. — Amid, Jan 20 '16 at 09:29
I have not tried with 1.5. But for 1.4 I had 'amd' as module + reference on main html page to angular.js etc. and it did the trick. — Amid, Jan 20 '16 at 09:57
Sorry - no. It was a company private project I am not entitled to release on public. — Amid, Jan 20 '16 at 10:15

score 15 · Accepted Answer · answered Mar 17 '17 at 15:44

I use angular 1.6 and webpack, it works on my side when i changed the module to "umd"

UMD: Universal Module Definition This has brought about the push for a “universal” pattern that supports both styles (AMD and CommonJS)

reference: http://davidbcalhoun.com/2014/what-is-amd-commonjs-and-umd/

pasted here is my tsconfig.json after I changed it, I run $ tsc

{
  "compilerOptions": {
    "target": "es5",
    "module": "umd",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "lib": [ "es2015", "dom" ],
    "noImplicitAny": true,
    "removeComments": true,
    "preserveConstEnums": true,
    "allowUnreachableCode": true
  },
  "exclude": [
    "node_modules"
  ]
}

then my "exports is not defined" error is gone.

score 2 · Answer 2 · answered Mar 04 '17 at 09:56

click here "Solved finally" i was also getting same error i changed module:"commonjs" to "module": "es6", because targeting ES5 remove the import/export statements, so these tools cannot remove unused exports.

{
    "compilerOptions": {
    "target": "es5",
    "module": "es6",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "lib": [ "es2015", "dom" ],
    "noImplicitAny": true,
    "suppressImplicitAnyIndexErrors": true
    }

}

score 0 · Answer 3 · answered Jan 21 '16 at 01:14

0

How can I use import like es6 in typescript? What I am missing?

You need to use a module loader. Here is a sample that uses webpack : https://github.com/AngularClass/angular2-webpack-starter

answered Jan 21 '16 at 01:14

basarat

261,912
58
460
511

sorry mate I use angularjs 1.5 and actually not really familiar with webpack, can I use systemjs with the same abilities to load modules? – hackp0int Jan 23 '16 at 11:28
You can. But it is much more bleeding edge (and needless for me as webpack already does everything I need it to) – basarat Jan 24 '16 at 22:30

Uncaught ReferenceError: exports is not defined and require

3 Answers3

Linked