Node modules issue in rn gesture handler after repack v4 migration

[rasheedk]

Describe the bug

Hi repack team @jbroma We have been using v3 of repack in the sample app showcase project structure and facing issue in repack v4 while loading node modules for react-native-gesture-handler

The node modules are not found error is being thrown due while compiling from catalogue server.

We tried a couple of attempts by adding the rules in webpack config file and nothing worked.

Can you please share a webpack config rule which works for

react-native-gesture-handler .

System Info

using rn v 71.19 and repack v4.3.2.

We even tried in the v4 branch of the sample app showcase

Re.Pack Version

v4.3.2

Reproduction

n/a

Steps to reproduce

n/a

[rasheedk]

[16:00:34.280Z][LoggerPlugin] Compiling ios: 62% building (36/38 entries 5751/5753 dependencies 1196/1198 modules) ✖ [16:00:35.267Z][LoggerPlugin] Failed to build bundle due to errors ✖ [16:00:35.267Z][LoggerPlugin] Error in "undefined": Module not found: Error: Can't resolve 'react-native/Libraries/ReactNative/ ReactFabricPublicInstance/ReactFabricPublicInstance' in '/Users/muhammedrasheed/Desktop/repackv4/super-app-showcase-repack-v4/nod e_modules/.pnpm/react-native-gesture-handler@2.17.0react-native@0.71.19@babel+core@7.23.0_@babel+preset-env_eiyowwenxxea3j4idfd 3qy6ibm/node_modules/react-native-gesture-handler/src' ℹ [16:00:35.367Z][DevServer] GET 200 /index.bundle?platform=ios&dev=true&minify=false&inlineSourceMap=false&modulesOnly=false&run Module=true&app=com.callstack.superappshowcase.hostapp request completed { responseTime: 11579.3142080307 } ℹ [16:00:35.479Z][DevServer] React Native client connected { clientId: 'client#0' } ℹ [16:00:35.632Z][DevServer] HMR client connected { clientId: 'client#0', platform: 'ios' } ℹ [16:00:35.695Z][Console] [HMRClient] Connecting... {"url": "ws://localhost:8081/hmr?platform=ios"} ℹ [16:00:35.696Z][Console] Running "host" with {"rootTag":1,"initialProps":{}} ℹ [16:00:35.696Z][Console] [HMRClient] Connected ✖ [16:00:35.701Z][Console] Cannot apply update due to error: {"loc": "resolving fallback for shared module react-native/Libraries /ReactNative/ReactFabricPublicInstance/ReactFabricPublicInstance", "message": "Module not found: Error: Can't resolve 'react-nati ve/Libraries/ReactNative/ReactFabricPublicInstance/ReactFabricPublicInstance' in '/Users/muhammedrasheed/Desktop/repackv4/super-a pp-showcase-repack-v4/node_modules/.pnpm/react-native-gesture-handler@2.17.0react-native@0.71.19@babel+core@7.23.0_@babel+prese t-env_eiyowwenxxea3j4idfd3qy6ibm/node_modules/react-native-gesture-handler/src'"} ℹ [16:00:35.756Z][DevServer] GET 200 /assets/nodemodules/.pnpm/react-native@0.71.19@babel+core@7.23.0@babel+preset-env@7.22.20 @babel+core@7.23.0encoding@0.1.13_react@18.2.0/node_modules/react-native/Libraries/LogBox/UI/LogBoxImages/close.png?platform=i os&hash=f667b188e7d166990789aab4cab2b5bf request completed { responseTime: 0.8486669659614563 } ✖ [16:00:35.803Z][DevServer] Failed to create code frame { reqId: 'req-5', error: "ENOENT: no such file or directory, open '/Users/muhammedrasheed/Desktop/repackv4/super-app-showcase-repack-v4/packages/ host/node_modules/.pnpm/@babel+runtime@7.23.1/node_modules/@babel/runtime/helpers/construct.js'" }

[jbroma]

Reproduction basic code : drive.google.com/file/d/1UoKSh4ZON5TI6geKLXMm2rrIdCgEa-9y/view?usp=sharing

hey, could you please make a github repo with that reproduction?

[rasheedk]

Reproduction basic code : drive.google.com/file/d/1UoKSh4ZON5TI6geKLXMm2rrIdCgEa-9y/view?usp=sharing

hey, could you please make a github repo with that reproduction?

Here it is: https://github.com/rasheedk/repack-v4-migration/tree/main

[jbroma]

Hi @rasheedk, this is not an issue with Re.Pack but rather with react-native-gesture-handler looking for a file that is not present in RN 0.71.

While this shows up as an error its not really a problem since it's imported inside of a try catch block. Upgrading to a newer RN version or downgrading the RNGH that supports RN 0.71 should fix this issue.

Closing since there is nothing actionable on the Re.Pack side

[rasheedk]

We tried matching version of rn gesture handler as well but no luck when its combined with repack. If i use in normal react native its working perfectly. There seems to be some issues how node modules are being loaded in projects using repack v4. Repack v3 works fine for me.

Even latest version of react native with repack v4 is also having issues.

[jbroma]

We tried matching version of rn gesture handler as well but no luck when its combined with repack. If i use in normal react native its working perfectly. There seems to be some issues how node modules are being loaded in projects using repack v4. Repack v3 works fine for me.

Even latest version of react native with repack v4 is also having issues.

so in metro this is not a problem since these kind of errors are not reported. In your case this isn't a problem as well, its just that it's getting reported as error.

I would say that webpack is actually eagerly reporting this as an error despite this not causing a runtime error (error comes from here). You can see that this file in question is being required in a try/catch block so it's handled in runtime. I've tried downgrading to Re.Pack 3.7 but the error is the same, if you can show me a repro where older version of Re.Pack is not reporting this, feel free to share it.

Anyways, all should be working properly there from the perspective of the app, no need to worry about this one :)