We use react and react-loadable.
During our application initialization, we are verifying that the component.preload method is existing for each <Route /> we define.
If the method is missing, we display a warning that show that the component should be loadable.
We use webpack 4, is there a way to automatically wrap the component, so we don't have to do it manually?
This is how a component look like:
/** MyComponent.js: page component */
export default () => <div>Hello world</div>;
This is the same component wrapped in a react-loadable component:
/**
* preconfigured react-loadable
* See https://github.com/jamiebuilds/react-loadable#how-do-i-avoid-repetition)
*/
import MyLoadable from '@scopped/react-loadable';
/** loadable component */
export default MyLoadable({
loader: () => import('./MyComponent'), /** import page component */
});
- Our
<Route />are declared innode_modulesand from within different packages. - It may be declared using
<Resource />(from react-admin) instead of<Route /> - They are not distributed in ESM format but only CJS (CommonJS).