How to run SystemJS/React demo locally with JSX?
Question
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(enterto all) -
jspm init(enterto almost all, except use babel) -
jspm install fetch=npm:whatwg-fetch -
jspm install react - create an app sub-folder create
main.jsand copy my code into it - create
index.htmlinto 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>
4 answers
solution1
4 2015-05-14 19:43:02
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": []tobabelOptionsin the jspm configuration file.
With this added Babel will automatically check the imports / exports and transpils the jsx.
solution2
3 ACCPTED 2015-05-14 17:32:51
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.
solution3
3 2017-05-10 02:40:34
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': '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>
solution4
0 2016-07-15 02:55:30
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 .
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.