Problem importing ES6 package from NPM (npm:gaf)

[Sébastien Pierre]

Hi all, 

I'm tring to use https://www.npmjs.com/package/gaf with jspm, but can't get very far as it's written in ES6 (have a look at the index file here https://github.com/YCAMInterlab/gaf.js/blob/master/gaf.js).

JSPM does recognize it is an ES6 module

cat jspm_packages/npm/g...@1.0.9. json

{

  "main": "gaf.js",

  "format": "cjs",

  "meta": {

    "*.json": {

      "format": "json"

    },

    "gaf.js": {

      "format": "esm"

    }

}

but when imported I get this on Chrome

undefined:1 Uncaught (in promise) Error: (SystemJS) Unexpected token import(…)

and this in FF:

Error: (SystemJS) import declarations may only appear at top level of a module

Evaluating http://localhost:8000/jspm_packages/npm/g...@1.0.9/gaf/App.js

Error loading http://localhost:8000/src/app.js

The file in question does start with a top-level import.

Adding an explicit package rule in the jsm.config.js did bring me a bit further:

  packages: {

    "npm:g...@1.0.9": {

"format":"esm",

      "map": {

        "gl-context": "npm:gl-co...@0.1.1"

      }

    }, 

At this stage I get this in FF

Error: (SystemJS) http://localhost:8000/jspm_packages/npm/g...@1.0.9/gaf/App.js: Unexpected token (10:8)

  8 |   };

  9 | 

> 10 |   setup = () => {

    |         ^

 11 | 

 12 |   };

 13 | 

and the same in Chrome

system.js:4 Uncaught (in promise) Error: (SystemJS) http://localhost:8000/jspm_packages/npm/g...@1.0.9/gaf/App.js: Unexpected token (10:8)(…)t @ system.src.js:122p @ system.src.js:700(anonymous function) @ system.src.js:500

It seems to me that the transpiler did only transpile the index.js file in the module, but not the files imported from the index. 

To reproduce locally, install "npm:gaf" and try to import the "gaf" module.

Any pointers on how to resolve that?

Thanks,

-- Sébastien

[Damien Lebrun]

Hi,

I tried with 0.17.0-beta.25 and the problem might be the transpiling setting (or the source code). I don't it's using valid es6 syntax or the syntax is not supported with the default preset. E.g., with something like that:

class App {

  constructor( props ) {

    this.canvas = document.body.appendChild( document.createElement( 'canvas' ) );

    this.gl = glContext( this.canvas, { preserveDrawingBuffer: true }, this._render );

    this.isSetup = false;

  };

  setup = () => {

  };

}

Replacing " = () =>" with just "()" will enable babel plugin to transpile it.

You just need to install and setup the correct babel preset.

Damien.

[Damien Lebrun]

ps: I think it needs "babel-preset-stage-0" or at least "babel-plugin-transform-class-properties"

[Sébastien Pierre]

Hi Damien,

Thanks for the tip -- would you happen to know how to set these options? I could not find documentation on transpiler configuration in JSPM.

-- Sébastien

Le vendredi 2 septembre 2016 05:49:12 UTC-4, Damien Lebrun a écrit :

ps: I think it needs "babel-preset-stage-0" or at least "babel-plugin-transform-class-properties"Hi 

[Damien Lebrun]

Check the plugin-babel documentation:

https://github.com/systemjs/plugin-babel#es-features

[Sébastien Pierre]

Indeed, thanks! Adding the following

  meta: {

"*.js":{

babelOptions:{

stage1:true

}

}

  },

to the jspm.config.js made it work. Thanks a lot!

-- Sébastien