These are chat archives for systemjs/systemjs

1st
Jul 2016
scriptjs
@scriptjs
Jul 01 2016 02:59
Hello, exploring es6 module loader to attempt to load plugins dynamically using a variable for module name: ie
import { System } from 'es6-module-loader'

registerPlugin(name, callback) {
  System.import(module).then((plugin) => {
    let module = `test-plugin-${name}`
    plugin.register((err, config) => {
      if (err) {
        callback(err, null)
      }
      debug(`plugin ${name} registered`)
      callback(null, config)
    })
  }).catch((err) => {
    debug(err);
  })
})
So the issue for me having it get the module from node_modules
Since it will seek the module by default in the cwd
I saw that if I use System.paths I can help it look in certain locations
but it does not play by same rules as node modules in cjs or es6
and have to give it a direct path to a file including an index.js
so I cannot do something like:
scriptjs
@scriptjs
Jul 01 2016 03:05
System.paths[‘’] = ‘node_modules/'
hmm formatting got lost
System.paths[‘*’] = ‘node_modules/*’
which should then look for my plugins there. ie test-plugin-banner looked up in node_modules/test-plugin-banner
scriptjs
@scriptjs
Jul 01 2016 03:10
it does not work that way. I have to spell out the path to my module’s lib index.js to get to it
So this is does not seem right and I must be missing something for use in node
Can anyone help?
Michael Bøcker-Larsen
@mblarsen
Jul 01 2016 03:31
@scriptjs I suggest that you use a config object like:
System.config({
  baseURL: ‘node_modules’,
  map: {
    ‘test-plugin-banner’: ‘test-plugin-banner/dist/banner.min.js’
  }
})

you can also use the ‘packages’ key to specfiy the main like this:

System.config({
  baseURL: ‘node_modules’,
  packages: {
    ‘test-plugin-banner’: { main: ‘dist/banner.js’ }
  }
})

you can ommit the .js if you enable defaultJSExtensions: true

See more in the config.md
scriptjs
@scriptjs
Jul 01 2016 03:34
Hi Michael. That looks like right direction. I will give this a try
many thanks.
Michael Bøcker-Larsen
@mblarsen
Jul 01 2016 03:35
@scriptjs good. There are serveral ways to achieve the same. It can be confusing.
scriptjs
@scriptjs
Jul 01 2016 03:35
I guess I am a bit confused whether I should be using systemjs vs es6-module-loader here.
I started with es6-module-loader but seems this may not have as much flexibility
Michael Bøcker-Larsen
@mblarsen
Jul 01 2016 03:37
If you are using import in your es6 I believe you have to use something like System.js. Unless you transpile your es6 first. I’m not sure.
scriptjs
@scriptjs
Jul 01 2016 03:39
I use babel for transpiling currently and webpack for publishing
will let you know whether I get this working
Michael Bøcker-Larsen
@mblarsen
Jul 01 2016 03:40
Ok :)
scriptjs
@scriptjs
Jul 01 2016 03:40
thanks for your help :)
Michael Bøcker-Larsen
@mblarsen
Jul 01 2016 03:40
np
Michael Bøcker-Larsen
@mblarsen
Jul 01 2016 04:34

When using system system-csp-production.js I’m getting the following error when System.js tries to load the systemjs-plugin-text plugin:

(SystemJS) Error: http://192.168.40.40:8000/js/pages/products/catalog.html!http://192.168.40.40:8000/vendor/systemjs-plugin-text/text.js did not call System.register or AMD define. If loading a global module configure the global name via the meta exports property for script injection support.

This is my config:

System.config({
  baseURL: '/',
  defaultJSExtensions: true,
  transpiler: 'babel',
  meta: {
    'vendor*': { format: 'global' },
    'vendor/systemjs-plugin-text/text.js': { format: ‘cjs' },
  },
  map: {
    babel: 'vendor/babel/browser.js',
    text: 'vendor/systemjs-plugin-text/text.js’,

})
I tried using amd instead of cjs but some problem. This only occurs when using system-csp-production.js and not for system.js
Is vendor* overriding the the more specific meta entry?
Also the URL seems odd to me. Why is it appending to the current URL? is that a part of CSP?
Michael Bøcker-Larsen
@mblarsen
Jul 01 2016 04:40
Hmm I guess that is the problem because http://192.168.40.40:8000/js/pages/products/catalog.html!http://192.168.40.40:8000/vendor/systemjs-plugin-text/text.js is a 404 with some HTML
But why would it fetch that URL?
Michael Bøcker-Larsen
@mblarsen
Jul 01 2016 05:12
Screenshot 2016-07-01 13.09.41.png
I’m wondering if name at this point shouldn’t have been spilt up and the plugin loaded?
Jeff Reese
@jeffreese
Jul 01 2016 05:15
@mblarsen I am seeing some weird syntax that could be causing the issue
you have some ` where there should be '
Michael Bøcker-Larsen
@mblarsen
Jul 01 2016 05:16
@jeffreese Where are you seeing that? (not just gitter messing with me copy’n’paste?)
Jeff Reese
@jeffreese
Jul 01 2016 05:16
gimme a sec, let me reformat real quick and repost
Michael Bøcker-Larsen
@mblarsen
Jul 01 2016 05:16
Sure, thanks
@jeffreese but like i mentioned in my last comment it seems that that a wrong URL is build up for when fetching the plugin.
Jeff Reese
@jeffreese
Jul 01 2016 05:18
System.config({
  baseURL: '/',
  defaultJSExtensions: true,
  transpiler: 'babel',
  meta: {
    'vendor*': { format: 'global' },
    'vendor/systemjs-plugin-text/text.js': { format: 'cjs' },
  },
  map: {
    babel: 'vendor/babel/browser.js',
    text: 'vendor/systemjs-plugin-text/text.js'
  }

});
Michael Bøcker-Larsen
@mblarsen
Jul 01 2016 05:19
http://192.168.40.40:8000/js/pages/products/catalog.html!http://192.168.40.40:8000/vendor/systemjs-plugin-text/text.js likely from:
/pages/products/catalog.html!text
Jeff Reese
@jeffreese
Jul 01 2016 05:19
the map object wasn’t closed properly
Michael Bøcker-Larsen
@mblarsen
Jul 01 2016 05:19
@jeffreese yeah that’s just gitter messing with us
hehe
Jeff Reese
@jeffreese
Jul 01 2016 05:19
gothca..
Michael Bøcker-Larsen
@mblarsen
Jul 01 2016 05:20
Also note this only happens with system-csp-production.js and not system.js
Jeff Reese
@jeffreese
Jul 01 2016 05:20
hmm
Michael Bøcker-Larsen
@mblarsen
Jul 01 2016 05:20
Config and all is the same.
Could it be that csp loads plugins differently?
I guess the whole point of CSP is to load resources in a special conformant way no?
Jeff Reese
@jeffreese
Jul 01 2016 05:22
doing some research real quick
Jeff Reese
@jeffreese
Jul 01 2016 05:34
shrug I dunno… I haven’t used the CSP version. Nothing is glaring to me. Sorry, I can’t be of much help.
Michael Bøcker-Larsen
@mblarsen
Jul 01 2016 05:35
It is okay. Do you mind sharing your thoughts? I mean what did you research?
I was trying to figure out why the URL ends up being the document to fetch + the plugin url but didn’t find it
Jeff Reese
@jeffreese
Jul 01 2016 05:37
Oh, I was just looking into the CSP implementation to see how it is different...
Michael Bøcker-Larsen
@mblarsen
Jul 01 2016 05:38
Ok. Nothing poped out? or was too different?
Jeff Reese
@jeffreese
Jul 01 2016 05:39
Not that I could see...
Michael Bøcker-Larsen
@mblarsen
Jul 01 2016 05:39
Ok, thanks anyway :)
Jeff Reese
@jeffreese
Jul 01 2016 05:39
So you are having to use this for some specific security requirements?
Michael Bøcker-Larsen
@mblarsen
Jul 01 2016 05:39
No not at all.
So you are telling me to just use system.js?
Jeff Reese
@jeffreese
Jul 01 2016 05:40
Well, if you don’t have any specific reason to use the CSP version, I would
the bottom part of that article talks about CSP specifically
Michael Bøcker-Larsen
@mblarsen
Jul 01 2016 05:40
Ok thanks. I’ll read it
Jeff Reese
@jeffreese
Jul 01 2016 05:41
Gotta run. Good luck!
Michael Bøcker-Larsen
@mblarsen
Jul 01 2016 05:41
Thanks Jeff ;)
Ugh, it actually says that you’ll need to use bundle for csp. That wasn’t mentioned anywhere. But I’ll go with the non csp version for now.
Michael Bøcker-Larsen
@mblarsen
Jul 01 2016 05:46
@jeffreese awesome blog-series. Thanks a lot
Michael Bøcker-Larsen
@mblarsen
Jul 01 2016 07:14
When using transpiler: ‘babel’ what packages to use to:
  1. transpile when using systemjs-builder
  2. transpile when running in browser
    I’m asking because my transpiled code (when building) is trying to find the file external-helpers.js a file that I cannot find in neither babel (npm babel) nor babel-core (npm babel-core).
Vlado Tesanovic
@vladotesanovic
Jul 01 2016 07:26
Did anyone succeeded to bundle Angular 2 dependencies ( shim, zone, Reflect and System.js ) into one file and how?
Michael Bøcker-Larsen
@mblarsen
Jul 01 2016 07:28
@vladotesanovic For angular 1 but here is a seed for doing sohttps://github.com/swimlane/angular1-systemjs-seed/
Vlado Tesanovic
@vladotesanovic
Jul 01 2016 07:30
@mblarsen It's easier to do that with Angular 1 because it does not have external deps
Michael Bøcker-Larsen
@mblarsen
Jul 01 2016 07:30
Ok sorry I didn’t know
I just happened to be looking at the seed when you wrote :)
Vlado Tesanovic
@vladotesanovic
Jul 01 2016 07:32
ah :) thx anyway, i am exploring bundling and build static with + operator
i am getting weird messages like: Module 4 is not on place...
Vlado Tesanovic
@vladotesanovic
Jul 01 2016 07:40
to be precise: Uncaught Module 4 not present. but everything works
Michael Bøcker-Larsen
@mblarsen
Jul 01 2016 09:08
I’m not sure what that error means
Is the gitter also for systems-builder?
In that case I have a problem with this glob when doing arithmetics js/{,*/}*.js I seems to match nothing. What is used internally to expand globs?
Florian Verdonck
@nojaf
Jul 01 2016 09:32
Hi
Does anyone have experience with the encapsulateGlobal:true option in the meta section of a config?
Carles Andrés
@carlesandres
Jul 01 2016 11:05
Hi everyone! I need to dynamically import a particular javascript resource with System.import that doesn't have the .js extension.
Is there a way to force System.import to interpret the resource as Javascript?
In particular, I want to do System.import('//cdn.polyfill.io/v2/polyfill.min.js?features=Intl.~locale.fr|always')
Guy Bedford
@guybedford
Jul 01 2016 12:11
@carlesandres I'd suggest disabling defaultJSExtensions if you can (ie if not using jspm 0.16!)
scriptjs
@scriptjs
Jul 01 2016 12:34
@guybedford I am trying to use systemjs to dynamically load plugins for a nodejs project in es6 but failing. I set up a base url and a paths with wild card to the module prefix with a path to locate them in node modules. The problem is it is going through dependencies including native modules and erroring on these. Is there anything special here so this knows about the native modules?
for example it finds a dep with “path” then fails loading a file containing it
This is an exercise at this point in attempting to use s6-module-loader or systemjs as a replacement for a require that constructs the name of the module to be required
in code that is otherwise all es6
scriptjs
@scriptjs
Jul 01 2016 12:41
I think the only other way of doing this atm is a context plugin with webpack
Carles Andrés
@carlesandres
Jul 01 2016 13:49
@guybedford I'm actually using jspm 0.16.35! I'm trying a possible solution now (althought not super nice) which is to create a entry in 'paths' for the polyfill.io service and then a package for that path which takes care of disabling the defaultJSExtensions for it. It seems to be doing the trick (not 100% sure yet).
Carles Andrés
@carlesandres
Jul 01 2016 14:39
I can confirm that solution works for me
Carles Andrés
@carlesandres
Jul 01 2016 15:39
My mistake. It worked fine locally, but not after compiling. :(
Jake Niemiec
@jakeNiemiec
Jul 01 2016 17:51
@carlesandres Do you have a link to your solution? I was trying to fix a nasty issue with Intl using polyfill.io but I could never get it to load into the global scope.
Sean G. Wright
@sgwatgit
Jul 01 2016 17:53

hello - i'm having an issue with this combination : Angular 1.5, JSPM, Typescript, SystemJs Text Plugin
I have import template from "./my-app.component.html"; in my my-app.component.ts
i try to bundle using this command jspm bundle app --minify --inject

my error is

jspm bundle app --inject

     Building the bundle tree for app...

err  Error on translate for app/components/my-app/my-app.component.html!github:systemjs/plugin-text@0.0.8.js at file:///C:/dev/demos/angular1.5-typescript-jspm-starter-kit/app/components/my-app/my-app.component.html!file:///C:/dev/demos/angular1.5-typescript-jspm-starter-kit/jspm_packages/github/systemjs/plugin-text@0.0.8.js
        Loading app/components/my-app/my-app.component.js
        Loading app/main.js
        (SystemJS) Error: ENOENT: no such file or directory, open 'C:\dev\demos\angular1.5-typescript-jspm-starter-kit\none.js'
            at Error (native)
        Error loading C:/dev/demos/angular1.5-typescript-jspm-starter-kit/none.js
Jake Niemiec
@jakeNiemiec
Jul 01 2016 17:56
make sure C:/dev/demos/angular1.5-typescript-jspm-starter-kit/none.js exists
Sean G. Wright
@sgwatgit
Jul 01 2016 17:56
why is anything looking for none.js ?
Jake Niemiec
@jakeNiemiec
Jul 01 2016 17:57
—and the permissions are not preventing the builder from seeing it
app/main.js calls it
Sean G. Wright
@sgwatgit
Jul 01 2016 17:58
hmm - there is no import for none.js in the app.
i added the file and got a new error
 Loading app/components/my-app/my-app.component.js
        Loading app/main.js
        TypeError: babel.transform is not a function
Jake Niemiec
@jakeNiemiec
Jul 01 2016 17:59
It looks like you are trying to transpile typescript using babel
Sean G. Wright
@sgwatgit
Jul 01 2016 17:59
here is my config.js
System.config({
  baseURL: "/",
  defaultJSExtensions: true,
  transpiler: false,
  paths: {
    "github:*": "jspm_packages/github/*"
  },

  packages: {
    "app": {
      "main": "main.js",
      "defaultJSxtension": "js"
    }
  },

  map: {
    "angular": "github:angular/bower-angular@1.5.7",
    "text": "github:systemjs/plugin-text@0.0.8"
  }
});
no reference to babel
when i run the app without bundling, everything works lovely
Jake Niemiec
@jakeNiemiec
Jul 01 2016 18:02
Typo defaultJSxtension
Sean G. Wright
@sgwatgit
Jul 01 2016 18:03
good catch! ... still get the babel.transform error :(
David
@DavidStrada
Jul 01 2016 18:03
@sgwatgit try transpiler: “”
per docs
transpiler

Type: String Default: traceur
Jake Niemiec
@jakeNiemiec
Jul 01 2016 18:04
I would reccomend scrubbing it and running jspm init and reinstalling your deps by hand
Sean G. Wright
@sgwatgit
Jul 01 2016 18:05
@DavidStrada that works now when i run jspm bundle app --inject but still fails on jspm bundle app --minify --inject
@jakeNiemiec ok i'll give that a try
David
@DavidStrada
Jul 01 2016 18:06
@sgwatgit same error ?
Sean G. Wright
@sgwatgit
Jul 01 2016 18:09
@jakeNiemiec jspm init solved it
filled out the config.js and now everything seems to be working
David
@DavidStrada
Jul 01 2016 18:09
mm
Sean G. Wright
@sgwatgit
Jul 01 2016 18:11
that's a nice trick i did not know - i'll put that in my mental toolbox
thanks guys! i can now get started on this project
Jake Niemiec
@jakeNiemiec
Jul 01 2016 18:23
👌
Jake Niemiec
@jakeNiemiec
Jul 01 2016 18:32
Support_SystemJS_-_SupporterHQ.jpg
Good job to anyone who donated!
Sean G. Wright
@sgwatgit
Jul 01 2016 18:57
where does this donating happen?
Sean G. Wright
@sgwatgit
Jul 01 2016 19:02
cool. thanks!
Jake Niemiec
@jakeNiemiec
Jul 01 2016 19:02
Hold on, it’s the 1st today, that meat it must be getting $2520 in monthly donations, which is great!
Sean G. Wright
@sgwatgit
Jul 01 2016 19:06

donated!

i talked with rob wormald at ng-conf this year and it was nice to hear he was a fan of jspm. i wish it had the support and community that webpack does