CODEWITHSUNDEEP
angulartypescript
padhu
padhu

Reputation: 155

Error: (SystemJS) exports is not defined

I am working on an .net core mvc + angular application. The mvc framework handles the user management and when the user lands on particular areas of the application, angular takes over. So when I added one angular-2 (stats) app to the site and it was working. I needed to implement another functionality so I added another angular-2 app (practices) to the same solution. Everything was fine. Angular-4 came up. So changed the references to angular-4 and since I was working on the 2nd angular app did not check on the 1st angular app for a while. Now when I try to run the 1st angular app (stats) I get this error while the 2nd app loads angular.

Both apps share the systemjs.config.js, package.json, tsconfig.json, typings.json.

The error:

Error: (SystemJS) exports is not defined
ReferenceError: exports is not defined
    at eval (http://localhost:60660/apps/common/date.extentions.js:2:23)
    at eval (<anonymous>)
    at Object.eval (http://localhost:60660/apps/common/daterange.component.js:13:1)
    at eval (http://localhost:60660/apps/common/daterange.component.js:40:4)
    at eval (http://localhost:60660/apps/common/daterange.component.js:41:3)
    at eval (<anonymous>)
Evaluating http://localhost:60660/apps/common/date.extentions.js
Evaluating http://localhost:60660/apps/common/daterange.component.js
Evaluating http://localhost:60660/apps/stats/app.module.js
Evaluating http://localhost:60660/apps/stats/main.js
Error loading http://localhost:60660/apps/stats/main.js
    at eval (http://localhost:60660/apps/common/date.extentions.js:2:23)
    at eval (<anonymous>)
    at Object.eval (http://localhost:60660/apps/common/daterange.component.js:13:1)
    at eval (http://localhost:60660/apps/common/daterange.component.js:40:4)
    at eval (http://localhost:60660/apps/common/daterange.component.js:41:3)
    at eval (<anonymous>)
Evaluating http://localhost:60660/apps/common/date.extentions.js
Evaluating http://localhost:60660/apps/common/daterange.component.js
Evaluating http://localhost:60660/apps/stats/app.module.js
Evaluating http://localhost:60660/apps/stats/main.js
Error loading http://localhost:60660/apps/stats/main.js

systemjs.config.js

(function (global) {
    System.config({
        paths: {
            // paths serve as alias
            'npm:': 'node_modules/'
        },
        // map tells the System loader where to look for things
        map: {
            // our app is within the app folder
            stats: 'apps/stats/',
            practices: 'apps/practices',

            // angular bundles
            '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
            '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
            '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
            '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
            '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
            '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
            '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
            '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',

            // other libraries
            'rxjs': 'npm:rxjs',
            'angular-in-memory-web-api': 'npm:angular-in-memory-web-api'
        },
        // packages tells the System loader how to load when no filename and/or no extension
        packages: {
            stats: {
                main: 'main.js',
                defaultExtension: 'js'
            },
            practices: {
                main: 'main.js',
                defaultExtension: 'js'
            },
            rxjs: {
                defaultExtension: 'js'
            },
            'angular-in-memory-web-api': {
                main: 'index.js',
                defaultExtension: 'js'
            }
        }
    });
})(this);

package.json

{
  "version": "1.0.0",
  "name": "asp.net",
  "private": true,
  "scripts": {
    "start": "tsc && concurrently \"tsc -w\" \"lite-server\" ",
    "lite": "lite-server",
    "postinstall": "typings install",
    "tsc": "tsc",
    "tsc:w": "tsc -w",
    "typings": "typings"
  },
  "dependencies": {
    "@angular/common": "~4.0.0",
    "@angular/compiler": "~4.0.0",
    "@angular/core": "~4.0.0",
    "@angular/forms": "~4.0.0",
    "@angular/http": "~4.0.0",
    "@angular/platform-browser": "~4.0.0",
    "@angular/platform-browser-dynamic": "~4.0.0",
    "@angular/router": "~4.0.0",
    "@types/node": "^7.0.13",
    "angular-in-memory-web-api": "~0.3.0",
    "core-js": "2.4.1",
    "reflect-metadata": "0.1.8",
    "rxjs": "5.3.0",
    "spinkit": "1.2.5",
    "systemjs": "0.19.39",
    "typescript": "2.2.1",
    "zone.js": "0.8.5"
  },
  "devDependencies": {
    "@types/core-js": "^0.9.34",
    "concurrently": "3.1.0",
    "gulp": "3.9.1",
    "gulp-concat": "2.6.0",
    "gulp-cssmin": "0.1.7",
    "gulp-environments": "0.1.1",
    "gulp-rimraf": "0.2.0",
    "gulp-uglify": "2.0.0",
    "lite-server": "2.2.2",
    "typescript": "2.2.1",
    "typings": "~2.1.1"
  }
}

tsconfig.json

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

    "exclude": [
      "node_modules",
      "wwwroot/lib",
      "typings"
    ]

  }

typings.json

{
  "globalDependencies": {
    "core-js": "registry:dt/core-js#0.0.0+20160602141332",
    "jasmine": "registry:dt/jasmine#2.2.0+20160621224255",
    "node": "registry:dt/node#7.0.0+20170110233017"
  }
}

date.extensions.ts

export { }

// DATE EXTENSIONS
// ================

declare global {
    interface Date {
        addDays(days: number, useThis?: boolean): Date;
        isToday(): boolean;
        clone(): Date;
        isAnotherMonth(date: Date): boolean;
        isWeekend(): boolean;
        isSameDate(date: Date): boolean;
        yyyy_mm_dd(): string;
    }
}

Date.prototype.addDays = function (days: number): Date {
    if (!days) return this;
    console.log(this);
    let date = this;
    date.setDate(date.getDate() + days);

    return date;
};

Date.prototype.isToday = function (): boolean {
    let today = new Date();
    return this.isSameDate(today);
};

Date.prototype.clone = function (): Date {
    return new Date(+this);
};

Date.prototype.isAnotherMonth = function (date: Date): boolean {
    return date && this.getMonth() !== date.getMonth();
};

Date.prototype.isWeekend = function (): boolean {
    return this.getDay() === 0 || this.getDay() === 6;
};

Date.prototype.isSameDate = function(date: Date): boolean {
    return date && this.getFullYear() === date.getFullYear() && this.getMonth() === date.getMonth() && this.getDate() === date.getDate();
};

Date.prototype.yyyy_mm_dd = function (): string {
    var mm = (this.getMonth() + 1).toString(); // getMonth() is zero-based
    var dd = this.getDate().toString();

    return [this.getFullYear(), '-', mm.length === 2 ? '' : '0', mm, '-', dd.length === 2 ? '' : '0', dd].join(''); // padding
}

date.extensions.js

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
Date.prototype.addDays = function (days) {
    if (!days)
        return this;
    console.log(this);
    var date = this;
    date.setDate(date.getDate() + days);
    return date;
};
Date.prototype.isToday = function () {
    var today = new Date();
    return this.isSameDate(today);
};
Date.prototype.clone = function () {
    return new Date(+this);
};
Date.prototype.isAnotherMonth = function (date) {
    return date && this.getMonth() !== date.getMonth();
};
Date.prototype.isWeekend = function () {
    return this.getDay() === 0 || this.getDay() === 6;
};
Date.prototype.isSameDate = function (date) {
    return date && this.getFullYear() === date.getFullYear() && this.getMonth() === date.getMonth() && this.getDate() === date.getDate();
};
Date.prototype.yyyy_mm_dd = function () {
    var mm = (this.getMonth() + 1).toString(); // getMonth() is zero-based
    var dd = this.getDate().toString();
    return [this.getFullYear(), '-', mm.length === 2 ? '' : '0', mm, '-', dd.length === 2 ? '' : '0', dd].join(''); // padding
};
//# sourceMappingURL=date.extentions.js.map

Upvotes: 5

Views: 3104

Answers (1)

Aluan Haddad
Aluan Haddad

Reputation: 31823

Either remove the export {} from apps/common/date.extensions.ts or specify a module format of "cjs" explicitly.

SystemJS uses module format detection to determine which variables need to be provided in order for the module to be loaded. However, it will not recognize your date.extensions.js as CommonJS since there are no assignments to module.exports and no require calls (1).

To set the module format explicitly, add

packages: {
  "apps/common/date.extensions.js": {
    "format": "cjs"   
  },
  // ...
}

SystemJS will now use this metadata instead of a heuristic to determine the format and will therefore provide an exports object when it loads the module.

Alternately, since the file doesn't need to be a module, you can remove the export {} and the declare global wrapper.

  1. Among other things, this involves regular expressions that attempt to detect CommonJS by searching for patterns such as /exports\.*"\s*=\s*.+/g. This isn't foolproof however, especially given that certain module formats that SystemJS detects are partial supersets of others. For example, an AMD module can match the same regular expression because it provides its own CommonJS compatibility layer. That said, SystemJS module format detection is powerful and allows many discordant module systems to interact automatically and correctly with no configuration required. Guy Bedford has done truly remarkable work.

Upvotes: 6

Related Questions