Wondering what’s next for npm?Check out our public roadmap! »


0.0.7 • Public • Published

JSPM Loader: JSX

A hot-reloading JSX plugin for JSPM

To use in your project:

jspm install jsx=npm:jspm-loader-jsx

Then in your application:

// config.js - ensure you have the following
  babelOptions: {
    blacklist: []
// main.js
import MyComponent from 'my-component.jsx!'
// my-component.jsx
import React from 'react'
export default MyComponent extends React.Component {

Note: this plugin only works with ES6 JSX files. And be sure your System.js has babelOptions: { blacklist: [] }, since JSX transpilation is disabled by default.

To use JSX live-reload

If your file is called my-component.js, this plugin will look for a React component named MyComponent in the file as the default export. If it finds it, it will try to apply react-hot-api so the component can be reloaded while preserving state. It's amazing.

If no MyComponent is defined, or it's not a React component, it will fall back to setting __hotReload = true. See jspm-server for more information.


If you're finding the page reloading a lot, look in the console for information. A generally-safe approach is adding export let __hotReload = true to your main.js (whereever your React.render call is). Then, if a single file can't be hot-reloaded, it will bubble up and the whole React app will be reloaded. You'll lose whatever state is in the application, but at least the whole browser won't reload.

With thanks

  • Guy Bedford for JSPM
  • Dan Abramov for React Hot Api

Glen Maddern, 2015.


npm i jspm-loader-jsx

DownloadsWeekly Downloads






Last publish


  • avatar