Illegal Import declaration using @beta

[OClement]

Using thes deps:

"jsx": "github:floatdrop/plugin-jsx@beta",
"react": "npm:react@0.13.0-beta.1",

---

In index.html: System.import('app.jsx!');
In app.jsx: import React from 'react'; (litterally nothing else)

Getting this error

Potentially unhandled rejection [3] Error: Error loading "app.jsx!github:floatdrop/plugin-jsx@beta" at http://localhost:8080/app.jsx
Parse Error: Line 1: Illegal import declaration
at throwError (http://localhost:8080/jspm_packages/npm/esprima-fb@12001.1.0-dev-harmony-fb/esprima.js:2231:17)
at throwErrorTolerant (http://localhost:8080/jspm_packages/npm/esprima-fb@12001.1.0-dev-harmony-fb/esprima.js:2241:20)
at parseSourceElement (http://localhost:8080/jspm_packages/npm/esprima-fb@12001.1.0-dev-harmony-fb/esprima.js:4999:13)
at parseProgramElement (http://localhost:8080/jspm_packages/npm/esprima-fb@12001.1.0-dev-harmony-fb/esprima.js:5045:14)
at parseProgramElements (http://localhost:8080/jspm_packages/npm/esprima-fb@12001.1.0-dev-harmony-fb/esprima.js:5076:25)
at parseProgram (http://localhost:8080/jspm_packages/npm/esprima-fb@12001.1.0-dev-harmony-fb/esprima.js:5089:14)
at Object.parse (http://localhost:8080/jspm_packages/npm/esprima-fb@12001.1.0-dev-harmony-fb/esprima.js:6253:19)
at getAstForSource (http://localhost:8080/jspm_packages/npm/jstransform@9.1.0/src/jstransform.js:141:21)
at transform (http://localhost:8080/jspm_packages/npm/jstransform@9.1.0/src/jstransform.js:156:11)
at innerTransform (http://localhost:8080/jspm_packages/npm/react-tools@0.13.0-beta.2/main.js:38:12)

[floatdrop]

ES6 transformations handled not by this module.

[OClement]

I see
However the es6 imports seem to work fine with jsx-plugin 0.1.1 (on my phone right now so I can't verify if that's the correct version but I mean the latest stable semver)

Any ideas on how I should set this up so it works with ES6 and all then?

Thank you

Le 2015-02-18 à 12:12, Vsevolod Strukchinsky notifications@github.com a écrit :

ES6 transformations handled not by this module.

—
Reply to this email directly or view it on GitHub.

[floatdrop]

@OClement please verify, that you have es6-module-loader I guess.

[richardhallett]

I believe I can probably shed light on this problem as I discovered it unrelated in my gulp build process (found this issue while searching for an answer myself)
The react-tools got updated recently and now use a newer version of jstransform/esprima consequently it's throwing an error with this ES6 syntax, however the react-tools guys did add a new option to handle the new module syntax, though it's not obviously documented.
Found here: react/react#3143

Anyway long story short the option {es6module:true} needs to be passed through to transformWithDetails, something like:

var output = react.transformWithDetails(load.source, {es6module:true});

[floatdrop]

I would go with some way to pass these parameters from userland, than hardcoding them to package.

Is there a standardized way to do this in jspm, @guybedford? May be store them in package.json?

[guybedford]

If you want to allow JSX used against any module format, the issue here is that module format detection is run after the plugin, so the plugin can't call into the SystemJS module format detection.

The issue is that es6module parsing imposes strict mode which may not be true for all code. But apart from that I'm not sure there are issues if it has no module syntax and uses CommonJS say? Perhaps it is worth just imposing this for simplicity.

The alternatives are:

• Do your own module format detection
• Read the format from load.metadata.format == 'es6' etc relying on the user explicitly setting it with meta configuration, but this can be painful for users as it means syntax in files or special config for the loader in their own code.

[floatdrop]

@richardhallett thanks for the tip! I have added 0.13-rc branch to test it.

@OClement can you check, that jspm install jsx@0.13-rc fixs this issue?

[tritonrc]

@floatdrop -- I did the same patch this morning on my local branch and everything started working again. I tried jspm install jsx@0.13-rc just now and I am received the following:

 Error: EINVAL: invalid argument, rename '/Users/brian/.jspm/packages/github/floatdrop/plugin-jsx@0.13-rc/.' -> '/Users/brian/.jspm/packages/github/floatdrop/.tmp-plugin-jsx@0.13-rc'

Beyond that, I can say replacing the harmony flag with es6module does the "right" thing with React 0.13-rc2

[floatdrop]

@tritonrc EINVAL error was fixed in master branch (jspm/jspm#558). I think this caused by . in lib - but isn't this right?.

[floatdrop]

@tritonrc now it should be fine.

[OClement]

@floatdrop Unfortunately I'm not in measure of testing this again for the moment, as I changed the project's structure to keep going, sorry about that!

[tritonrc]

@floatdrop -- Ah, yes, living on the edge. Cheers for the head-up on jspm. I updated and jspm install jsx@0.13-rc worked like a charm and my project is happy. Thank you.