v5 : Cannot assign to read-only property 'length'. Unable to load federated module.

[sahajarora1286]

Hi, I'm trying to upgrade Repack to v5.0.0.rc-10.
When my host app tries to load a mini app, the mini-app's webpack dev server compiles successfully but I now get the following error thrown in the app on the Android emulator:

Cannot assign to read-only property 'length', stack:
TypeError: Cannot assign to read-only propertly 'length'
  at anonymous (http://<my-ip>:<my-port>/app1.container.bundle?platform=android:270:43)
  at forEach (native)
  ....

Please see full stack trace in the attached screenshot

// webpack.config.mjs (host)

// Module Federation plugin
new Repack.plugins.ModuleFederationPlugin({
      name: 'host',
      remotes: {
        app1: `app1@http://<my-ip>:<my-port>/${platform}/mf-manifest.json`,
      },
      shared: {
        ...getSharedModuleFederationPluginsNative('host'),
      },
    }),

// webpack.config.mjs (mini-app app1)

// Module Federation plugin
new Repack.plugins.ModuleFederationPlugin({
      name: 'app1',
      exposes: {
        './HubCard': './src/components/HubCard',
        './RemoteAppSlice': './src/slices/appSlice',
        './EntryRouteHandler': './src/App.tsx',
      },
      shared: {
        ...getSharedModuleFederationPluginsNative('app1'),
      },
    }),

// index.js (host)

const containers = Object.keys(remoteAppsConfig).reduce((accumulator, key) => {
  const container = remoteAppsConfig[key];
  accumulator[key] = Platform.select({
    ios: `${container.iosUrl}/[name][ext]`,
    android: `${container.androidUrl}/[name][ext]`,
  });

  return accumulator;
}, {});

const resolveURL = Federated.createURLResolver({
  containers,
});

ScriptManager.shared.addResolver(async (scriptId, caller) => {
  let url;
  if (caller === 'main') {
    url = Script.getDevServerURL(scriptId);
  } else {
    url = resolveURL(scriptId, caller);
  }

  if (!url) {
    return undefined;
  }

  return {
    url,
    cache: false, // For development
    query: {
      platform: Platform.OS,
    },
    // This timeout can be adjusted based on how long it takes for micro-app
    // dev servers to compile their code
    timeout: 200000, // ms
  };
});

I can really use some immediate help in getting a resolution to this please. Upgrading to v5 is crucial for our project since we need NativeWind working in the app.

Thanks in advance! 🙏

[sahajarora1286]

On further debugging, I found that the error was in the guardedRequire.js file of node_modules/@callstack/repack/dist/plugins/RepackTargetPlugin/implementation on line 24:

guardedWebpackRequire[key] = originalWebpackRequire[key];

The problem is that the lengths of guardedWebpackRequire and originalWebpackRequire don't match, and hence the assignment crashes with the reported error.

Here's a workaround that worked (i.e manually modified that code to):

const descriptor = Object.getOwnPropertyDescriptor(originalWebpackRequire, key);
    if (!descriptor || descriptor.writable) {  // Skip read-only properties
      guardedWebpackRequire[key] = originalWebpackRequire[key];
    }

A formal fix or a suggestion for a formal fix from the Repack team would be highly appreciated. Thanks!

[jbroma]

@sahajarora1286 can you please upgrade to rc11 and see if this is still happening?

[sahajarora1286]

Thanks @jbroma !

I upgraded to rc11 and now the mini-app's webpack dev server no longer starts. It crashes with the error:

Starting dev server for platform android
Local IP:  172.16.20.151
stderr: error Cannot read properties of undefined (reading 'devServer').

TypeError: Cannot read properties of undefined (reading 'devServer')
    at Object.start [as func] (/my-project/node_modules/@callstack/repack/dist/commands/webpack/start.js:48:39)
    at async Command.handleAction (/my-project/apps/app1/node_modules/@react-native-community/cli/build/index.js:118:9)

The stack trace points to line 48 in start.js under @callstack/repack/dist/commands/webpack/ :

const devServerOptions = configs[0].devServer ?? {};

Change commit: Commit

On rc10 I don't see this crash.

[sahajarora1286]

Nevermind. I didn't have the platform object added to the exported module in react-native.config.js. Adding that resolved the devServer error.

[jbroma]

that shouldn't be necessary, since android and ios should be defined by default in RN config (unless you set platforms to empty object) - did RC11 resolve the problem after that was fixed?

[sahajarora1286]

It was necessary because the start.js script of repack webpack commands expects configs[0].devServer to exist but configs in my case was an empty array and hence the code would crash at that line when it would try to access the first element.

On further investigation into how the config object was being generated in that script, I found the reason why the generated / returned configs array was empty. It was because there was no options.platform present in that function.

makeCompilerConfig.js

Then I realized that in my CLI command (webpack-start), I was not passing a platform arg.
I tried passing android and then got the error "Unrecognized platform: android".
At that point I realized that the start function was looking for a platforms object on cliConfig but wasn't getting any.
I added it to my react-native.config.js and then I finally got rid of that devServer error.

Not sure about RC11 but RC12 certainly did solve the original issue of this discussion once I got rid of the above mentioned devServer error by adding the platforms object to react-native.config.js and passing a platform value in the CLI command to start the webpack dev server.

Thanks again for your help!