These are chat archives for systemjs/systemjs

7th
Sep 2016
Sebastian K
@Nimelrian
Sep 07 2016 07:19

Hi everyone. Trying to make my first steps with SystemJS and a small React application.
My main JS file looks like this:

import React from 'react';
import ReactDOM from 'react-dom';

ReactDOM.render(
    <span>Hello World</span>,
    document.getElementById('root')
);

My index.html like this:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Hello, world</title>
    <link rel='stylesheet' href='/stylesheets/style.css'/>
    <script type="text/javascript" src="/libs/system.js" charset="utf-8"></script>
    <script type="text/javascript" src="/libs/polyfill.js" charset="utf-8"></script>
</head>
<body>
<div id="root"></div>
<script>
    System.config({
        baseURL: 'javascripts',
        packages: {
            js: {
                format: 'register',
                defaultExtension: 'js'
            },
        }
    });
    System.import('client.js')
</script>
</body>
</html>

I'm transpiling with babel using the transform-es2015-modules-systemjs plugin with es2015, stage-1 and react presets. The transpiled code gets thrown into the client.js file which should be loaded by SystemJS. But nothing happens. Why?

Guy Bedford
@guybedford
Sep 07 2016 12:42
@Nimelrian you want to load client.js with a <script src="client.js"></script> if it is a bundle, then import the main entry point that is created by that bundle afterwards
Sebastian K
@Nimelrian
Sep 07 2016 12:55

@guybedford
Like this? Still nothing happening

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Hello, world</title>
    <link rel='stylesheet' href='/stylesheets/style.css'/>
    <script type="text/javascript" src="libs/system.js" charset="utf-8"></script>
    <script type="text/javascript" src="libs/polyfill.js" charset="utf-8"></script>
</head>
<body>
<div id="root"></div>
<script>
</script>
    <script type="text/javascript" src="javascripts/client.js" charset="utf-8"></script>
</body>
</html>

This is my gulpfile

gulp.task("default", ['libs'], () => {
    return gulp.src([
        "src/**/*.js",
        "!src/server",
        "!src/server/**"
    ])
        .pipe(babel({moduleIds: true}))
        .pipe(concat("client.js"))
        .pipe(gulp.dest("public/javascripts"));
});
I'm new to SystemJS, everything worked fine with Webpack and later Browserify, but I was told to port everything over to SystemJS...
Guy Bedford
@guybedford
Sep 07 2016 14:03
You need a System.import('src/main.js') or something similar to kick of loading. The bundle itself just populates the loader cache.
Sebastian K
@Nimelrian
Sep 07 2016 14:10
Thanks, that seems to be working. Just need to resolve the dependencies.
Tom Davidson
@tomdavidson
Sep 07 2016 16:11
Hello, I am in need of loading a module from an AWS S3 bucket (not http) and am thinking of a SystemJS plugin that override the fetch hook. Im new to SystemJS and fairly green with NodeJS . Anyone have a few min to discuss the use case and high level design so I can start in the right direction?
Kelvin Fichter
@kfichter
Sep 07 2016 20:27
I'm trying to load a browser bundled node module (bitcore-lib) with SystemJS. It uses node require style pathing so it's giving me a ton of 404s. How can I load that into my project?
Jeff
@Jefftopia
Sep 07 2016 20:38
how do you guys recommend dealing with html file imports? The bundler isn't sure how to handle them, it looks like.
cannot find my-file.html.js. Actual file is my-file.html
Kelvin Fichter
@kfichter
Sep 07 2016 21:38
@kfichter never mind on this issue
buddyackerman
@buddyackerman
Sep 07 2016 22:38

I downloaded the RC6 quickstart project and added my packages to it and changed the systemjs.config.js to the following:

(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
      app: 'app',

      // 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',

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

      // other libraries
      'rxjs': 'npm:rxjs',
      'angular2-in-memory-web-api': 'npm:angular2-in-memory-web-api',

      'ng2-bootstrap': 'npm:ng2-bootstrap/ng2-bootstrap.js',
      'moment': 'npm:moment/moment.js',
      'primeng': 'npm:primeng/primeng.js',
      'angular2-jwt': 'npm:angular2-jwt/angular2-jwt.js',
      'lodash': 'npm:lodash/index.js'
    },
    // packages tells the System loader how to load when no filename and/or no extension
    packages: {
      app: {
        main: './app.js',
        defaultExtension: 'js'
      },
      rxjs: {
        defaultExtension: 'js'
      },
      'angular2-in-memory-web-api': {
        defaultExtension: 'js'
      }
    }
  });
})(this);

Now I get errors like this: zone.js:101 GET http://localhost:3000/node_modules/primeng/primeng.js/primeng 404 (Not Found)

I don't get how it's generating this URL. Why is an additional "/primeng" being added to the end?
buddyackerman
@buddyackerman
Sep 07 2016 22:49
Also, the errors are only on the 4 components that I added and they all exist