These are chat archives for systemjs/systemjs

7th
Jul 2016
Ajay Ambre
@ajayambre
Jul 07 2016 06:18
Michael Bøcker-Larsen
@mblarsen
Jul 07 2016 13:17
@mikec-c I'll have a look thanks
Mike
@mikec-c
Jul 07 2016 18:43
turns out my issue was just a cyclical dependency, and systemjs resolved module to Object, instead of the actual module, or showing a specific error message
Daniel Ram
@danieldram
Jul 07 2016 19:23
HI there, if I am using babel as a transpiler and then use ES6 module syntax within the app. I get the error that 'exports is not defined' and have to use commonjs rather than the new spec for my project. Is there a way to be able to use both?
Tian
@TianCNCA
Jul 07 2016 19:38
Hi everyone I'm new to systemjs and I don't understand some of its behaviour. For example, when does systemjs want to load the package.json file of a module and why does it need that?

To make my question have more sense, here is my configuration code:
'''
protected SYSTEM_CONFIG_DEV: any = {
defaultJSExtensions: true,
packageConfigPaths: [
/node_modules/*/package.json,
/node_modules/**/package.json,
/node_modules/@angular/*/package.json,
/node_modules/@vaadin/*/package.json,
/node_modules/angular2-oauth2/package.json
],
paths: {

  [this.BOOTSTRAP_MODULE]: `${this.APP_BASE}${this.BOOTSTRAP_MODULE}`,
  '@angular/common': `node_modules/@angular/common/bundles/common.umd.js`,
  '@angular/compiler': `node_modules/@angular/compiler/bundles/compiler.umd.js`,
  '@angular/core': `node_modules/@angular/core/bundles/core.umd.js`,
  '@angular/forms': `node_modules/@angular/forms/bundles/forms.umd.js`,
  '@angular/http': `node_modules/@angular/http/bundles/http.umd.js`,
  '@angular/platform-browser': `node_modules/@angular/platform-browser/bundles/platform-browser.umd.js`,
  '@angular/platform-browser-dynamic': `node_modules/@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js`,
  '@angular/router': `node_modules/@angular/router/index.js`,
  '@vaadin/angular2-polymer': `node_modules/@vaadin/angular2-polymer/index.js`,
  'angular2-oauth2/oauth-service': `node_modules/angular2-oauth2/oauth-service.js`,
  'rxjs/*': `node_modules/rxjs/*`,
  'app/*': `/app/*`,
  '*': `node_modules/*`
},
packages: {
    rxjs: { defaultExtension: false },
    oauth2: {
        "format": "register",
        "defaultExtension": "js"
    }
}  

'''

Tian
@TianCNCA
Jul 07 2016 19:45
And when I launch my app with this config, I get errors saying that SystemJS is trying to load /node_modules/node_modules/package.json. That's right, /node_modules/node_modules, I can't see where I configured it wrong
Please help!
Jake Niemiec
@jakeNiemiec
Jul 07 2016 20:11
You dropped these: ```
Tian
@TianCNCA
Jul 07 2016 20:12
Sorry my bad I'll repost
Jake Niemiec
@jakeNiemiec
Jul 07 2016 20:13
I can’t really work out what you are trying to do with your package.json
Note that you can edit your message
Tian
@TianCNCA
Jul 07 2016 20:13
protected SYSTEM_CONFIG_DEV: any = {
defaultJSExtensions: true,
packageConfigPaths: [
/node_modules/*/package.json,
/node_modules/**/package.json,
/node_modules/@angular/*/package.json,
/node_modules/@vaadin/*/package.json,
/node_modules/angular2-oauth2/package.json
],
paths: {
  [this.BOOTSTRAP_MODULE]: `${this.APP_BASE}${this.BOOTSTRAP_MODULE}`,
  '@angular/common': `node_modules/@angular/common/bundles/common.umd.js`,
  '@angular/compiler': `node_modules/@angular/compiler/bundles/compiler.umd.js`,
  '@angular/core': `node_modules/@angular/core/bundles/core.umd.js`,
  '@angular/forms': `node_modules/@angular/forms/bundles/forms.umd.js`,
  '@angular/http': `node_modules/@angular/http/bundles/http.umd.js`,
  '@angular/platform-browser': `node_modules/@angular/platform-browser/bundles/platform-browser.umd.js`,
  '@angular/platform-browser-dynamic': `node_modules/@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js`,
  '@angular/router': `node_modules/@angular/router/index.js`,
  '@vaadin/angular2-polymer': `node_modules/@vaadin/angular2-polymer/index.js`,
  'angular2-oauth2/oauth-service': `node_modules/angular2-oauth2/oauth-service.js`,
  'rxjs/*': `node_modules/rxjs/*`,
  'app/*': `/app/*`,
  '*': `node_modules/*`
},
packages: {
    rxjs: { defaultExtension: false },
    oauth2: {
        "format": "register",
        "defaultExtension": "js"
    }
}
It doesn't let me edit :(
Daniel Ram
@danieldram
Jul 07 2016 20:14
What I don't understand is if the transpiler is written in with commonjs and you use ES6 modules in your app, you get exports is not defined. How do you avoid this?
Tian
@TianCNCA
Jul 07 2016 20:15
@jakeNiemiec I'm using the Angular2 seed project https://github.com/mgechev/angular2-seed, are you familiar with that?
To be honest I don't understand the package.json part either
Maybe I should just go and create an issue on their github page...
But I feel like this is more a SystemJS issue
Daniel Ram
@danieldram
Jul 07 2016 20:18
Has anyone used babel as the transpiler, with presets ES2015 and commonjs plugins and still get export is not defined?
Jake Niemiec
@jakeNiemiec
Jul 07 2016 20:19
I still cannot work it out, they are doing something weird here https://github.com/mgechev/angular2-seed/blob/master/src/client/index.html#L28
Tian
@TianCNCA
Jul 07 2016 20:20
The parsed html looks like this:
 System.config({
  "defaultJSExtensions": true,
  "packageConfigPaths": [
    "/node_modules/*/package.json",
    "/node_modules/**/package.json",
    "/node_modules/@angular/*/package.json",
    "/node_modules/@vaadin/*/package.json",
    "/node_modules/angular2-oauth2/package.json"
  ],
  "paths": {
    "app/main": "/app/main",
    "@angular/common": "node_modules/@angular/common/bundles/common.umd.js",
    "@angular/compiler": "node_modules/@angular/compiler/bundles/compiler.umd.js",
    "@angular/core": "node_modules/@angular/core/bundles/core.umd.js",
    "@angular/forms": "node_modules/@angular/forms/bundles/forms.umd.js",
    "@angular/http": "node_modules/@angular/http/bundles/http.umd.js",
    "@angular/platform-browser": "node_modules/@angular/platform-browser/bundles/platform-browser.umd.js",
    "@angular/platform-browser-dynamic": "node_modules/@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js",
    "@angular/router": "node_modules/@angular/router/index.js",
    "@vaadin/angular2-polymer": "node_modules/@vaadin/angular2-polymer/index.js",
    "angular2-oauth2/oauth-service": "node_modules/angular2-oauth2/oauth-service.js",
    "rxjs/*": "node_modules/rxjs/*",
    "app/*": "/app/*",
    "*": "node_modules/*"
  },
  "packages": {
    "rxjs": {
      "defaultExtension": false
    },
    "angular2-oauth2": {
      "baseURL": "/",
      "defaultExtension": "js",
      "map": {
        "base64-js": "node_modules/base64-js/lib/b64.js",
        "buffer": "node_modules/buffer/index.js",
        "convert-hex": "node_modules/convert-hex/convert-hex.js",
        "convert-string": "node_modules/convert-string/convert-string.js",
        "ieee754": "node_modules/ieee754/index.js",
        "isarray": "node_modules/isarray/index.js",
        "js-base64": "node_modules/js-base64/base64.js",
        "sha256": "node_modules/sha256/lib/sha256.js"
      }
    }
  }
})
And Chrome reports this error:
Error: (SystemJS) Error: XHR error (404 Not Found) loading http://localhost:5555/node_modules/node_modules/package.json
I have no idea why it wants that
The full error message reads like this:
Error: (SystemJS) Error: XHR error (404 Not Found) loading http://localhost:5555/node_modules/node_modules/package.json
at XMLHttpRequest.wrapFn [as _onreadystatechange] (http://localhost:5555/node_modules/zone.js/dist/zone.js?1467922711031:769:30)
at ZoneDelegate.invokeTask (http://localhost:5555/node_modules/zone.js/dist/zone.js?1467922711031:356:38)
at Zone.runTask (http://localhost:5555/node_modules/zone.js/dist/zone.js?1467922711031:256:48)
at XMLHttpRequest.ZoneTask.invoke (http://localhost:5555/node_modules/zone.js/dist/zone.js?1467922711031:423:34)
Error loading http://localhost:5555/node_modules/node_modules/package.json
Error loading http://localhost:5555/node_modules/angular2-oauth2/oauth-service.js as "angular2-oauth2/oauth-service" from http://localhost:5555/app/app.component.js
This is the repo of the angular2-oauth2 module I'm trying to use
Tian
@TianCNCA
Jul 07 2016 21:50
I think I found the problem. It's because some of angular2-oauth2's dependencies have their own dependencies and if I provide an absolute map for them all the modules can be loaded successfully.
Not sure if this is the best approach and I still don't understand why SystemJS wants to load /node_modules/node_modules/package.json