TypeError: Cannot read property 'call' of undefined

[pratt3351]

Environment

react : 18.2.0
react-native : 0.72.10
repack : 3.7.0
webpack : 5.90.3

Description

I'm facing this issue when following this steps
only in production mode

1. code-spliting some component (like screen)
2. build production app and install it to my real device phone
3. and upload chunk to upstream(like s3), and it works find
4. remove some import some component in spliting code(like import ComponentA from './ComponentA)
5. and upload to bundle.chunk to upstream (like s3)
6. second, third step agian, it fail following error

✖ [13:44:28.332Z][Console] TypeError: Cannot read property 'call' of undefined

This error is located at:
in Lazy
in Suspense
in Unknown (created by SceneView)
in StaticContainer
in EnsureSingleNavigator (created by SceneView)
in SceneView (created by SceneView)
in RCTView (created by View)
in View (created by DebugContainer)
in DebugContainer (created by MaybeNestedStack)
in MaybeNestedStack (created by SceneView)
in RCTView (created by View)
in View (created by SceneView)
in RNSScreen
in Unknown (created by InnerScreen)
in Suspender (created by Freeze)
in Suspense (created by Freeze)

i don't know why it is not work. any help..?

Reproducible Demo

[jbroma]

Hey @pratt3351,

please verify there are no changes in main chunk after you remove the import. Compare both using diff and see if there is something there. Also have you tried checking what's hiding under 264982:35 in the generated bundle code? Best to do that with minifying turned off so the names are not mangled.

[pratt3351]

Hey @pratt3351,

please verify there are no changes in main chunk after you remove the import. Compare both using diff and see if there is something there. Also have you tried checking what's hiding under 264982:35 in the generated bundle code? Best to do that with minifying turned off so the names are not mangled.

@jbroma
hi, thank for reply.
i have a basic question, where can i find main.chunk file in my local device ? sorry for basic question

[pratt3351]

Hey @pratt3351,

please verify there are no changes in main chunk after you remove the import. Compare both using diff and see if there is something there. Also have you tried checking what's hiding under 264982:35 in the generated bundle code? Best to do that with minifying turned off so the names are not mangled.

@jbroma
ok i find something. i use zone.js, so i removed it and then i received this following error.
i guess that Promise construct not working.

any help..?

[jbroma]

Hey @pratt3351,
please verify there are no changes in main chunk after you remove the import. Compare both using diff and see if there is something there. Also have you tried checking what's hiding under 264982:35 in the generated bundle code? Best to do that with minifying turned off so the names are not mangled.

@jbroma hi, thank for reply. i have a basic question, where can i find main.chunk file in my local device ? sorry for basic question

Hi @pratt3351, regarding this, you can unzip the .ipa or .apk (you can change it to .zip and unzip it) and explore the bundle contents and verify it was placed there by OutputPlugin (part of RepackPlugin).

As to your second question, it looks transpiled properly (class-transform), but it fails to include runtime helpers, please create a reproduction repository so I can take a closer look - can't really help you much more than that witohut looking at the code.

[pratt3351]

sorry for late reponse
i'm so sorry, for cant give you to reproduction repository.! (its our business app, and cannot divide logic)

but i find something,
when i build js bundle from this command (npx react-native webpack-bundle --entry-file index.js --platform ios --dev false --reset-cache --bundle-output ./test/main.jsbundle --minify false --sourcemap-output ./test/main.jsbundle.map), diffrence between not removed component main bundle and removed component version main bundle
its looks like this

right side: not removed component jsbundle
left side :removed component jsbundle

in this screenshot, i have a question,

1. why my ProductDetailScreen = react.lazy function webpack_require number is changed ?
   2, i think that productCouponService is removed because it is not used, it is cause of this error ?

thinks for your help. always @jbroma

[jbroma]

@pratt3351 the number you are referring to is moduleId (see webpack docs) and in production mode it's set to 'deterministic'. It means that when the content of that module changes, so does the ID.

Reviewing this issue once again, I noticed that what you need is Module Federation and not Code Splitting if you want to introduce modifications like this.

I'll close this issue since this is something that isn't supported.