basic JSPM React sample failing erroring on loading react-tools/vendor/fbtransform/visitors
Question
Trying to get a very basic react/jspm example working over on plnkr.co but it is erroring out with a number of 404's. Most notably the following:
Uncaught (in promise) Error: XHR error (404 Not Found) loading https://npm.jspm.io/react-tools@0.13.3/vendor/fbtransform/visitors
Error loading https://npm.jspm.io/react-tools@0.13.3/vendor/fbtransform/visitors as "./vendor/fbtransform/visitors" from https://npm.jspm.io/react-tools@0.13.3/main.js
Error loading https://registry.jspm.io/js/app.jsx.js!https://registry.jspm.io/jsx.js
at r (https://jspm.io/system@0.18.17.js:5:11565)
at XMLHttpRequest.o.onreadystatechange (https://jspm.io/system@0.18.17.js:5:12090)
Any thoughts on how to get past these and get the sample to render?
--> problem plnkr.co sample here <--
The code was also copied in the following code snippet (which obviously will never work here as different JSX files are required) just for SO readers that doesn't want to go to plnkr.co.
// app.jsx import React from 'react' import Test from './test.jsx!' React.render( <Test /> , document.getElementById('main') ); //------------------------------ // test.jsx import React from 'react' export default React.createClass({ displayName: 'Test' , render: function () { return ( <div>Awesome Test!</div> ) } }) //------------------------------ //config.js System.config({ });
<!-- index.html --> <!DOCTYPE html> <html> <head> </head> <body> <div id="main"></div> <script src="https://jspm.io/system@0.18.17.js"></script> <script type="text/javascript" src="config.js"></script> <script type="text/javascript"> System.import('js/app.jsx!jsx') </script> </body> </html>
1 answers
solution1
0 2016-03-07 02:47:47
You have these problems:
index.html:
System.import('js/app.jsx!jsx')should have beenSystem.import('./app')app.jsx:
import Test from './test.jsx!'should have beenimport Test from './test'Missing map to your libraries in config.js:
System.config({ map: { "react": "npm:react@0.13.3" } });
Here is the fixed plunker
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.