floatdrop / plugin-jsx

JSX loader plugin
MIT License
36 stars 10 forks source link

Illegal Import declaration using @beta #7

Closed OClement closed 9 years ago

OClement commented 9 years ago

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 commented 9 years ago

ES6 transformations handled not by this module.

OClement commented 9 years ago

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 commented 9 years ago

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

richardhallett commented 9 years ago

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: https://github.com/facebook/react/pull/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 commented 9 years ago

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 commented 9 years ago

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:

floatdrop commented 9 years ago

@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 commented 9 years ago

@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 commented 9 years ago

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

floatdrop commented 9 years ago

@tritonrc now it should be fine.

OClement commented 9 years ago

@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 commented 9 years ago

@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.