Hot loading doesn't work when using Relay about react-transform-hmr HOT 9 CLOSED

I don't have a good solution right now. Hopefully we'll have something that detects any kind of component by the end of this year.

Actually, I do have a solution now: gaearon/react-hot-boilerplate#61. Not sure whether it works with Relay, but I don’t see why not.

from react-transform-hmr.

My project is closed-source, so I can't share the code. Maybe I'll try to whip up an example

from react-transform-hmr.

Please create a minimal reproducing example.

from react-transform-hmr.

Okay, I got it working.. the problem in my case was that I was specifying the query.plugins with babelRelayPlugin in webpack. As soon as I moved that to my .babelrc, everything worked fine.

I'll let you know if I run into anything else, but for now I'm closing this.

from react-transform-hmr.

@gaearon I seem to have the same problem. fortruce/relay-skeleton#1 seems to suggest that hot reload works only for exported components, but not for exported Relay containers wrapping the former. Is that the case? And if so, do you have any suggestions on how to deal with that? Thank you :)

from react-transform-hmr.

I don't have a good solution right now. Hopefully we'll have something that detects any kind of component by the end of this year.

from react-transform-hmr.

App.js:

export class AppComponent extends Component {
  render() {
    return <h1>Plain Old React Component</h1>
  }
}

const App = Relay.createContainer(AppComponent, {...});

export default App;

index.js:

import App, {AppComponent} from './App';

I am using the above pattern. HMR works like a charm.

Of course, when working with Relay, this would suffice:

import App from './App';

Without Relay, in a normal Ract app, I'd write this:

import {AppComponent} from './App';

from react-transform-hmr.

@laszbalo that works indeed, very clever (except that I now get annoying linter warnings about the unused import) – looking forward to v3 though!

from react-transform-hmr.

@skosch in the above example that App module exports two things:

1. AppComponent; named export, just a plain React component
2. App; default export, a Relay-powered React component

If you are using Relay, you probably want to import only the App component from the App module. Hence there should be no linter warnings.
If your project does note use Relay, you only want to import AppComponent component from the App module.

from react-transform-hmr.