Hot loading doesn't work when using Relay

[idris]

(issue moved from gaearon/babel-plugin-react-transform#39)
Since I started using Relay, hot loading always gives the error

[HMR] The following modules couldn't be hot updated: (They would need a full reload!)

The issue is also mentioned in fortruce/relay-skeleton#1, but I don't think that solution is a good way to go.

[idris]

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

[gaearon]

Please create a minimal reproducing example.

[idris]

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.

[skosch]

@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 :)

[gaearon]

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.

[laszbalo]

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';

[gaearon]

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.

[skosch]

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

[laszbalo]

@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.