Should I need to set the "Debug server host & port for device" on android in or to do Lazy component/bundle loading?

[DaveWelling]

Ask your Question

I have some components lazy loading using react.lazy() and react.Suspense. This works fine in the browser, but when I port the component code to react native and use nativepack/repack on my Android device, it fails with a network error trying to reach localhost/127.0.0.1:54571. Then it follows immediately with an error pointing to the bundle corresponding to the lazy loaded component. That looked suspicious to me so I went to the debug menu for the device application and changed the 'Debug server host & port for device" to be my [dev machine local external IP address]:54571 (e.g. 192.168.12.103:54571).
This worked, but is not documented as a necessary step in the instructions, so I was wondering if that is the intended behavior?

[DaveWelling]

BTW, I am running in debug mode.
It turns out I cannot start the application with the Debug server host & port for device set to anything. If I do, it will never see the server. I'm not sure if this is because the actual compiler worker port is randomly assigned and only started after the app connects to the debugger? Anyway, today (after I remove the "Debug server host & port for device" setting) the app started to load, and I see that it is a different port number (59836 instead of 54571 like yesterday).
At that point it fails again with
ExceptionsManager.js:180 WebpackToolkit.loadChunk invocation failed: Failed to connect to localhost/127.0.0.1:59836 [NetworkFailure]
followed by

(missing: http://localhost:59836/lib_ui-components_src_components_appLayout_LeftSideNavAppLayout_js.chunk.bundle)
This error is located at:
    in Lazy (created by HNode)
    in Suspense (created by HNode)
    in HNode (created by UseCaseRoot)
    in RCTView (at View.js:34)

At this point, I can set the "Debug server host & port for device" setting to my dev machine's IP with the new port (e.g. 192.168.12.103:59836) and everything works.

[zamotany]

No, you should not need to set Debug server host & port for device. You're right in that the port for each platform specific compiler is randomly generated. If you update to @callstack/repack@2.0.0-beta.7 this problem should disappear - we've added a code to automatically run adb reverse on that dynamic port. Alternatively you can manually run adb reverse tcp:<port> tcp:<port> and reload the app.

Also please be aware that the support for code splitting is still an experimental feature which we are actively working on, so there might be some problems. Nevertheless I recommend switching to 2.0.0-beta.7 since this one has more code splitting features and it's more throughoutly tested for code splitting.

On a side note. you might want to look into these config options: https://webpack.js.org/plugins/split-chunks-plugin/ to better control code splitting, if e.g. you don't want to have chunks like lib_ui-components_src_components_appLayout_LeftSideNavAppLayout_js.chunk.bundle

[DaveWelling]

@zamotany Thank you very much for your thoughtful and comprehensive reply.