Any working example of using jspm with Babel for React JSX files? #566

Closed
hipertracker opened this Issue Mar 5, 2015 · 51 comments

Comments

Projects
None yet
@hipertracker

I created a new jspm project with Babel. I don't know how to force it to understand JSX or how to pass more BabelJS parameters to transpiler. In my config.js file I have default "transpiler": "babel",. When I tried change it into transpiler: {name:"babel", options: {experiment:true}} I got error that I need Traceur (it looks like Babel is not detected anymore after that change). Do I also need to download babel.js and babel-polyfill.js in my index.html? Or it is already somehow supported by my config.js?

// config.js:
System.config({
  "baseURL": "/",
  "transpiler": "babel",
  "paths": {
    "*": "*.js",
    "github:*": "jspm_packages/github/*.js",
    "npm:*": "jspm_packages/npm/*.js"
  }
});
// ...

@hipertracker hipertracker changed the title from Any working example of using jspm with Babel working with React JSX files? to Any working example of using jspm with Babel for React JSX files? Mar 6, 2015

@djindjic

This comment has been minimized.

Show comment
Hide comment
@tritonrc

This comment has been minimized.

Show comment
Hide comment
@tritonrc

tritonrc Mar 6, 2015

Per https://github.com/floatdrop/plugin-jsx
jspm install jsx (or append @beta for ES6 friendly React 0.13)

tritonrc commented Mar 6, 2015

Per https://github.com/floatdrop/plugin-jsx
jspm install jsx (or append @beta for ES6 friendly React 0.13)

@hipertracker

This comment has been minimized.

Show comment
Hide comment
@hipertracker

hipertracker Mar 6, 2015

I don't want to use Gulp top transpile ES6. I do not need jspm if I can use Gulp/Grunt/Broccoli. I need a pure browser solution. jspm should use babel out of box. Why to install another software or plugins?

I don't want to use Gulp top transpile ES6. I do not need jspm if I can use Gulp/Grunt/Broccoli. I need a pure browser solution. jspm should use babel out of box. Why to install another software or plugins?

@egauci

This comment has been minimized.

Show comment
Hide comment
@egauci

egauci Mar 6, 2015

I'm trying to figure this out too. Babel is supposed to support JSX, but even if I set the dl-loader to Babel, it still requires the floatdrop/plugin-jsx to work.

It's not horrid - it works fine without a separate build step. Still, in the Chrome debugger, the JSX is already transpiled in to JavaScript.

egauci commented Mar 6, 2015

I'm trying to figure this out too. Babel is supposed to support JSX, but even if I set the dl-loader to Babel, it still requires the floatdrop/plugin-jsx to work.

It's not horrid - it works fine without a separate build step. Still, in the Chrome debugger, the JSX is already transpiled in to JavaScript.

@hipertracker

This comment has been minimized.

Show comment
Hide comment
@hipertracker

hipertracker Mar 6, 2015

I need to see a full working example. Even with that plugin (I use it's fork) it's not clear how to use it. My index.html contains JS command System.import('lib/main'); and I get SyntaxError (in Chrome Developer Tool) on very first line of my file lib/main.js:

Potentially unhandled rejection [3] SyntaxError: Error loading "lib/main" at http://localhost:3000/lib/main.js
Evaluating lib/main
    Unexpected token <

That line is a simple ES6 import of React library

import React from 'react';

According to that JSX plugin I should use System.import('lib/main.jsx!') instead, but this won't work either because then I get another error. The browser try to download incorrect file: lib/main.jsx!jsx... It looke like that plugin is not compatible with jspm default config.js file which use *.js format for all files. It's all confused and unclear.

I need to see a full working example. Even with that plugin (I use it's fork) it's not clear how to use it. My index.html contains JS command System.import('lib/main'); and I get SyntaxError (in Chrome Developer Tool) on very first line of my file lib/main.js:

Potentially unhandled rejection [3] SyntaxError: Error loading "lib/main" at http://localhost:3000/lib/main.js
Evaluating lib/main
    Unexpected token <

That line is a simple ES6 import of React library

import React from 'react';

According to that JSX plugin I should use System.import('lib/main.jsx!') instead, but this won't work either because then I get another error. The browser try to download incorrect file: lib/main.jsx!jsx... It looke like that plugin is not compatible with jspm default config.js file which use *.js format for all files. It's all confused and unclear.

@egauci

This comment has been minimized.

Show comment
Hide comment
@hipertracker

This comment has been minimized.

Show comment
Hide comment
@hipertracker

hipertracker Mar 7, 2015

No, this is not a jspm project. It was not created with jspm init command. That is jspm project: https://github.com/hipertracker/jspm-jsx-test. All ES6 syntax provided by Babel works, except JSX :(

No, this is not a jspm project. It was not created with jspm init command. That is jspm project: https://github.com/hipertracker/jspm-jsx-test. All ES6 syntax provided by Babel works, except JSX :(

@hipertracker

This comment has been minimized.

Show comment
Hide comment
@hipertracker

hipertracker Mar 7, 2015

BTW, Babel does not need floatdrop/plugin-jsx, because this plugin is not using Babel at all, it uses react-tools instead.

BTW, Babel does not need floatdrop/plugin-jsx, because this plugin is not using Babel at all, it uses react-tools instead.

@hipertracker

This comment has been minimized.

Show comment
Hide comment
@hipertracker

hipertracker Mar 7, 2015

I found the source of problems with JSX. For unknown reason est6-module-loader put React on blacklist. This blocked JSX. I send a request to fix it ModuleLoader/es-module-loader#325

I found the source of problems with JSX. For unknown reason est6-module-loader put React on blacklist. This blocked JSX. I send a request to fix it ModuleLoader/es-module-loader#325

@hipertracker

This comment has been minimized.

Show comment
Hide comment
@hipertracker

hipertracker Mar 7, 2015

Patching es6-module-loader solved problems with JSX syntax but not in all cases. Bundling does not work with JSX. Still jspm bundle and jspm bundle-sfx do not recognize JSX :(

Patching es6-module-loader solved problems with JSX syntax but not in all cases. Bundling does not work with JSX. Still jspm bundle and jspm bundle-sfx do not recognize JSX :(

@hipertracker hipertracker reopened this Mar 7, 2015

@egauci

This comment has been minimized.

Show comment
Hide comment
@egauci

egauci Mar 7, 2015

@hipertracker - I'm not sure if you were referring to my link when you said it was "not a jspm project". If you were, I assure you that it was indeed started with "jspm init".

Regarding enabling JSX in module loader, it appears to be against that project owner's policy: ModuleLoader/es-module-loader#311

egauci commented Mar 7, 2015

@hipertracker - I'm not sure if you were referring to my link when you said it was "not a jspm project". If you were, I assure you that it was indeed started with "jspm init".

Regarding enabling JSX in module loader, it appears to be against that project owner's policy: ModuleLoader/es-module-loader#311

@hipertracker

This comment has been minimized.

Show comment
Hide comment
@hipertracker

hipertracker Mar 7, 2015

That the same problem with es6-module-loader. jspm keep this file also at node_modules/jspm/node_modules/systemjs/node_modules/es6-module-loader/dist/es6-module-loader.src.js

That the same problem with es6-module-loader. jspm keep this file also at node_modules/jspm/node_modules/systemjs/node_modules/es6-module-loader/dist/es6-module-loader.src.js

@hipertracker

This comment has been minimized.

Show comment
Hide comment
@hipertracker

hipertracker Mar 7, 2015

Well, so that policy is just stupid. The owner can blacklist whatever he wants, but he should allow for overwriting it by the user. Why only 'react' is blacklisted but not 'flow', 'experimental', 'playground', 'loose' mode, etc.?

Well, so that policy is just stupid. The owner can blacklist whatever he wants, but he should allow for overwriting it by the user. Why only 'react' is blacklisted but not 'flow', 'experimental', 'playground', 'loose' mode, etc.?

@hipertracker

This comment has been minimized.

Show comment
Hide comment
@hipertracker

hipertracker Mar 7, 2015

@egauci, that's weird. For me jspm init creates much more files than https://github.com/egauci/react-jspm-tests. E.g. it creates config.js file which is absolete in your repo...

@egauci, that's weird. For me jspm init creates much more files than https://github.com/egauci/react-jspm-tests. E.g. it creates config.js file which is absolete in your repo...

@egauci

This comment has been minimized.

Show comment
Hide comment
@egauci

egauci Mar 7, 2015

@hipertracker - well, you have to "npm install jspm" then "jspm install". I only included sources.

(Sorry, I should have added a readme, but honestly I wasn't expecting anybody to see that project. It's just coincidence that you and I both came up on this JSX exclusion issue at the same time.)

egauci commented Mar 7, 2015

@hipertracker - well, you have to "npm install jspm" then "jspm install". I only included sources.

(Sorry, I should have added a readme, but honestly I wasn't expecting anybody to see that project. It's just coincidence that you and I both came up on this JSX exclusion issue at the same time.)

@johlrich

This comment has been minimized.

Show comment
Hide comment
@johlrich

johlrich Mar 7, 2015

@hipertracker Your example project looks fine and you don't need to use gulp or any task runner to finish. In my project, I ended up utilizing the jspm jsx plugin @tritonrc mentioned and also don't use grunt/gulp/etc. I still use babel to manage the rest.

To build the bundle I execute jspm bundle-sfx app/main.jsx! dist/app.js --minify through npm scripts.

Granted, this technically doesn't allow you to use babel itself to do the jsx transformation since the plugin uses react-tools, but it does enable the workflow you're looking to enable with sourcemaps and all other goodness. I personally haven't found any issues with this approach. Is there a specific reason you need babel to handle the jsx transformation over react-tools?

johlrich commented Mar 7, 2015

@hipertracker Your example project looks fine and you don't need to use gulp or any task runner to finish. In my project, I ended up utilizing the jspm jsx plugin @tritonrc mentioned and also don't use grunt/gulp/etc. I still use babel to manage the rest.

To build the bundle I execute jspm bundle-sfx app/main.jsx! dist/app.js --minify through npm scripts.

Granted, this technically doesn't allow you to use babel itself to do the jsx transformation since the plugin uses react-tools, but it does enable the workflow you're looking to enable with sourcemaps and all other goodness. I personally haven't found any issues with this approach. Is there a specific reason you need babel to handle the jsx transformation over react-tools?

@hipertracker

This comment has been minimized.

Show comment
Hide comment
@hipertracker

hipertracker Mar 7, 2015

@johlrich Using just Babel is simpler and more powerful. E.g. with that jsx plugin that code won't work:

async function foo() {
    await bar();
};

@johlrich Using just Babel is simpler and more powerful. E.g. with that jsx plugin that code won't work:

async function foo() {
    await bar();
};
@johlrich

This comment has been minimized.

Show comment
Hide comment
@johlrich

johlrich Mar 7, 2015

@hipertracker Babel would still be used for all other transformations. As I mentioned, this is exactly how I am setup with the jsx plugin + babel. To get there in your project: jspm install jsx and change .js to .jsx, make sure they get passed through plugin first by using import App from './App.jsx!', turn on experimental: true in the babelOptions within config.js

johlrich commented Mar 7, 2015

@hipertracker Babel would still be used for all other transformations. As I mentioned, this is exactly how I am setup with the jsx plugin + babel. To get there in your project: jspm install jsx and change .js to .jsx, make sure they get passed through plugin first by using import App from './App.jsx!', turn on experimental: true in the babelOptions within config.js

@hipertracker

This comment has been minimized.

Show comment
Hide comment
@hipertracker

hipertracker Mar 7, 2015

@johlrich, it does not work. I can import only *.js files. I guess, this is enforced by default config.js settings:

// config.js:
System.config({
  "baseURL": "/",
  "transpiler": "babel",
  "paths": {
    "*": "*.js", // <-- here?
    "github:*": "jspm_packages/github/*.js",
    "npm:*": "jspm_packages/npm/*.js"
  }
});
// ...

I can change it "*": "*.js" into "*": "*.jsx" but

(1) I don't think it'd good idea to manipulate that file which can be overwritten to its default state by npm clean command,

(2) after that change all my files have to use .jsx extension only for ES6 imports.

And unfortunately, that change does not work for standard System.import command. When I use System.import('src/main.jsx!'); then the code is trying to download non existing http://localhost:3000/src/main.jsx.jsx.

UPDATED example: https://github.com/hipertracker/jspm-jsx-test

@johlrich, it does not work. I can import only *.js files. I guess, this is enforced by default config.js settings:

// config.js:
System.config({
  "baseURL": "/",
  "transpiler": "babel",
  "paths": {
    "*": "*.js", // <-- here?
    "github:*": "jspm_packages/github/*.js",
    "npm:*": "jspm_packages/npm/*.js"
  }
});
// ...

I can change it "*": "*.js" into "*": "*.jsx" but

(1) I don't think it'd good idea to manipulate that file which can be overwritten to its default state by npm clean command,

(2) after that change all my files have to use .jsx extension only for ES6 imports.

And unfortunately, that change does not work for standard System.import command. When I use System.import('src/main.jsx!'); then the code is trying to download non existing http://localhost:3000/src/main.jsx.jsx.

UPDATED example: https://github.com/hipertracker/jspm-jsx-test

@johlrich

This comment has been minimized.

Show comment
Hide comment
@johlrich

johlrich Mar 7, 2015

@hipertracker I did not need to manipulate the paths. I cloned and used your repository just fine after switching the path entry back to "*": "*.js". Hello World for React 0.13.0-rc2 and some console output appears.

johlrich commented Mar 7, 2015

@hipertracker I did not need to manipulate the paths. I cloned and used your repository just fine after switching the path entry back to "*": "*.js". Hello World for React 0.13.0-rc2 and some console output appears.

@hipertracker

This comment has been minimized.

Show comment
Hide comment
@hipertracker

hipertracker Mar 7, 2015

@johlrich You are right. Now all works. Thanks.

@johlrich You are right. Now all works. Thanks.

@hipertracker

This comment has been minimized.

Show comment
Hide comment
@hipertracker

hipertracker Mar 9, 2015

es6-module-loader fixed the problem blacklist. If jspm will be able to install the edge version of es6-module-loader, no jsx plugin is needed anymore.

es6-module-loader fixed the problem blacklist. If jspm will be able to install the edge version of es6-module-loader, no jsx plugin is needed anymore.

@hipertracker

This comment has been minimized.

Show comment
Hide comment
@hipertracker

hipertracker Mar 9, 2015

Last news: es6-module-loader fixed the problem with blacklist. If jspm will be able to install the edge version of es6-module-loader, no jsx plugin is needed anymore.

Last news: es6-module-loader fixed the problem with blacklist. If jspm will be able to install the edge version of es6-module-loader, no jsx plugin is needed anymore.

@johnsoftek

This comment has been minimized.

Show comment
Hide comment
@johnsoftek

johnsoftek Mar 9, 2015

What happens when we no longer need a transpiler for ES6? The standard
browser ES6 module loader will not likely not handle jsx syntax. Then we
will need to re-instate a jsx transpiler.

On 10 March 2015 at 08:12, Jaroslaw Zabiello notifications@github.com
wrote:

Last news: es6-module-loader fixed the problem with blacklist
ModuleLoader/es-module-loader@4d0e42c.
If jspm will be able #580 to
install the edge version of es6-module-loader, no jsx plugin is needed
anymore.


Reply to this email directly or view it on GitHub
#566 (comment).

What happens when we no longer need a transpiler for ES6? The standard
browser ES6 module loader will not likely not handle jsx syntax. Then we
will need to re-instate a jsx transpiler.

On 10 March 2015 at 08:12, Jaroslaw Zabiello notifications@github.com
wrote:

Last news: es6-module-loader fixed the problem with blacklist
ModuleLoader/es-module-loader@4d0e42c.
If jspm will be able #580 to
install the edge version of es6-module-loader, no jsx plugin is needed
anymore.


Reply to this email directly or view it on GitHub
#566 (comment).

@egauci

This comment has been minimized.

Show comment
Hide comment
@egauci

egauci Mar 9, 2015

@johnsoftek - I wouldn't worry too much about that:

  1. 6to5 became Babel because they realized that development will never stop. There will always be something new that isn't yet implemented in your target environment.

  2. You could keep babel just for the JSX.

egauci commented Mar 9, 2015

@johnsoftek - I wouldn't worry too much about that:

  1. 6to5 became Babel because they realized that development will never stop. There will always be something new that isn't yet implemented in your target environment.

  2. You could keep babel just for the JSX.

@hipertracker

This comment has been minimized.

Show comment
Hide comment
@hipertracker

hipertracker Mar 9, 2015

It will take ages until all browsers support ES6/ES7. And I bet that some of them will support it better, some worse. Using transpiler like Babel is always better because it is browser independent, it works now, and it support not only JSX but even ES7.

For the same reason Polymer and web components are going into wrong direction. It will take ages until browsers adopt web components. It's much better to get away from the browser and it's problems towards pure JS and Virtual DOM. I like that ReactJS philosophy. it works now and it's browser independent.

It will take ages until all browsers support ES6/ES7. And I bet that some of them will support it better, some worse. Using transpiler like Babel is always better because it is browser independent, it works now, and it support not only JSX but even ES7.

For the same reason Polymer and web components are going into wrong direction. It will take ages until browsers adopt web components. It's much better to get away from the browser and it's problems towards pure JS and Virtual DOM. I like that ReactJS philosophy. it works now and it's browser independent.

@johnsoftek

This comment has been minimized.

Show comment
Hide comment
@johnsoftek

johnsoftek Mar 10, 2015

@egauci @hipertracker Good points. I agree with the aim of browser independence and even HTML independence. I like the way React insulates us from the real DOM. Too much of our browser app coding is influenced by the DOM, which is just one way of visualising components. React Native shows the benefit of having a layer between components and the render target .

@egauci @hipertracker Good points. I agree with the aim of browser independence and even HTML independence. I like the way React insulates us from the real DOM. Too much of our browser app coding is influenced by the DOM, which is just one way of visualising components. React Native shows the benefit of having a layer between components and the render target .

@zcregan

This comment has been minimized.

Show comment
Hide comment
@zcregan

zcregan Mar 17, 2015

I had issues with the JSX plugin where React-Tools would error out on some valid ES6 syntax and so my JSX files never make it to Babel's ES6 transpiler.

I wrote my own JSX plugin using Babel instead of React-Tools for the actual JSX transpilation.
Plugin: https://github.com/zcregan/plugin-babeljsx
Demo: https://github.com/zcregan/JSPM-Babel-JSX-Demo

zcregan commented Mar 17, 2015

I had issues with the JSX plugin where React-Tools would error out on some valid ES6 syntax and so my JSX files never make it to Babel's ES6 transpiler.

I wrote my own JSX plugin using Babel instead of React-Tools for the actual JSX transpilation.
Plugin: https://github.com/zcregan/plugin-babeljsx
Demo: https://github.com/zcregan/JSPM-Babel-JSX-Demo

@mrspeaker

This comment has been minimized.

Show comment
Hide comment
@mrspeaker

mrspeaker Mar 19, 2015

I just want to add a +1 for hipertracker's solution: Babel supports jsx by default - so we shouldn't need any external plugins. But doing jspm dl-loader --edge is broken at the moment.

To test it out, create a clean project with jspm init, add React, then search for b.blacklist.push("react") in es6-module-loader.js in your project. Remove that expression, and jsx loading works as expected.

I just want to add a +1 for hipertracker's solution: Babel supports jsx by default - so we shouldn't need any external plugins. But doing jspm dl-loader --edge is broken at the moment.

To test it out, create a clean project with jspm init, add React, then search for b.blacklist.push("react") in es6-module-loader.js in your project. Remove that expression, and jsx loading works as expected.

@thylo

This comment has been minimized.

Show comment
Hide comment
@thylo

thylo Mar 25, 2015

I had the same problem. I fixed it simply by updating the es6-module-loader to the latest version and by overwriting the blackilist setting as so :

<script>
    System.babelOptions = {experimental: true, playground: true, blacklist:[]};
    System.import('js/app');
</script>

thylo commented Mar 25, 2015

I had the same problem. I fixed it simply by updating the es6-module-loader to the latest version and by overwriting the blackilist setting as so :

<script>
    System.babelOptions = {experimental: true, playground: true, blacklist:[]};
    System.import('js/app');
</script>
@anselmo

This comment has been minimized.

Show comment
Hide comment
@anselmo

anselmo Apr 5, 2015

+1 for @thylo

System.babelOptions = {blacklist:[]}; 

anselmo commented Apr 5, 2015

+1 for @thylo

System.babelOptions = {blacklist:[]}; 
@egauci

This comment has been minimized.

Show comment
Hide comment
@egauci

egauci Apr 6, 2015

@thylo @anselmo - definitely +1

Also works from config.js:

"babelOptions": {
   "optional": [
      "runtime"
   ],
  "blacklist": []
},

egauci commented Apr 6, 2015

@thylo @anselmo - definitely +1

Also works from config.js:

"babelOptions": {
   "optional": [
      "runtime"
   ],
  "blacklist": []
},

@floatdrop floatdrop referenced this issue in floatdrop/plugin-jsx Jun 18, 2015

Closed

Support ES6 style templates #3

@ChaosD

This comment has been minimized.

Show comment
Hide comment
@ChaosD

ChaosD Jul 1, 2015

Has this problem been resolved?
@egauci I dropped this config in an existing project but it still refuses to load .jsx files like @hipertracker described.

Are you sure .jsx works without further plugins? On a quick check on hipertrackers repo i found some references to jsx plugins, i.e.
https://github.com/hipertracker/jspm-jsx-test/blob/master/config.js#L963

ChaosD commented Jul 1, 2015

Has this problem been resolved?
@egauci I dropped this config in an existing project but it still refuses to load .jsx files like @hipertracker described.

Are you sure .jsx works without further plugins? On a quick check on hipertrackers repo i found some references to jsx plugins, i.e.
https://github.com/hipertracker/jspm-jsx-test/blob/master/config.js#L963

@egauci

This comment has been minimized.

Show comment
Hide comment
@egauci

egauci Jul 1, 2015

Yes @ChaosD, this works fine now. Make sure you have a recent version of jspm.

Here is a simple project I did: https://github.com/egauci/reord. It's using jspm 0.15.3.

I'm not even sure that the "blacklist: []" is still needed, but it doesn't hurt.

Oh, I don't name my files with a .jsx suffix, just .js. Since Babel transpiles everything, having different suffixes isn't needed, and would probably get in the way.

egauci commented Jul 1, 2015

Yes @ChaosD, this works fine now. Make sure you have a recent version of jspm.

Here is a simple project I did: https://github.com/egauci/reord. It's using jspm 0.15.3.

I'm not even sure that the "blacklist: []" is still needed, but it doesn't hurt.

Oh, I don't name my files with a .jsx suffix, just .js. Since Babel transpiles everything, having different suffixes isn't needed, and would probably get in the way.

@ChaosD

This comment has been minimized.

Show comment
Hide comment
@ChaosD

ChaosD Jul 2, 2015

Thanks for the confirmation, i got something mixed up then. i was under the impression that it was supposed to load .jsx files if i import them like "foo.jsx!"
Would have been sweet because some IDEs / Editors work nicer if they recognize the extension but i can live with that.

ChaosD commented Jul 2, 2015

Thanks for the confirmation, i got something mixed up then. i was under the impression that it was supposed to load .jsx files if i import them like "foo.jsx!"
Would have been sweet because some IDEs / Editors work nicer if they recognize the extension but i can live with that.

@ChaosD

This comment has been minimized.

Show comment
Hide comment
@ChaosD

ChaosD Jul 6, 2015

@egauci : one last follow up question: my IDE just annoys me too much when i have jsx syntax in .js files. I looked around for plugins to load .jsx files with jspm. There is floatdrop/plugin-jsx, whis has been deprecated in favour of babel. It also does not work anymore because react-tools has been removed

So: what is the current way of loading .jsx files when using jspm/systemjs ?

ChaosD commented Jul 6, 2015

@egauci : one last follow up question: my IDE just annoys me too much when i have jsx syntax in .js files. I looked around for plugins to load .jsx files with jspm. There is floatdrop/plugin-jsx, whis has been deprecated in favour of babel. It also does not work anymore because react-tools has been removed

So: what is the current way of loading .jsx files when using jspm/systemjs ?

@egauci

This comment has been minimized.

Show comment
Hide comment
@egauci

egauci Jul 6, 2015

@ChaosD - I heard you about IDE issues with JSX. I (for now anyway) have switched to Atom - it has a decent JSX support through packages.

Anyway, sorry but I don't know the answer to your question. I think that JSPM is moving to not adding that extra '.js' at the end of suffixes it doesn't recognize in version 0.17, but I'm not sure I understand that correctly.

egauci commented Jul 6, 2015

@ChaosD - I heard you about IDE issues with JSX. I (for now anyway) have switched to Atom - it has a decent JSX support through packages.

Anyway, sorry but I don't know the answer to your question. I think that JSPM is moving to not adding that extra '.js' at the end of suffixes it doesn't recognize in version 0.17, but I'm not sure I understand that correctly.

@guybedford

This comment has been minimized.

Show comment
Hide comment
@guybedford

guybedford Jul 8, 2015

Member

The way to load jsx in jspm would be to use the package configuration defaultExtension option:

System.config({
  defaultJSExtensions: true, // this is overridden by the package config below
  packages: {
    // where [baseURL]/app is the local code
    'app': {
      defaultExtension: 'ts'
    }
  }
});

We can then import vendor/file and get vendor/flie.js and also import app/main and get app/main.jsx, while app/main.js will remain app/main.js.

Member

guybedford commented Jul 8, 2015

The way to load jsx in jspm would be to use the package configuration defaultExtension option:

System.config({
  defaultJSExtensions: true, // this is overridden by the package config below
  packages: {
    // where [baseURL]/app is the local code
    'app': {
      defaultExtension: 'ts'
    }
  }
});

We can then import vendor/file and get vendor/flie.js and also import app/main and get app/main.jsx, while app/main.js will remain app/main.js.

@ChaosD

This comment has been minimized.

Show comment
Hide comment
@ChaosD

ChaosD Jul 11, 2015

@guybedford , did you mean to set defaultExtension to 'jsx'? Would make sense to me. Anyways, thanks for the clarification. Now I can have the best of both worlds 👍

Edit: i just tried your solution and i cannot get it to work. What versions of jspm/babel are you using?
Edit2: i just realized jspm fetches react 0.14-beta. Loading a react compinent (js extension) gives "Unexpected token: < ". Could it be because babel relies on react-tools for transpiling? I've read that they were removed.

Solved my problem, seems like my setup was somehow messed up. For anyone stumbling upon this, start over again and follow these steps, with "blacklist: []" in config:

ChaosD commented Jul 11, 2015

@guybedford , did you mean to set defaultExtension to 'jsx'? Would make sense to me. Anyways, thanks for the clarification. Now I can have the best of both worlds 👍

Edit: i just tried your solution and i cannot get it to work. What versions of jspm/babel are you using?
Edit2: i just realized jspm fetches react 0.14-beta. Loading a react compinent (js extension) gives "Unexpected token: < ". Could it be because babel relies on react-tools for transpiling? I've read that they were removed.

Solved my problem, seems like my setup was somehow messed up. For anyone stumbling upon this, start over again and follow these steps, with "blacklist: []" in config:

@mgenev

This comment has been minimized.

Show comment
Hide comment
@mgenev

mgenev Jan 14, 2016

I'm having hte same problem where is the solution?

mgenev commented Jan 14, 2016

I'm having hte same problem where is the solution?

@calbertts

This comment has been minimized.

Show comment
Hide comment
@calbertts

calbertts Jan 24, 2016

What's the standard solution for this?

What's the standard solution for this?

@guybedford

This comment has been minimized.

Show comment
Hide comment
@guybedford

guybedford Jan 25, 2016

Member

I didn't realise this was still a catch. When a module is set as format: 'esm' JSX support is provided through Babel 5 normally. Otherwise use jspm install jsx and configure it as a loader.

Member

guybedford commented Jan 25, 2016

I didn't realise this was still a catch. When a module is set as format: 'esm' JSX support is provided through Babel 5 normally. Otherwise use jspm install jsx and configure it as a loader.

@calbertts

This comment has been minimized.

Show comment
Hide comment
@calbertts

calbertts Jan 26, 2016

Thanks! it's clear now.

Thanks! it's clear now.

@carlosdubus

This comment has been minimized.

Show comment
Hide comment
@carlosdubus

carlosdubus Mar 30, 2016

Can't get JSX working with SystemJS. I installed jsx plugin. After that, I required main like this:
System.import("admin/main.js!jsx");

The above worked with main.js containing JSX.

Then inside main I have:

var Nav = require('./components/nav.js!jsx');

var App = React.createClass({
    render: function() {
        return <Nav></Nav>;
    }
});

I get the following error when requiring Nav:
Parse Error: Line 21: Unexpected token !

Any working examples I can look at? Thanks!

Can't get JSX working with SystemJS. I installed jsx plugin. After that, I required main like this:
System.import("admin/main.js!jsx");

The above worked with main.js containing JSX.

Then inside main I have:

var Nav = require('./components/nav.js!jsx');

var App = React.createClass({
    render: function() {
        return <Nav></Nav>;
    }
});

I get the following error when requiring Nav:
Parse Error: Line 21: Unexpected token !

Any working examples I can look at? Thanks!

@cchamberlain

This comment has been minimized.

Show comment
Hide comment
@cchamberlain

cchamberlain May 1, 2016

@guybedford Is there a roadmap to the default babel transpiler getting bumped up to 6? I'm on 0.17.0-beta.14 trying to port a large webpack project to jspm and hit this issue.

@guybedford Is there a roadmap to the default babel transpiler getting bumped up to 6? I'm on 0.17.0-beta.14 trying to port a large webpack project to jspm and hit this issue.

@guybedford

This comment has been minimized.

Show comment
Hide comment
@guybedford

guybedford May 2, 2016

Member

@cchamberlain jspm 0.17 uses Babel 6 through the SystemJS babel plugin. This can be installed via jspm install plugin-babel or through jspm init -p as the transpiler option.

Member

guybedford commented May 2, 2016

@cchamberlain jspm 0.17 uses Babel 6 through the SystemJS babel plugin. This can be installed via jspm install plugin-babel or through jspm init -p as the transpiler option.

@adelespinasse

This comment has been minimized.

Show comment
Hide comment
@adelespinasse

adelespinasse Jul 15, 2016

So it seems like the current way (with jspm 0.16.* anyway) is to install jspm-loader-jsx:

jspm install npm:jspm-loader-jsx

This is the only way I've managed to get it working. I didn't have to set the blacklist to []. I'm using the .js extension.

I learned about jspm-loader-jsx from this blog post after many hours trying other things and searching the web for help.

So it seems like the current way (with jspm 0.16.* anyway) is to install jspm-loader-jsx:

jspm install npm:jspm-loader-jsx

This is the only way I've managed to get it working. I didn't have to set the blacklist to []. I'm using the .js extension.

I learned about jspm-loader-jsx from this blog post after many hours trying other things and searching the web for help.

@phoeniceus

This comment has been minimized.

Show comment
Hide comment
@phoeniceus

phoeniceus Jul 28, 2016

We've had problems getting the jspm bundle command to transpile jsx files. I can display my web app using systemjs to transpile on the fly, but I cannot pre-bundle the files to plain javascript. I get unexpected token errors. More specifically, if I use...

JSPM v. 0.16.41 (the latest stable version) with Babel v.5

It throws "unexpected token" errors. But if I use...

JSPM v. 0.16.12 with Babel v.5

It works just like it says in [http://egorsmirnov.me/2015/10/11/react-and-es6-part5.html].

So I can see several possible ways for me to move forward but I don't know which way is best or even possible:

  1. Use the older JSPM v. 0.16.12. I don't really want to do this as it forces me to stick with an out of date version of JSPM.

  2. Use JSPM v. 0.16.41 with Babel 5 (the version it comes with) and spend hours figuring out how to make it work. Actually, I've already spent hours on this with no success. Anyone else?

  3. Use JSPM v.0.16.41 and upgrade it to Babel 6. No idea how to go about this. Has anyone tried this? Can you give me instructions?

  4. Move to JSPM v. 0.17. (beta version) which comes with Babel 6. I tried this but I couldn't even get my app to display without bundling. Too many other errors.

Any suggestions?

phoeniceus commented Jul 28, 2016

We've had problems getting the jspm bundle command to transpile jsx files. I can display my web app using systemjs to transpile on the fly, but I cannot pre-bundle the files to plain javascript. I get unexpected token errors. More specifically, if I use...

JSPM v. 0.16.41 (the latest stable version) with Babel v.5

It throws "unexpected token" errors. But if I use...

JSPM v. 0.16.12 with Babel v.5

It works just like it says in [http://egorsmirnov.me/2015/10/11/react-and-es6-part5.html].

So I can see several possible ways for me to move forward but I don't know which way is best or even possible:

  1. Use the older JSPM v. 0.16.12. I don't really want to do this as it forces me to stick with an out of date version of JSPM.

  2. Use JSPM v. 0.16.41 with Babel 5 (the version it comes with) and spend hours figuring out how to make it work. Actually, I've already spent hours on this with no success. Anyone else?

  3. Use JSPM v.0.16.41 and upgrade it to Babel 6. No idea how to go about this. Has anyone tried this? Can you give me instructions?

  4. Move to JSPM v. 0.17. (beta version) which comes with Babel 6. I tried this but I couldn't even get my app to display without bundling. Too many other errors.

Any suggestions?

@guybedford

This comment has been minimized.

Show comment
Hide comment
@guybedford

guybedford Aug 1, 2016

Member

@phoeniceus I followed the instructions there and it seems to work fine for me in 0.16:

  • jspm install jsx=npm:jspm-loader-jsx
  • System.import('test.jsx!')

Where test.jsx contains:

import React from 'react';
export var p = <div></div>;

Just let me know if I can help further.

Member

guybedford commented Aug 1, 2016

@phoeniceus I followed the instructions there and it seems to work fine for me in 0.16:

  • jspm install jsx=npm:jspm-loader-jsx
  • System.import('test.jsx!')

Where test.jsx contains:

import React from 'react';
export var p = <div></div>;

Just let me know if I can help further.

@phoeniceus

This comment has been minimized.

Show comment
Hide comment
@phoeniceus

phoeniceus Aug 1, 2016

@guybedford The instructions on that page explicitly say to use version 0.16.12. (the first thing you type in the command prompt is "install -g jspm@0.16.12"). I want to find a way to make it work with the latest version, which is 0.16.41. If you install this latest version, does the bundle command still work?

phoeniceus commented Aug 1, 2016

@guybedford The instructions on that page explicitly say to use version 0.16.12. (the first thing you type in the command prompt is "install -g jspm@0.16.12"). I want to find a way to make it work with the latest version, which is 0.16.41. If you install this latest version, does the bundle command still work?

@guybedford

This comment has been minimized.

Show comment
Hide comment
@guybedford

guybedford Aug 1, 2016

Member

@phoeniceus the test I ran above was with the latest 0.16 version.

Member

guybedford commented Aug 1, 2016

@phoeniceus the test I ran above was with the latest 0.16 version.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment