Interoperability with react-async-component

[SathishGovindaraju]

Thanks for all the nice libraries :)

I am finding it hard to make this react-async-component work with react-jobs. The following scenario does not work. Looks like it doesn't resolve the dynamic import before rendering. I use react-async-bootstrapper to do server-side rendering as described in the README.

/* Location of file "src/Home.jsx" */
const Home = props => (
  <div>
    I am home HomePage
  </div>
);

/** 
 * Uses react-async-component
 * Location of file "src/AsyncHomePage.jsx"
*/
const AsyncHomePage = asyncComponent({
  resolve: () => import('./Home')
});

/** 
 * Uses react-jobs
 * Component responsible for running all the jobs before rendering 
 * Location of file "src/DependencyResolver.jsx"
*/
const DependencyResolver = withJob({
    LoadingComponent: () => <Loader />,
    ErrorComponent: () => <GenericError />,
    work: ({
      dependencies = [],
      dispatch
    }) => Promise.all(
      dependencies.map(
        dependency => dispatch(dependency())
      )
    )
  })(AsyncHomePage);

AsyncHomePage is not rendered in the above scenario. Looks like the dynamic-import is not resolved on the server-side.

Having said that, the following works when I change the order.

/* Location of file "src/Home.jsx" */
const Home = props => (
  <div>
    I am home HomePage
  </div>
);

/** 
 * Uses react-jobs
 * Component responsible for running all the jobs before rendering 
 * Location of file "src/DependencyResolver.jsx"
*/
const DependencyResolver = withJob({
    LoadingComponent: () => <Loader />,
    ErrorComponent: () => <GenericError />,
    work: ({
      dependencies = [],
      dispatch
    }) => Promise.all(
      dependencies.map(
        dependency => dispatch(dependency())
      )
    )
  })(Home);  // <== Replaced './AsyncHomePage'

/**
 * Uses react-async-component
 * Location of file "src/AsyncHomePage.jsx"
*/
const AsyncHomePage = asyncComponent({
  resolve: () => import('./DependencyResolver') // <== Replaced './Home'
});

Now instead of passing AsyncHomePage to the DependencyResolver, I am passing the normal component and dynamically import the DependencyResolver

[SathishGovindaraju]

@ctrlplusb (sorry for the tag) Would be really great if you could look into this ASAP :) Would love to get this scenario working :)

[oyeanuj]

@SathishGovindaraju I take back the earlier comment. Actually, on further investigation of your issue, it seemed similar to what I was facing in #56 and to me, seems like a issue on react-tree-walker which I have created here incase you are interested in chiming in - https://github.com/ctrlplusb/react-tree-walker/issues/27

[unleashit]

Just thought I'd say this is all working for me. Try wrapping your resolve function in a promise. Maybe React Jobs is needing that. If that doesn't work, next try using the old webpack require.ensure instead of import. It's been close to a year so I can't even remember why I came to this (Lol), but here's how I do it and it works...

import { asyncComponent } from 'react-async-component';

export default asyncComponent({
  resolve: () =>
    new Promise(resolve =>
      require.ensure(
        [],
        (require) => {
          resolve(require('./admin'));
        },
        'admin',
      ),
    ),
  name: 'admin',
});

[SathishGovindaraju]

@oyeanuj and @unleashit Thanks for your replies. I got it working without the need for react-async-component. Instead, I pass in the component (as a dynamically-imported function) and resolve the component myself by calling it inside the work before resolving other jobs. This seems to work good for my scenario

[ctrlplusb]

I've added a demo of this here: https://razzle-async-components-and-data.now.sh/

Source linked 👍

[oyeanuj]

@ctrlplusb Seems like the above link isn't working. Could you point me to the source if the link is down?