Loadable-components: I get an error. Check the render method of `InnerLoadable`

[pavliha]

When I try to navigate to other async component in react router I get

And when I reload the page everything works again
Issue reproduced here https://github.com/pavliha/ssr-app.

[gregberge]

Hello @pavliha, I gave a quick look in your code and everything looks fine for me. Maybe someone else could give a look and help you!

[pavliha]

Thanks for checking out this case @neoziro. For some reason await import('./TestScene') returns empty object

And later I figured out this is react-hot-loader breaks everything. How react-hot-loader affects module import is still a question. I think this is because I'm using webpack-dev-middleware instead of webpack-dev-server. Looks like react-hot-loader and webpack-dev-middleware does not work together as expected

[theKashey]

Double checked - loadable and RHL are not playing well together (no automatic reload), but no error is present.

@pavliha - could you __disable source maps__ and give me _final_ sources for TestScene - let's find the root cause.

[pavliha]

@theKashey. I've updated the repo maybe something was missing. Hmm maybe I could write some steps to reproduce an issue. Just in case
1) yarn install
2) rename .env.example to .env
3) yarn start
4) open http://localhost:2000
5) click on test link

In the updated repo. I have disabled source maps and connected sources of the @loadable/component via webpack aliases

[pavliha]

I have a similar setup but with webpack-dev-server and loadable works with react-hot-loader. It is webpack-dev-middleware that causing the problems. Official documentation for react-hot-loader says it's not yet supported

[theKashey]

That's now "official" documentation, as long as we dropped a ball on it a bit, but it's supported - the problem is more about proper configuration.
I will try to fill this gap in the documentation.

[pavliha]

@theKashey thank you a lot. Have you tried to find core problem in this particular case?

[theKashey]

Not yet.

[theKashey]

Long story short - everything is very bad:

• RHL thinks that HMR is "active"
• RHL does not sees Index and Test as a "registered" variables
• RHL does a false positive merge of Index and Test, thinking that Index "isReady"(exists in the cache), and then calling requireSync for Test. Don't ask.

[theKashey]

• HMR is open after importing a new code block. That's expected behavior
• False positive for forwardRef. Something to be fixed.

[theKashey]

• fix created. Will release a new version of RHL in an hour. No changes from loadable-component are required.

[Anatoool]

I have the same issue. I am using react-router-dom.

`
const HomePage = loadable(() => import(/* webpackPrefetch: true / '../pages/AuthPages/HomePage'));
const RepresentativeRegistrationPage = loadable(() =>
import(/ webpackPrefetch: true */ '../pages/AuthPages/RepresentativeRegistrationPage')
);

    <Route
      exact
      path={ROUTES.HOME_PAGE}
      render={(props) =>
         (!isAuthentificated ? <Redirect to={ROUTES.LOGIN} /> : <HomePage {...props} />)}
    />

    <Route
      exact
      path={ROUTES.REPRESENTATIVE_REGISTRATION}
      render={(props) => !isAuthentificated ? <Redirect to={ROUTES.LOGIN} /> : 
      <RepresentativeRegistrationPage {...props} />}
    />

`

When I have Redirect outside loadable It works fine.

But when I am trying return inside Loadable component from to a have error.

[theKashey]

I am on it. Just cant merge and deploy anything at 00:06

[theKashey]

React-Hot-Loader v4.9.0 should fix the issue.

[pavliha]

@theKashey man you are THE BEST!!!. Thank you so much. Issue resolved

[theKashey]

I should say - sorry for affecting you all by this issue for a few months...