How to run SystemJS/React demo locally with JSX?

N

4

5

I'm following this video tutorial at the moment and I'm stuck with the simple HelloWorld App. At the time position 12m:31s is where I'm stuck it should show HelloWorld but it doesn't.

The App is using SystemJs, React and JSX.

To create the app do these steps in your terminal (node and jspm required):

npm init (enter to all)
jspm init (enter to almost all, except use babel)
jspm install fetch=npm:whatwg-fetch
jspm install react
create an app sub-folder create main.js and copy my code into it
create index.html into root dir.
Then run it with serve

I think the problem is my local server. I'm running it with nodejs http-server and I think the JSX is not transpiled to JS. Also the mentioned serve server is not working.

I'm getting this error message in the browser console:

Potentially unhandled rejection [3] SyntaxError: Error loading "app/main"
[...] Unexpected token <

How do I make it work?

Here is my code, exactly the code from the video (it doesn't run here because no js files added):

//app/main.js
import 'fetch';

import React from 'react';

console.log('Hello world');

class HelloWorld extends React.Component {
	render() {
		return <p>hello world</p>;
	}
}

React.render(<HelloWorld />, document.body);

<!-- index.html -->
<!doctype html>
<html>
<head>
	<title>First jspm</title>
	<script type="text/javascript" src="jspm_packages/system.js"></script>
	<script type="text/javascript" src="config.js"></script>
	<script>
		System.import('app/main');
	</script>
</head>
<body>

</body>
</html>

Noonday answered 14/5, 2015 at 16:40 Comment(4)

Where you say "expect use babel" -- is that supposed to be "except"? I'm not looking at the whole tutorial, just going from what's in your post, but why except babel? Is that what's supposed to be transpiling your JSX in this scenario? – Denaedenarius 14/5, 2015 at 17:13

Yes, sorry, it's a typo. It's except. I'll fix this in a minute. I just use Babel because it's recommended in the tutorial. Not sure what is transpiling the jsx. But Babel have a JSX transformer and maybe it is not used by my code yet. – Noonday 14/5, 2015 at 19:28

Does "except use babel" mean that you're including or excluding babel? – Denaedenarius 14/5, 2015 at 19:39

Sorry, it means use babel instead of default option traceur. – Noonday 14/5, 2015 at 19:46

D

3

i have no idea specifically about this tutorial, but JSX needs to have the JSX transpiler included before your JSX files are loaded. it then looks for any script tags that have type="text/jsx" to compile to regular JavaScript.

It sound's like this tutorial may have complicated this matter.

Dement answered 14/5, 2015 at 17:32 Comment(1)

Thanks for the tip that the transpiling needs to happen before the jsx files are loaded. That pushed me in the right direction. Babel will do the transpiling if correctly configured. – Noonday 14/5, 2015 at 19:45

A

5

get similar issue when i work on a es6+react demo on browser, figure out finally

<!doctype html>
<meta charset="utf-8">
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.20.12/system.js"></script>

<script>
SystemJS.config({
    baseURL:'https://unpkg.com/',
    defaultExtension: true,
    meta: {
        '*.jsx': {
            'babelOptions': {
                react: true
            }
        }
    },
    map: {
        'plugin-babel': 'systemjs-plugin-babel@latest/plugin-babel.js',
        'systemjs-babel-build': 'systemjs-plugin-babel@latest/systemjs-babel-browser.js',
        'react': '[email protected]/dist/react.min.js',
        'react-dom': '[email protected]/dist/react-dom.min.js'
    },
    transpiler: 'plugin-babel'
});


SystemJS.import('./comp-a.jsx').then(function (m) {
    console.log(m);
});
</script>

Ataractic answered 10/5, 2017 at 2:40 Comment(1)

thank you very much for sharing this. It made my day. :D – Vitriolize 4/12, 2017 at 15:30

N

4

Ok, I've figured it out.

It was mentioned in the video tutorial but I thought it is not needed. Anyway, it is required.

Add blacklist: [] to the configuration of babelconfig inside of config.js!!

From Babel homepage:

JSX support is currently disabled by jspm. To re-enable it, add "blacklist": [] to babelOptions in the jspm configuration file.

With this added Babel will automatically check the imports / exports and transpils the jsx.

Noonday answered 14/5, 2015 at 19:43 Comment(2)

I would add that you need new version of jspm as well! That was the reason why it failed with same error for me – Treaty 15/5, 2015 at 16:27

This is not working for me, is it still a valid solution? – Gastroenterostomy 24/1, 2016 at 22:12

D

3

i have no idea specifically about this tutorial, but JSX needs to have the JSX transpiler included before your JSX files are loaded. it then looks for any script tags that have type="text/jsx" to compile to regular JavaScript.

It sound's like this tutorial may have complicated this matter.

Dement answered 14/5, 2015 at 17:32 Comment(1)

Thanks for the tip that the transpiling needs to happen before the jsx files are loaded. That pushed me in the right direction. Babel will do the transpiling if correctly configured. – Noonday 14/5, 2015 at 19:45

I

0

It seems like the current way to use jsx with jspm (with jspm 0.16.* anyway) is to install:

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.

In jspm 0.17.* (currently in beta), it seems like there may be a different way, but at least it's actually covered in the jspm docs.

Integrator answered 15/7, 2016 at 2:55 Comment(0)

Recommended topics

Hot tags