[Error] Server and Client modules are not sync about loadable-components HOT 24 CLOSED

I think I could make it possible by adding a require.resolveWeak('./Bar') like React Loadable does. But right now I do not want to couple it with Webpack.

I will give you a solution, you can do it if you want:

The loadableState you get has a tree properties, the solution for you is to walk the tree and try to get the full path of the module.

If you got the full path of the module, you can easily load it client side.

The actual problem is that you only get the relative path of the module, so you can't tell to Webpack "Load my module". Do you see the problem?

from loadable-components.

You can compare client modules and server modules and see what's going on.

from loadable-components.

@neoziro

If I export my routes config as a function, loadable-components not work:

import loadable from 'loadable-components';

import type { Dispatch } from './types';
import { fetchUsersIfNeeded } from './actions/users';
import { fetchUserIfNeeded } from './actions/user';
import { Loading, Error } from './components/index';

export default () => [
  {
    path: '/',
    exact: true,
    component: loadable(() => import('./containers/Home'), {
      LoadingComponent: Loading,
      ErrorComponent: Error
    }), // Add your route here
    loadData: (dispatch: Dispatch) =>
      Promise.all([
        dispatch(fetchUsersIfNeeded()) // Register your server-side call action(s) here
      ])
  },
  {
    path: '/UserInfo/:id',
    component: loadable(() => import('./containers/UserInfo'), {
      LoadingComponent: Loading,
      ErrorComponent: Error
    }),
    loadData: (dispatch: Dispatch, params: Object) =>
      Promise.all([dispatch(fetchUserIfNeeded(params.id))])
  },
  {
    component: loadable(() => import('./containers/NotFound'), {
      LoadingComponent: Loading,
      ErrorComponent: Error
    })
  }
];

If I export my routes config as an array, loadable-components works:

import loadable from 'loadable-components';

import type { Dispatch } from './types';
import { fetchUsersIfNeeded } from './actions/users';
import { fetchUserIfNeeded } from './actions/user';
import { Loading, Error } from './components/index';

export default [
  {
    path: '/',
    exact: true,
    component: loadable(() => import('./containers/Home'), {
      LoadingComponent: Loading,
      ErrorComponent: Error
    }), // Add your route here
    loadData: (dispatch: Dispatch) =>
      Promise.all([
        dispatch(fetchUsersIfNeeded()) // Register your server-side call action(s) here
      ])
  },
  {
    path: '/UserInfo/:id',
    component: loadable(() => import('./containers/UserInfo'), {
      LoadingComponent: Loading,
      ErrorComponent: Error
    }),
    loadData: (dispatch: Dispatch, params: Object) =>
      Promise.all([dispatch(fetchUserIfNeeded(params.id))])
  },
  {
    component: loadable(() => import('./containers/NotFound'), {
      LoadingComponent: Loading,
      ErrorComponent: Error
    })
  }
];

Very wired... If I remove loadable-components and use non loadable-components both exports way work.

from loadable-components.

Hmm it could be an issue in the tree traverser can you give a reproducible example on CodeSandbox?

from loadable-components.

@neoziro

Sure, you can see my error reproduce here.

And here's the error that I encounter:

from loadable-components.

Can I hope that this problem will be fixed in a nearest few days?

from loadable-components.

@max-mykhailenko Did you also encounter this problem?

from loadable-components.

Not yet, I always look at issues before start using any lib and my case is more complex: I want to write something like this

const component = import('./Books');
const What = loadable(async () => {
  const [{ default: Books }, { default: books }] = await Promise.all([
    component,
    ...getCalledActionsAndGetPromisesArrayBack(store),
   //  or  ...getActionsFilesPromisesArrayBack(store),
  ])

  return props => <Books {...props} books={books} />
})

from loadable-components.

Right now, I don't have time to investigate it but I think this is a problem in the tree traverser. If someone could give a look I will be glad!

from loadable-components.

@wellyshen I recommend to change structure and export routes without function. After big workaround with many loadable components and react-hot-loader I can say that it's only one possible way to do that.

from loadable-components.

@neoziro Any update for this issue?

from loadable-components.

Not on my side.

from loadable-components.

@neoziro Did you mean the issue isn't caused by this library?

from loadable-components.

No I mean I haven’t time to investigate it yet. I think that the tree traversal is not working for your specific case. Do you have a complete example so I could try to see exactly the source of the problem?

from loadable-components.

@neoziro Sure, you can see my error reproduce here and run the branch to see what's going on.

from loadable-components.

Your static route configuration looks a bit tricky. I will try to run your project probably this week end, I keep you up to date!

from loadable-components.

Yea I use the route config of react-router for SSR

from loadable-components.

I thought I had the same issue so I looked at it a bit.

In order to build the client modules object (the ones in the warning), the library needs to run all the loadable calls.

Therefore when you call loadComponents you must have created all your loadable Components beforehand. In your specific case @wellyshen you defer them later when you render your AppContainer. That's why it fails to register the loadable components since no render has been done yet. And that's also why the version without a function works fine.

So in my opinion, that's not a bug, it's by design :)

(For my issue, it was because I had several instances of loadable-components bundled in my code.)

from loadable-components.

Seems fixed https://github.com/wellyshen/react-cool-starter/blob/error-reproduce-loadable-components/src/routes.js#L16

from loadable-components.

@JulienPradet you are right, the issue was that loadable components were created lazily.

from loadable-components.

@neoziro My goal is to wrap loadable-components in a function like this for implementing async reducers. But loadable-components will throw error when it's wrapped in a function.

from loadable-components.

OK, this is not possible for now. It will not work with SSR mode.

from loadable-components.

Alright, I got it. Thanks 👍

from loadable-components.

Okay, I will survey it when I have time and ask you questions about it man 👍

from loadable-components.