These are chat archives for systemjs/systemjs

2nd
Dec 2016
madmed88
@madmed88
Dec 02 2016 12:55
Hi, we have a big project that used requirejs and we wanted to switch to be able to load cjs modules. I tried webpack but it didn't work for us because we have dynamic resources that we load in runtime. So I am trying SystemJS and it worked since I could use System.import to load these dependencies.
But I want to use an sfx bundle in production (we used r.js before) and it says that it can't find System.import.
Is there a way to have an sfx bundle and use System.import?
Gert Sønderby
@gertsonderby
Dec 02 2016 13:07
@madmed88 You may need to import Systemjs separately, along with the appropriate config.
madmed88
@madmed88
Dec 02 2016 13:13
I don't want the systemjs config file to be readable. is there a way to include it in the bundle and minify it?
Gert Sønderby
@gertsonderby
Dec 02 2016 13:15
I've made that happen, but I can't remember how. :-(
madmed88
@madmed88
Dec 02 2016 16:00
thanks. Can anybody else help me?
Nick George
@Izzmo
Dec 02 2016 16:28
@madmed88 I haven't gotten it to work when using System.Import explicitly
it works with the standard import/export operators.. but not the System.Import function itself. This actually forced my team to just convert fully over to TypeScript/ES6 from our huge AMD module system.
Nick George
@Izzmo
Dec 02 2016 17:20
jspm install is the most irritating thing ever. It never likes the format a package.json is given in. Frustrating as shit.
Joel Denning
@joeldenning
Dec 02 2016 17:26
@madmed88 Where I work we have several sfx bundles which use System.import inside of the bundles.
In order to get that working, you have to add a <script> tag for system.js though, in addition to the sfx bundle
madmed88
@madmed88
Dec 02 2016 17:30
thanks I will try to include system.js and the sfx bundle.
Joel Denning
@joeldenning
Dec 02 2016 17:30
The reason is that sfx bundles are able to stand alone without systemjs, so all of the modules that were bundled into an sfx bundle are not actually registered into systemjs
Another thing to consider is that whatever module you are using System.import for must be inside of the config.js file.
(or jspm.config.js if you are using jspm@0.17)
You will also need to do <script src=“config.js”></script> after you do <script src=“jspm_packages/system.js”></script>
Otherwise it’s unlikely that systemjs will know where to download the code for whichever module you’re trying to System.import
Can I ask why you are using System.import inside of your sfx bundle? Why not just import?
madmed88
@madmed88
Dec 02 2016 17:36
I have a service that returns a list of script urls that I have to load
before I used requirejs(modules, bootstrap)
Joel Denning
@joeldenning
Dec 02 2016 17:37
I see. What module format are those script urls in?
madmed88
@madmed88
Dec 02 2016 17:37
amd
but I can change it to commonjs
Joel Denning
@joeldenning
Dec 02 2016 17:37
Ah yeah that makes sense. Yes you’ll need to <script src=“jspm_packages/system.js”></script> then
Bret Little
@blittle
Dec 02 2016 17:37
@madmed88 you might be interested in a SystemJS plugin that helps you dynamically load script urls: https://github.com/CanopyTax/sofe
Joel Denning
@joeldenning
Dec 02 2016 17:38
And amd format is totally fine
madmed88
@madmed88
Dec 02 2016 17:38
I got it to work with a non-sfx bundle
but I don't like that I have to include the systemjs config file
Joel Denning
@joeldenning
Dec 02 2016 17:39
Well are those script urls fully qualified urls?
Or are they something like relative paths or module names?
System.import(‘/full-path/to-script/file.js’)??
Or System.import(‘name-of-script’)
madmed88
@madmed88
Dec 02 2016 17:40
System.import(‘/servlet/path/file.js’)
Joel Denning
@joeldenning
Dec 02 2016 17:41
If you’re doing an absolute url, then you do not need to do <script src=“config.js”></script>
Are your amd scripts pre-compiled? Or are you wanting SystemJS to compile them in the browser?
madmed88
@madmed88
Dec 02 2016 17:41
not all of the files are absolute, I also have other modules that I import using 'import 'moduleNmae'
I pre compile all the files
I set transpile to false in systemjs
Joel Denning
@joeldenning
Dec 02 2016 17:43
Are the modules that you have import ‘moduleName’ inside of your sfx bundle? Inside of the AMD modules?
I guess where I’m going with this is that if you bundle down all import ‘moduleName’ statements into either an SFX bundle or an AMD bundle, then you are fine
madmed88
@madmed88
Dec 02 2016 17:44
no, the scripts that I load in runtime are sort of plugins to the main app
Joel Denning
@joeldenning
Dec 02 2016 17:45
Do the plugins System.import anything? Or do they only import?
madmed88
@madmed88
Dec 02 2016 17:46
my main.js file looks like this
import 'mainAppModule1';
import 'mainAppModule2';
...
Promise.all(plugins.map((m) => System.import(m))).then(bootstrap);
the plugins do only imports but some of the imports are from the main app
Joel Denning
@joeldenning
Dec 02 2016 17:47
Are the plugins bundled to AMD with jspm as well? Or some other way
madmed88
@madmed88
Dec 02 2016 17:48
no using browserify
and a prelude script to convert them to amd from commonjs
Joel Denning
@joeldenning
Dec 02 2016 17:50
Okay. So if you have a module called something like “common-utils.js”, that module is bundled into both the main app and the plugins
madmed88
@madmed88
Dec 02 2016 17:50
No the common-utils is only bundled with main app
Joel Denning
@joeldenning
Dec 02 2016 17:50
In other words, there are multiple copies of the shared modules
Oh
So are you putting common-utils as a dependency of the plugin AMD modules then?
madmed88
@madmed88
Dec 02 2016 17:51
If I include the sfx bundle and systemjs, the plugin does not find common-utils
but with SystemJs, SystemJS config, non-sfx bundle, it works
Joel Denning
@joeldenning
Dec 02 2016 17:52
I see. Yes that makes sense
Okay so here is what is going on (assuming that I’m still with you with all of this :))
When you do bundle-sfx, jspm creates a bundle that does not put the common-utils into the “SystemJS module registry"
madmed88
@madmed88
Dec 02 2016 17:53
I am not using jspm
Joel Denning
@joeldenning
Dec 02 2016 17:53
How are you doing bundle-sfx then? Are you using systemjs-builder directly?
madmed88
@madmed88
Dec 02 2016 17:53
yes
Joel Denning
@joeldenning
Dec 02 2016 17:54
I see. Okay so what I was saying is still correct then
sfx bundles do not register modules into the SystemJS registry
normal bundles do put modules into the SystemJS registry
So you have a couple of options to fix things
1) Don’t use an sfx bundle
2) Put the shared stuff into a normal bundle, put the non-shared stuff into an sfx bundle
Where I work, we do 2)
We have a common dependencies bundle that is built with a normal systemjs builder bundle (not sfx)
Then we have a main app bundle that is built with systemjs builder bundleSfx
Then our plugin apps are able to import the common dependencies.
Does that makes sense?
madmed88
@madmed88
Dec 02 2016 17:58
I'd like to do 2). But my common-utils is actually 'API' which imports most of the app modules. If I bundle it, I think it will be the same as 1)
Joel Denning
@joeldenning
Dec 02 2016 18:00
Hmm. Do the plugin apps import API? Or do they import other modules that are imported by API?
madmed88
@madmed88
Dec 02 2016 18:00
only API
Joel Denning
@joeldenning
Dec 02 2016 18:00
Are there some parts of API that don’t need to be shared?
Or does it all need to be shared
madmed88
@madmed88
Dec 02 2016 18:01
all of it can be used by plugins
I just bundled API and it didn't include everything
Do you think it will work if I include SystemJS, API bundle, main-app sfx bundle?
Joel Denning
@joeldenning
Dec 02 2016 18:03
I hope so! We do the same thing where I work
madmed88
@madmed88
Dec 02 2016 18:04
but I have to include the config for the API bundle
which is what I was looking to avoid
Joel Denning
@joeldenning
Dec 02 2016 18:04
Hmm. I think you can still avoid that
How do your plugin apps import API?
import API from ‘API’?
madmed88
@madmed88
Dec 02 2016 18:04
yes
I have some aliases that I uses in my imports in the API module
I will see if I can change that
Joel Denning
@joeldenning
Dec 02 2016 18:06
So you could potentially avoid including the entire config.js file if you just manually configure SystemJS for API
madmed88
@madmed88
Dec 02 2016 18:07
thank you @joeldenning for your help
I will try to make it work with a separate API
Joel Denning
@joeldenning
Dec 02 2016 18:07
no problem, I hope you get it working.
Here’s my suggestion: have something like this in your html file:
<script>
  SystemJS.config({
    map: {
      API: “./local-path-to-api.js”
    }
  })
</script>
It’s like a mini config.js
but much smaller
Nick George
@Izzmo
Dec 02 2016 18:14
@joeldenning that won't actually replace the System.Import in the files though..
Joel Denning
@joeldenning
Dec 02 2016 18:17
Right, but when you call System.import(‘API’), SystemJS looks in the “map” to see what API is
Nick George
@Izzmo
Dec 02 2016 18:18
That wont' solve his original question though right?
Joel Denning
@joeldenning
Dec 02 2016 18:19
I think it does. Unless I’m misunderstanding his original question.
He wanted to have an sfx bundle, but also be able to System.import(‘API’)
Nick George
@Izzmo
Dec 02 2016 18:21
I think you're right, I was just also thinking that maybe he was wanting the bundler to do more with those statements?
For example, as an SFX, putting that code from "API" in the same file, which it won't do.
Joel Denning
@joeldenning
Dec 02 2016 18:24
What do you mean by as an SFX, putting that code from "API" in the same file, which it won't do.? Not sure I understand
madmed88
@madmed88
Dec 02 2016 18:25
@joeldenning the API bundle should be an sfx bundle or a normal bundle?
Nick George
@Izzmo
Dec 02 2016 18:27
@joeldenning meaning when the page executes.. a subsequent call will be made to get "API," it won't be bundled with everything else.
I suppose you could have another process to do it for you though and concatenate it all
/shrug
Joel Denning
@joeldenning
Dec 02 2016 18:28
@madmed88 the API bundle should be a normal bundle, not an sfx
The way to remember is that bundle puts modules into the SystemJS registry so that other things can System.import them
Whereas bundleSfx doesn’t put modules into the SystemJS registry
madmed88
@madmed88
Dec 02 2016 18:34
I thik systemjs will not resolve the API bundle dependencies if I don't include the config file
Joel Denning
@joeldenning
Dec 02 2016 18:36
Did you try the little snippet I made?
The SystemJS.config({…})?
@Izzmo oh I see what you were saying now. Yeah, you have to download the API bundle separately from your sfx bundle
madmed88
@madmed88
Dec 02 2016 18:38
I don't have the code in front of me now
Joel Denning
@joeldenning
Dec 02 2016 18:39
Something like this:
<script src=“api.bundle.js”></script>
<script src=“main-app-sfx.bundle.js”></script>
@Izzmo ^
madmed88
@madmed88
Dec 02 2016 18:39
I will try it in a few minutes
Joel Denning
@joeldenning
Dec 02 2016 18:39
:thumbsup:
madmed88
@madmed88
Dec 02 2016 19:08
didn't work
the plugins can't find API module
the plugins are not using System.import, they are using amd syntax
Joel Denning
@joeldenning
Dec 02 2016 19:10
But you are importing the plugins with System.import(‘plugin’), right?
madmed88
@madmed88
Dec 02 2016 19:10
yes
from the main-app
Joel Denning
@joeldenning
Dec 02 2016 19:10
If so, then SystemJS will see the define([‘API’]) and will call System.import(‘API’) in order to resolve that dependency
So I don’t think that’s the issue.
What happens when you do System.import(‘API’).then(api => console.log(api)).catch(err => console.log(err))?
just in the browser console
madmed88
@madmed88
Dec 02 2016 19:16
it prints an empty object
Joel Denning
@joeldenning
Dec 02 2016 19:17
Do your plugin apps get an empty object when they import API?
madmed88
@madmed88
Dec 02 2016 19:17
no it should exports some functions, but the error I get is that plugin can't find API
Nick George
@Izzmo
Dec 02 2016 19:18

Something like this:

<script src=“api.bundle.js”></script>
<script src=“main-app-sfx.bundle.js”></script>

Yep, exactly! would be nice to combine them.. but... I guess it doesn't matter as most don't do these sort of things now.

Joel Denning
@joeldenning
Dec 02 2016 19:19
Do the plugin apps do System.import? Or do they do define(['API'])?
madmed88
@madmed88
Dec 02 2016 19:21
they don't use System.import
the API is configured as a package in systemjs config
Joel Denning
@joeldenning
Dec 02 2016 19:35
What does the error you get when trying to lead API
madmed88
@madmed88
Dec 02 2016 19:51
the eroor I get is from the plugin script because it can(t find API
Joel Denning
@joeldenning
Dec 02 2016 20:38
What is printed to the console?