How to run a SystemJS / React demo locally using JSX?
I am following this video tutorial at the moment and I am stuck with a simple HelloWorld application. At the time the 12m: 31s position where I was stuck, it should show HelloWorld
, but it is not.
The app uses SystemJs, React and JSX.
To build your application, follow these steps in your terminal (node and jspm):
-
npm init
(enter
for everyone) -
jspm init
(enter
for almost everyone except using babel) -
jspm install fetch=npm:whatwg-fetch
-
jspm install react
- create application subfolder create
main.js
and copy my code into it - create
index.html
in the root directory. - Then run it with serve
I think the problem is with my local server. I am running it with nodejs http-server
and I think JSX is not translating to JS. Also the mentioned server serve
is down.
I am getting this error message in the browser console:
Potentially unhandled rejection [3] SyntaxError: Error loading "app/main"
[...] Unexpected token <
How do I get it to work?
Here is my code, exactly the code from the video (it doesn't run here because no js files are 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>
source to share
Ok I figured it out.
This was mentioned in the video tutorial, but I thought it was unnecessary. In any case, it is necessary.
Add blacklist: []
to babelconfig config inside config.js !!
From Babel Homepage :
JSX support is currently disabled by jspm. To enable it again, add
"blacklist": []
tobabelOptions
jspm.
With this added Babel will automatically validate imports / exports
and drag and drop the jsx.
source to share
get similar problem when i work on es6 + demo in browser, finally figure out
<!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': 'react@15.3.2/dist/react.min.js',
'react-dom': 'react-dom@15.3.2/dist/react-dom.min.js'
},
transpiler: 'plugin-babel'
});
SystemJS.import('./comp-a.jsx').then(function (m) {
console.log(m);
});
</script>
source to share
It looks like the current way of using jsx with jspm (as of jspm 0.16. * Anyway) is to install:
jspm install npm:jspm-loader-jsx
This is the only way I have managed to get it to work. I didn't need to set the blacklist in []. I am using the .js extension.
I found out about jspm-loader-jsx from this blog post after many hours trying other things and looking online for help.
In jspm 0.17. * (currently in beta) seems like there might be another way, but at least it's actually described in the jspm docs .
source to share