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>

score 0 · Answer 1 · answered Mar 07 '16 at 02:47

You have these problems:

index.html: System.import('js/app.jsx!jsx') should have been System.import('./app')
app.jsx: import Test from './test.jsx!' should have been import 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

basic JSPM React sample failing erroring on loading react-tools/vendor/fbtransform/visitors

--> problem plnkr.co sample here <--

1 Answers1