How to Type Lazy Components

[steventnorris]

How are we intended to make typescript happy with remote chunks loaded lazy as is suggested in the docs? Using the below code I always get Property 'NavigationContainer' does not exist on type 'LazyExoticComponent<ComponentType<any>>'.

import React from 'react';
import Main from './src/host_core/Main';
import {Federated} from '@callstack/repack/client';
import MicrofrontendRemoteNativeContainer from './src/microfrontend_containers/MicrofrontendRemoteWebview';
import MicrofrontendRemoteWebviewContainer from './src/microfrontend_containers/MicrofrontendRemoteWebview';
import {Text} from 'react-native';

const NavigationProvider = React.lazy(() =>
  Federated.importModule('NavigationProvider', './NavigationProvider'),
);

function App(): JSX.Element {
  return (
    <>
      <React.Suspense
        fallback={<Text>Please hold while we fetch remote chunks...</Text>}>
        <NavigationProvider.NavigationContainer>
          <NavigationProvider.Stack.Navigator initialRouteName="Main">
            <NavigationProvider.Stack.Screen name="Main" component={Main} />
            <NavigationProvider.Stack.Screen
              name="MicrofrontendRemoteNative"
              component={MicrofrontendRemoteNativeContainer}
            />
            <NavigationProvider.Stack.Screen
              name="MicrofrontendRemoteWebview"
              component={MicrofrontendRemoteWebviewContainer}
            />
          </NavigationProvider.Stack.Navigator>
        </NavigationProvider.NavigationContainer>
      </React.Suspense>
    </>
  );
}

export default App;

[jbroma]

Hey @steventnorris,

we don't have a nice solution for this atm, #270 is about exactly this issue. Right now you can always type this manually by doing a typecast via as NavigationProviderType and having declaration of that component in your repo

[steventnorris]

Thanks @jbroma! I had considered adding an @types package for each microfrontend as a private npm package and using that, but it, in a very small way, muddys the waters of code splitting with ModuleFederation. Having a typescript solution during development would be a great add. Any news on where this might be in the roadmap?

[lakmal-gentem]

@steventnorris have u tried import type {Xyz} from 'remote-module-lib' ?

U can import ur remote types through module path. Webpack will not bundle remote code when only types are ref through imports...

[jbroma]

FYI Module Federation 2 comes with dynamic type generation which should resolve this problem. Support for MF2 is coming in version 5 of Re.Pack