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

[loooodnnnn]

Hi 👋 I’m trying to use [email protected] 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",
    }; ☑️

[2004durgesh]

@loooodnnnn hey do u have a public repro i can refer — I’m running into a similar issue.

next.config.mjs

import { createMDX } from 'fumadocs-mdx/next';
import { createRequire } from 'module';

const require = createRequire(import.meta.url);
const withMDX = createMDX({
  extension: /\.mdx?$/,
});

/** @type {import('next').NextConfig} */
const config = {
  reactStrictMode: true,
  pageExtensions: ['js', 'jsx', 'mdx', 'ts', 'tsx'],
  transpilePackages: [
    'react-native',
    'react-native-web',
    'react-native-css-interop',
    'react-native-reanimated',
    'react-native-gesture-handler',
    'react-native-video',
    'react-native-svg',
    'react-native-material-ripple',
    'react-native-video-toolkit',
    'react-native-awesome-slider'
  ],
  turbopack: {
    resolveAlias: {
      'react-native': 'react-native-web',
    },
    resolveExtensions: [
      '.web.js',
      '.web.jsx',
      '.web.ts',
      '.web.tsx',
      '.mdx',
      '.tsx',
      '.ts',
      '.jsx',
      '.js',
      '.mjs',
      '.json',
    ]
  }
};

export default withMDX(withExpo(config));

// https://github.com/expo/expo-webpack-integrations/blob/main/packages/next-adapter/src/index.ts
function withExpo(nextConfig) {
  return {
    ...nextConfig,
    webpack(config, options) {
      // 🔹 Polyfill requestAnimationFrame for RN libs like Reanimated
      const raf = require('raf');
      raf.polyfill();

      // Ensure resolve is initialized
      if (!config.resolve) config.resolve = {};

      // Aliases
      config.resolve.alias = {
        ...(config.resolve.alias || {}),
        'react-native$': 'react-native-web',
        'react-native/Libraries/EventEmitter/RCTDeviceEventEmitter$':
          'react-native-web/dist/vendor/react-native/NativeEventEmitter/RCTDeviceEventEmitter',
        'react-native/Libraries/vendor/emitter/EventEmitter$':
          'react-native-web/dist/vendor/react-native/emitter/EventEmitter',
        'react-native/Libraries/EventEmitter/NativeEventEmitter$':
          'react-native-web/dist/vendor/react-native/NativeEventEmitter',
      };

      // Extensions
      config.resolve.extensions = [
        '.web.js',
        '.web.jsx',
        '.web.ts',
        '.web.tsx',
        '.mdx',
        '.tsx',
        '.ts',
        '.jsx',
        '.js',
        '.mjs',
        '.json',
        ...(config.resolve?.extensions ?? []),
      ];

      // Node fallbacks
      config.resolve.fallback = {
        ...(config.resolve.fallback || {}),
        'react-native': 'react-native-web',
      };

      // Ensure module rules exist
      if (!config.module) config.module = {};
      if (!config.module.rules) config.module.rules = [];

      // 🔹 Add support for .txt assets
      config.module.rules.push({
        test: /\.txt$/,
        type: 'asset/source',
      });

      // 🔹 Transpile RN deps
      config.module.rules.push({
        test: /\.(js|jsx|ts|tsx)$/,
        include: [
          /node_modules\/react-native/,
          /node_modules\/react-native-gesture-handler/,
          /node_modules\/react-native-reanimated/,
          /node_modules\/react-native-video/,
          /node_modules\/react-native-svg/,
          /node_modules\/react-native-orientation-director/,
          /node_modules\/react-native-material-ripple/,
          /node_modules\/react-native-awesome-slider/,
        ],
        use: {
          loader: 'babel-loader',
          options: {
            presets: [
              ['@babel/preset-env', { targets: { node: 'current' } }],
              ['@babel/preset-react', { runtime: 'automatic' }],
              ['@babel/preset-typescript', { isTSX: true, allExtensions: true }],
            ],
            plugins: [['@babel/plugin-transform-runtime']],
          },
        },
      });

      // 🔹 Ignore NativeVideoToolkit.ts (prefer .web.ts)
      config.module.rules.push({
        test: /NativeVideoToolkit\.ts$/,
        exclude: /NativeVideoToolkit\.web\.ts$/,
        use: 'null-loader',
      });

      if (!config.plugins) config.plugins = [];

      // Call user-defined webpack if provided
      if (typeof nextConfig.webpack === 'function') {
        return nextConfig.webpack(config, options);
      }

      return config;
    },
  };
}

package.json

{
  "name": "docs",
  "version": "0.0.0",
  "private": true,
  "scripts": {
    "build": "next build",
    "dev": "next dev",
    "start": "next start",
    "postinstall": "fumadocs-mdx"
  },
  "dependencies": {
    "class-variance-authority": "^0.7.1",
    "clsx": "^2.1.1",
    "fumadocs-core": "15.7.10",
    "fumadocs-docgen": "^3.0.0",
    "fumadocs-mdx": "11.9.0",
    "fumadocs-ui": "15.7.10",
    "lucide-react": "^0.542.0",
    "lucide-react-native": "^0.542.0",
    "next": "15.5.2",
    "react": "^19.1.1",
    "react-dom": "^19.1.1",
    "react-native": "0.79.5",
    "react-native-gesture-handler": "^2.28.0",
    "react-native-orientation-director": "^2.6.1",
    "react-native-reanimated": "^3.17.0",
    "react-native-svg": "^15.12.1",
    "react-native-video": "^6.16.1",
    "react-native-video-toolkit": "workspace:*",
    "react-native-web": "^0.21.1",
    "tailwind-merge": "^3.3.1",
    "tailwindcss-animate": "^1.0.7"
  },
  "devDependencies": {
    "@babel/core": "^7.28.4",
    "@babel/plugin-proposal-class-properties": "^7.18.6",
    "@babel/plugin-transform-runtime": "^7.28.3",
    "@babel/preset-env": "^7.28.3",
    "@babel/preset-react": "^7.27.1",
    "@babel/preset-typescript": "^7.27.1",
    "@tailwindcss/postcss": "^4.1.13",
    "@types/mdx": "^2.0.13",
    "@types/node": "24.3.1",
    "@types/react": "^19.1.12",
    "@types/react-dom": "^19.1.9",
    "babel-loader": "^10.0.0",
    "babel-plugin-module-resolver": "^5.0.2",
    "babel-plugin-react-native-web": "^0.21.1",
    "eslint": "^8",
    "eslint-config-next": "15.5.2",
    "postcss": "^8.5.6",
    "raf": "^3.4.1",
    "raw-loader": "^4.0.2",
    "tailwindcss": "^4.1.13",
    "tw-animate-css": "^1.3.8",
    "typescript": "^5.9.2"
  }
}