Can't resolve react-native/Libraries/Renderer/shims/ReactNative when using RNGH with Next.js

[loooodnnnn]

Hi 👋 I’m trying to use react-native-gesture-handler@2.14.1 in a Next.js 14 project (non-Expo, static export), and I'm encountering the following error:

Module not found: Can't resolve 'react-native/Libraries/Renderer/shims/ReactNative'
Import trace:
./node_modules/react-native/Libraries/Renderer/shims/ReactNative.js
→ ./node_modules/react-native-gesture-handler/lib/module/getShadowNodeFromRef.js
→ ./node_modules/react-native-gesture-handler/lib/module/handlers/gestures/GestureDetector.js
→ ./node_modules/react-native-gesture-handler/lib/module/index.js
→ ./pages/_app.web.tsx

this is part of my webpack config, which can be used in common react native pages and library

webpack: (config) => {
    config.resolve.alias.react = path.join(__dirname, './node_modules/react');
    config.resolve.alias['react-native'] = 'react-native-web';
    config.resolve.alias['react-native-linear-gradient'] = 'react-native-web-linear-gradient';
}

Is react-native-gesture-handler expected to work with react-native-web and Next.js correctly, Are there any working examples or documentation showing how to set up RNGH with next.config.js + Webpack aliasing correctly for Web?
Any help or guidance would be greatly appreciated 🙏 If a minimal reproduction repo would help, I’d be happy to provide one.

[m-bert]

Hi @loooodnnnn! While we have not tested react-native-gesture-handler with Next.js, it would be great to see a reproduction 😅

Have you tried updating your next.config.js to be similar to this one in the Next.js example?

[loooodnnnn]

The demo works! I found the problem lies in the configuration of next.config.js, and I'm trying to fix other related issues. Thank you so much!

config.resolve.alias['react-native'] = 'react-native-web';❌
config.resolve.alias = {
      ...(config.resolve.alias || {}),
      // Transform all direct `react-native` imports to `react-native-web`
      "react-native$": "react-native-web",
    }; ☑️