react-nativagtion in async chunk

[chinh2597]

Ask your Question

how to use @react-navigation inside chunk component, it works in development but got this error on production:

FATAL EXCEPTION: mqt_native_modules
    Process: com.test, PID: 20651
    java.lang.Error: ChunkManagerModule.load ChunkMissing url
        at com.callstack.repack.ChunkConfig$Companion.fromReadableMap(ChunkConfig.kt:24)
        at com.callstack.repack.ChunkManagerModule$loadChunk$1.invoke(ChunkManagerModule.kt:26)
        at com.callstack.repack.ChunkManagerModule$loadChunk$1.invoke(ChunkManagerModule.kt:6)
        at com.callstack.repack.ChunkManagerModule$runInBackground$runnable$1.run(ChunkManagerModule.kt:17)
        at android.os.Handler.handleCallback(Handler.java:742)
        at android.os.Handler.dispatchMessage(Handler.java:95)
        at android.os.Looper.loop(Looper.java:157)
        at com.facebook.react.bridge.queue.MessageQueueThreadImpl$4.run(MessageQueueThreadImpl.java:226)
        at java.lang.Thread.run(Thread.java:818)

main app navigation:

<React.Suspense fallback={<Text>Loading ...</Text>}>
  <NavigationContainer>
    <Stack.Navigator>
      <Stack.Screen name="Home" component={HomeScreen} />
      <Stack.Screen name="MiniApp" component={MiniApp} />
    </Stack.Navigator>
  </NavigationContainer>
</React.Suspense>

chunk component (MiniApp Component):

<Drawer.Navigator>
  <Stack.Screen name="NestScreen" component={NestScreen} />
  <Stack.Screen name="NestScreen1" component={NestScreen1} />
</Drawer.Navigator>

[andreszuluaga-wolox]

in my case, I create a Drawer in main app and send this in the props from miniApp component

[zamotany]

@andreszuluaga-wolox Can you provide example or a repro project?

[andreszuluaga-wolox]

of course.

this is my WebpackNavigator

`import * as React from 'react'; import { Text } from 'react-native'; import { createStackNavigator } from '@react-navigation/stack'; import { ChunkManager } from '@callstack/repack/client'; import { Provider } from 'react-redux'; import { persistStore } from 'redux-persist'; import { PersistGate } from 'redux-persist/integration/react'; import store from '@redux/store';

const AuthStack = createStackNavigator(); const AppStack = createStackNavigator(); const LoginStack = createStackNavigator();

async function loadComponent(scope, module) { // Initializes the share scope. This fills it with known provided modules from this build and all remotes await webpack_init_sharing("default"); // Download and execute container await ChunkManager.loadChunk(scope, 'main');

const container = self[scope];

// Initialize the container, it may provide shared modules await container.init(webpack_share_scopes.default); const factory = await container.get(module); const exports = factory(); return exports; }

const Home = React.lazy( () => loadComponent('login', './App.js') );

const Login = React.lazy( () => loadComponent('login', './App.js') );

function HomeWrapper() { return ( <React.Suspense fallback={<Text style={{ textAlign: 'center' }}>Loading...</Text>}> <Home LoginStack={LoginStack} /> </React.Suspense> ); }

function LoginWrapper() { return ( <React.Suspense fallback={<Text style={{ textAlign: 'center' }}>Loading...</Text>}> <Login LoginStack={LoginStack} /> </React.Suspense> ); }

export const AuthNavigator = () => ( <AuthStack.Navigator> <AuthStack.Screen name="Login" component={LoginWrapper} /> </AuthStack.Navigator> );

export const AppNavigator = () => ( <AppStack.Navigator initialRouteName='Home'> <AppStack.Screen name="Home" component={HomeWrapper} /> </AppStack.Navigator> ); `

In my case, I separate the navigation of the Login from that of the Home for security

[zamotany]

I see you're using Module Federation, so I want to first ask if you have any specific reason to use Module Federation as it's not officially supported yet. Here are some questions:

1. Will your project be inside a single repository or splitted across multiple repositories?
2. Will your project be developed by multiple isolated teams or eveyone is working on the same codebase?

[andreszuluaga-wolox]

the project will create by multiple teams in multiple repositories, each repo will test Independently and after this is integrate to base repo. I want that the apk from base repo, will has all modules integrated, is this probable?

[RafikiTiki]

@andreszuluaga-wolox Repack v3 has official Module Federation support. If you want to experiment with it please follow this page in the docs: https://re-pack.netlify.app/docs/module-federation

@chinh2597 If you want to investigate this, please create a repo with reproduction using repack v3 and reopen this issue or create a new one.

Closing this due to inactivity.