How to download chunk from server on demand

[daiquangduy]

Ask your Question

I have 2 questions:

1. When I use ChunkManager.loadChunk('miniapp'), I received log: [DevServer@ios] Route GET:/undefined not found. Do I have a missing config somewhere?

2. I understand that I can code a Remote component -> bundle remote chunk has name is remote.chunk.bundle -> upload this chunk to my server -> and in my other project, I can display Remote component without any code related to this Remote component by downloading remote.chunk.bundle via ChunkManager. Is my understanding correct?

I had code:

index.js

import { AppRegistry } from 'react-native';
import { ChunkManager } from '@callstack/repack/client';
import AsyncStorage from '@react-native-async-storage/async-storage';
import App from './src';
import { name as appName } from './app.json';

ChunkManager.configure({
    storage: AsyncStorage,
    resolveRemoteChunk: async (chunkId) => {
        return {
            url: `https://dev-api.mydomain.com/students/${chunkId}`,
        };
    },
});

AppRegistry.registerComponent(appName, () => App);

src/index.js

import React from 'react';
import { Text } from 'react-native';

const Remote = React.lazy(
    () => import(/* webpackChunkName: "remote" */ './Remote.js')
);

const App = () => {
    return (
        <React.Suspense fallback={<Text>Loading...</Text>}>
            <Remote />
        </React.Suspense>
    );
}

export default App;

But I get the error: Can't not find module './Remote.js'.

Please help me. Thank you !!!

[zamotany]

I understand that I can code a Remote component -> bundle remote chunk has name is remote.chunk.bundle -> upload this chunk to my server -> and in my other project, I can display Remote component without any code related to this Remote component by downloading remote.chunk.bundle via ChunkManager. Is my understanding correct?

That's not how it's intended to work, at least not the async chunks approach.

What you're describing is a scenario with 2 project (2 separate Webpack compilations), whereas Async chunks approach is for single project (single Webpack compilation). In theory you could do it with 2 projects, but the likelihood of it working is very slim - most likely it will crash the app because chunks from project A are not compatible with chunks from project B.

If you still want to have 2 projects, your only options are:

• Scripts
• Module Federation

[TMaszko]

You can use flag forceRemoteChunkResolution and it will use provided url as a source instead of the current dev server even in the development mode.

[RafikiTiki]

As @zamotany suggested – Module Federation is probably the right option for your use case, luckily repack v3 has official support for MF built in.