search

geelen / jspm-loader-jsx

A hot-reloading JSX plugin for JSPM
21 stars 2 forks source link

Hot reloading issue #5

Open peteruithoven opened 9 years ago

peteruithoven commented 9 years ago

I can't figure out how to get hot reloading working.

I've added a empty blacklist array to babelOptions in config.js.

  "babelOptions": {
    "blacklist": []
  },

I've installed this plugin. From config.js:

"jsx": "npm:jspm-loader-jsx@0.0.7",

I'm using JSPM: 0.16.0-beta.3 I'm using JSPM-server: 0.1.8

My index.html uses System.import to load the first module:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <script src="jspm_packages/system.js" charset="utf-8"></script>
    <script src="config.js" charset="utf-8"></script>
    <script type="text/javascript">
      System.import('lib/app.js');
    </script>
  </head>
  <body>

  </body>
</html>

app.js

import MyComponent from './component.jsx!';

// export let __hotReload = true; // tried

component.jsx

import React from 'react';

export default class MyComponent extends React.Component {
  render () {
    return (
      <div>hello world</div>
    );
  }
}
React.render(<MyComponent />, document.body);

// export let __hotReload = true;  // tried

JSPM-server always responds to changes with:

JSPM watching enabled!
Change detected in lib/component.jsx that cannot be handled gracefully: Change occurred to a file outside SystemJS loading
peteruithoven commented 9 years ago

Is there anything I can do to debug this?

MichalZalecki commented 8 years ago

Same here.

I'm using JSPM: 0.16.12 I'm using JSPM-server: 0.1.8

calvinfroedge commented 8 years ago

Same issue here. jspm: 0.16.13 jspm-loader-jsx: 0.0.7 jspm-server: 0.1.8

johngeorgewright commented 8 years ago

Same here.

jspm: 0.16.14 jspm-loader-jsx: 0.0.7 jspm-server: 1.0.1

As I was seeing stuff like:

💥  Change to http://127.0.0.1:8080/app/app.jsx.js cannot be handled gracefully:
👉  Change occurred to a file outside SystemJS loading

I thought it might have been to do with the "app.jsx.js" (.js on the end which doesn't exist). But changing the filename doesn't do anything.

johngeorgewright commented 8 years ago

On further investigation, I found that changing the export of this plugin to:

export function translate( load ) {
  // ...
}

... kicks off the plugin correctly. However, now the update doesn't actually do anything. Could that be because the react-hot-api is deprecated?

peteruithoven commented 8 years ago

@johngeorgewright I'm switching to https://github.com/capaj/jspm-hot-reloader, very very basic example: https://github.com/peteruithoven/jspm-hot-reloader-example

elliotlings commented 8 years ago

I've also switched to https://github.com/capaj/jspm-hot-reloader as @peteruithoven suggested. I also found it reloads CSS, etc too!