Skip to content

React Native Web + React Native Navigation #2766

New issue
New issue
Closed
Closed
React Native Web + React Native Navigation#2766
Labels
bug
@taronsarkisyan

Description

@taronsarkisyan
taronsarkisyan
opened on Mar 7, 2025

Is there an existing issue for this?

  • I have searched the existing issues

Describe the issue

Description

Greetings, everyone.

I can't use the Expo framework due to project requirements.

Is it possible to use React Navigation in a vanilla React Native project that has React Native for Web installed?

The documentation states that this is possible,
but it doesn't explain how exactly:

https://reactnavigation.org/docs/web-support/

Can you provide a minimal example?

An example of React Native Navigation that works without Expo on the Web (ESBuild, Webpack or something else..)

Thanks.

Steps to reproduce

  1. Install vanilla React Native.
  2. Install React Native for Web and React Native Navigation libraries.
  3. Run this in the browser.
    I tried to bundle using ESBuild:
alias: {
'react-native': 'react-native-web',
},

and removed Flow types using this library:
https://www.npmjs.com/package/esbuild-plugin-flow

React Native Version

0.78.0

Affected Platforms

Runtime - Web

Console output

`✘ [ERROR] Could not resolve "react-native-web/Libraries/Utilities/codegenNativeComponent" (originally "react-native/Libraries/Utilities/codegenNativeComponent")

node_modules/react-native-safe-area-context/lib/module/specs/NativeSafeAreaView.js:1:35:
  1 │ import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent';
    ╵                                    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

The path "react-native/Libraries/Utilities/codegenNativeComponent" was remapped to
"react-native-web/Libraries/Utilities/codegenNativeComponent" using the alias feature, which then
couldn't be resolved. Keep in mind that import path aliases are resolved in the current working
directory.

You can mark the path "react-native-web/Libraries/Utilities/codegenNativeComponent" as external to
exclude it from the bundle, which will remove this error and leave the unresolved path in the
bundle.

✘ [ERROR] Could not resolve "react-native-web/Libraries/Utilities/codegenNativeComponent" (originally "react-native/Libraries/Utilities/codegenNativeComponent")

node_modules/react-native-screens/lib/commonjs/fabric/ScreenFooterNativeComponent.js:7:61:
  7 │ var _codegenNativeComponent = _interopRequireDefault(require("react-native/Libraries/Utilities/codegenNativeComponent"));
    ╵                                                              ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

The path "react-native/Libraries/Utilities/codegenNativeComponent" was remapped to
"react-native-web/Libraries/Utilities/codegenNativeComponent" using the alias feature, which then
couldn't be resolved. Keep in mind that import path aliases are resolved in the current working
directory.

You can mark the path "react-native-web/Libraries/Utilities/codegenNativeComponent" as external to
exclude it from the bundle, which will remove this error and leave the unresolved path in the
bundle. You can also surround this "require" call with a try/catch block to handle this failure at
run-time instead of bundle-time.

✘ [ERROR] Could not resolve "react-native-web/Libraries/Utilities/codegenNativeComponent" (originally "react-native/Libraries/Utilities/codegenNativeComponent")

node_modules/react-native-screens/lib/commonjs/fabric/ScreenContentWrapperNativeComponent.js:7:61:
  7 │ var _codegenNativeComponent = _interopRequireDefault(require("react-native/Libraries/Utilities/codegenNativeComponent"));
    ╵                                                              ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

The path "react-native/Libraries/Utilities/codegenNativeComponent" was remapped to
"react-native-web/Libraries/Utilities/codegenNativeComponent" using the alias feature, which then
couldn't be resolved. Keep in mind that import path aliases are resolved in the current working
directory.

You can mark the path "react-native-web/Libraries/Utilities/codegenNativeComponent" as external to
exclude it from the bundle, which will remove this error and leave the unresolved path in the
bundle. You can also surround this "require" call with a try/catch block to handle this failure at
run-time instead of bundle-time.

✘ [ERROR] Could not resolve "react-native-web/Libraries/Utilities/codegenNativeComponent" (originally "react-native/Libraries/Utilities/codegenNativeComponent")

node_modules/react-native-screens/lib/commonjs/fabric/ScreenContainerNativeComponent.js:8:61:
  8 │ var _codegenNativeComponent = _interopRequireDefault(require("react-native/Libraries/Utilities/codegenNativeComponent"));
    ╵                                                              ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

The path "react-native/Libraries/Utilities/codegenNativeComponent" was remapped to
"react-native-web/Libraries/Utilities/codegenNativeComponent" using the alias feature, which then
couldn't be resolved. Keep in mind that import path aliases are resolved in the current working
directory.

You can mark the path "react-native-web/Libraries/Utilities/codegenNativeComponent" as external to
exclude it from the bundle, which will remove this error and leave the unresolved path in the
bundle. You can also surround this "require" call with a try/catch block to handle this failure at
run-time instead of bundle-time.

✘ [ERROR] Could not resolve "react-native-web/Libraries/Utilities/codegenNativeComponent" (originally "react-native/Libraries/Utilities/codegenNativeComponent")

node_modules/react-native-safe-area-context/lib/module/specs/NativeSafeAreaProvider.js:1:35:
  1 │ import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent';
    ╵                                    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

The path "react-native/Libraries/Utilities/codegenNativeComponent" was remapped to
"react-native-web/Libraries/Utilities/codegenNativeComponent" using the alias feature, which then
couldn't be resolved. Keep in mind that import path aliases are resolved in the current working
directory.

You can mark the path "react-native-web/Libraries/Utilities/codegenNativeComponent" as external to
exclude it from the bundle, which will remove this error and leave the unresolved path in the
bundle.

✘ [ERROR] Could not resolve "react-native-web/Libraries/Utilities/codegenNativeComponent" (originally "react-native/Libraries/Utilities/codegenNativeComponent")

node_modules/react-native-screens/lib/commonjs/fabric/ScreenStackNativeComponent.js:8:61:
  8 │ var _codegenNativeComponent = _interopRequireDefault(require("react-native/Libraries/Utilities/codegenNativeComponent"));
    ╵                                                              ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

The path "react-native/Libraries/Utilities/codegenNativeComponent" was remapped to
"react-native-web/Libraries/Utilities/codegenNativeComponent" using the alias feature, which then
couldn't be resolved. Keep in mind that import path aliases are resolved in the current working
directory.

You can mark the path "react-native-web/Libraries/Utilities/codegenNativeComponent" as external to
exclude it from the bundle, which will remove this error and leave the unresolved path in the
bundle. You can also surround this "require" call with a try/catch block to handle this failure at
run-time instead of bundle-time.

✘ [ERROR] Could not resolve "react-native-web/Libraries/Utilities/codegenNativeComponent" (originally "react-native/Libraries/Utilities/codegenNativeComponent")

node_modules/react-native-screens/lib/commonjs/fabric/ScreenStackHeaderConfigNativeComponent.js:8:61:
  8 │ var _codegenNativeComponent = _interopRequireDefault(require("react-native/Libraries/Utilities/codegenNativeComponent"));
    ╵                                                              ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

The path "react-native/Libraries/Utilities/codegenNativeComponent" was remapped to
"react-native-web/Libraries/Utilities/codegenNativeComponent" using the alias feature, which then
couldn't be resolved. Keep in mind that import path aliases are resolved in the current working
directory.

You can mark the path "react-native-web/Libraries/Utilities/codegenNativeComponent" as external to
exclude it from the bundle, which will remove this error and leave the unresolved path in the
bundle. You can also surround this "require" call with a try/catch block to handle this failure at
run-time instead of bundle-time.

✘ [ERROR] Could not resolve "react-native-web/Libraries/Utilities/codegenNativeComponent" (originally "react-native/Libraries/Utilities/codegenNativeComponent")

node_modules/react-native-screens/lib/commonjs/fabric/ScreenStackHeaderSubviewNativeComponent.js:8:61:
  8 │ var _codegenNativeComponent = _interopRequireDefault(require("react-native/Libraries/Utilities/codegenNativeComponent"));
    ╵                                                              ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

The path "react-native/Libraries/Utilities/codegenNativeComponent" was remapped to
"react-native-web/Libraries/Utilities/codegenNativeComponent" using the alias feature, which then
couldn't be resolved. Keep in mind that import path aliases are resolved in the current working
directory.

You can mark the path "react-native-web/Libraries/Utilities/codegenNativeComponent" as external to
exclude it from the bundle, which will remove this error and leave the unresolved path in the
bundle. You can also surround this "require" call with a try/catch block to handle this failure at
run-time instead of bundle-time.

✘ [ERROR] Could not resolve "react-native-web/Libraries/Utilities/codegenNativeComponent" (originally "react-native/Libraries/Utilities/codegenNativeComponent")

node_modules/react-native-screens/lib/commonjs/fabric/ScreenNavigationContainerNativeComponent.js:8:61:
  8 │ var _codegenNativeComponent = _interopRequireDefault(require("react-native/Libraries/Utilities/codegenNativeComponent"));
    ╵                                                              ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

The path "react-native/Libraries/Utilities/codegenNativeComponent" was remapped to
"react-native-web/Libraries/Utilities/codegenNativeComponent" using the alias feature, which then
couldn't be resolved. Keep in mind that import path aliases are resolved in the current working
directory.

You can mark the path "react-native-web/Libraries/Utilities/codegenNativeComponent" as external to
exclude it from the bundle, which will remove this error and leave the unresolved path in the
bundle. You can also surround this "require" call with a try/catch block to handle this failure at
run-time instead of bundle-time.

✘ [ERROR] Could not resolve "react-native-web/Libraries/Utilities/codegenNativeComponent" (originally "react-native/Libraries/Utilities/codegenNativeComponent")

node_modules/react-native-screens/lib/commonjs/fabric/FullWindowOverlayNativeComponent.js:8:61:
  8 │ var _codegenNativeComponent = _interopRequireDefault(require("react-native/Libraries/Utilities/codegenNativeComponent"));
    ╵                                                              ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

The path "react-native/Libraries/Utilities/codegenNativeComponent" was remapped to
"react-native-web/Libraries/Utilities/codegenNativeComponent" using the alias feature, which then
couldn't be resolved. Keep in mind that import path aliases are resolved in the current working
directory.

You can mark the path "react-native-web/Libraries/Utilities/codegenNativeComponent" as external to
exclude it from the bundle, which will remove this error and leave the unresolved path in the
bundle. You can also surround this "require" call with a try/catch block to handle this failure at
run-time instead of bundle-time.

✘ [ERROR] Could not resolve "react-native-web/Libraries/ReactNative/AppContainer" (originally "react-native/Libraries/ReactNative/AppContainer")

node_modules/react-native-screens/lib/commonjs/components/DebugContainer.js:9:51:
  9 │ var _AppContainer = _interopRequireDefault(require("react-native/Libraries/ReactNative/AppContainer"));
    ╵                                                    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

The path "react-native/Libraries/ReactNative/AppContainer" was remapped to
"react-native-web/Libraries/ReactNative/AppContainer" using the alias feature, which then couldn't
be resolved. Keep in mind that import path aliases are resolved in the current working directory.

You can mark the path "react-native-web/Libraries/ReactNative/AppContainer" as external to exclude
it from the bundle, which will remove this error and leave the unresolved path in the bundle. You
can also surround this "require" call with a try/catch block to handle this failure at run-time
instead of bundle-time.

✘ [ERROR] Could not resolve "react-native-web/Libraries/Utilities/codegenNativeComponent" (originally "react-native/Libraries/Utilities/codegenNativeComponent")

node_modules/react-native-screens/lib/commonjs/fabric/SearchBarNativeComponent.js:9:61:
  9 │ var _codegenNativeComponent = _interopRequireDefault(require("react-native/Libraries/Utilities/codegenNativeComponent"));
    ╵                                                              ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

The path "react-native/Libraries/Utilities/codegenNativeComponent" was remapped to
"react-native-web/Libraries/Utilities/codegenNativeComponent" using the alias feature, which then
couldn't be resolved. Keep in mind that import path aliases are resolved in the current working
directory.

You can mark the path "react-native-web/Libraries/Utilities/codegenNativeComponent" as external to
exclude it from the bundle, which will remove this error and leave the unresolved path in the
bundle. You can also surround this "require" call with a try/catch block to handle this failure at
run-time instead of bundle-time.

✘ [ERROR] Could not resolve "react-native-web/Libraries/Utilities/codegenNativeCommands" (originally "react-native/Libraries/Utilities/codegenNativeCommands")

node_modules/react-native-screens/lib/commonjs/fabric/SearchBarNativeComponent.js:10:60:
  10 │ var _codegenNativeCommands = _interopRequireDefault(require("react-native/Libraries/Utilities/codegenNativeCommands"));
     ╵                                                             ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

The path "react-native/Libraries/Utilities/codegenNativeCommands" was remapped to
"react-native-web/Libraries/Utilities/codegenNativeCommands" using the alias feature, which then
couldn't be resolved. Keep in mind that import path aliases are resolved in the current working
directory.

You can mark the path "react-native-web/Libraries/Utilities/codegenNativeCommands" as external to
exclude it from the bundle, which will remove this error and leave the unresolved path in the
bundle. You can also surround this "require" call with a try/catch block to handle this failure at
run-time instead of bundle-time.

✘ [ERROR] Could not resolve "react-native-web/Libraries/Utilities/codegenNativeComponent" (originally "react-native/Libraries/Utilities/codegenNativeComponent")

node_modules/react-native-screens/lib/commonjs/fabric/ModalScreenNativeComponent.js:8:61:
  8 │ var _codegenNativeComponent = _interopRequireDefault(require("react-native/Libraries/Utilities/codegenNativeComponent"));
    ╵                                                              ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

The path "react-native/Libraries/Utilities/codegenNativeComponent" was remapped to
"react-native-web/Libraries/Utilities/codegenNativeComponent" using the alias feature, which then
couldn't be resolved. Keep in mind that import path aliases are resolved in the current working
directory.

You can mark the path "react-native-web/Libraries/Utilities/codegenNativeComponent" as external to
exclude it from the bundle, which will remove this error and leave the unresolved path in the
bundle. You can also surround this "require" call with a try/catch block to handle this failure at
run-time instead of bundle-time.

✘ [ERROR] Could not resolve "react-native-web/Libraries/Utilities/codegenNativeComponent" (originally "react-native/Libraries/Utilities/codegenNativeComponent")

node_modules/react-native-screens/lib/commonjs/fabric/ScreenNativeComponent.js:8:61:
  8 │ var _codegenNativeComponent = _interopRequireDefault(require("react-native/Libraries/Utilities/codegenNativeComponent"));
    ╵                                                              ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

The path "react-native/Libraries/Utilities/codegenNativeComponent" was remapped to
"react-native-web/Libraries/Utilities/codegenNativeComponent" using the alias feature, which then
couldn't be resolved. Keep in mind that import path aliases are resolved in the current working
directory.

You can mark the path "react-native-web/Libraries/Utilities/codegenNativeComponent" as external to
exclude it from the bundle, which will remove this error and leave the unresolved path in the
bundle. You can also surround this "require" call with a try/catch block to handle this failure at
run-time instead of bundle-time.

1472 | let { file, line, column } = e.location;
1473 | let pluginText = e.pluginName ? [plugin: ${e.pluginName}] : "";
1474 | return 1475 | ${file}:${line}:${column}: ERROR: ${pluginText}${e.text};
1476 | }).join("");
1477 | let error = new Error(text);
^
error: Build failed with 15 errors:
node_modules/react-native-safe-area-context/lib/module/specs/NativeSafeAreaProvider.js:1:35: ERROR: Could not resolve "react-native-web/Libraries/Utilities/codegenNativeComponent" (originally "react-native/Libraries/Utilities/codegenNativeComponent")
node_modules/react-native-safe-area-context/lib/module/specs/NativeSafeAreaView.js:1:35: ERROR: Could not resolve "react-native-web/Libraries/Utilities/codegenNativeComponent" (originally "react-native/Libraries/Utilities/codegenNativeComponent")
node_modules/react-native-screens/lib/commonjs/components/DebugContainer.js:9:51: ERROR: Could not resolve "react-native-web/Libraries/ReactNative/AppContainer" (originally "react-native/Libraries/ReactNative/AppContainer")
node_modules/react-native-screens/lib/commonjs/fabric/FullWindowOverlayNativeComponent.js:8:61: ERROR: Could not resolve "react-native-web/Libraries/Utilities/codegenNativeComponent" (originally "react-native/Libraries/Utilities/codegenNativeComponent")
node_modules/react-native-screens/lib/commonjs/fabric/ModalScreenNativeComponent.js:8:61: ERROR: Could not resolve "react-native-web/Libraries/Utilities/codegenNativeComponent" (originally "react-native/Libraries/Utilities/codegenNativeComponent")
...
at failureErrorWithLog (/var/www/node/node_modules/esbuild/lib/main.js:1477:15)
at (/var/www/node/node_modules/esbuild/lib/main.js:946:25)
at (/var/www/node/node_modules/esbuild/lib/main.js:1355:9)`

Expected behavior

React Native Navigation works on vanilla React Native on Web 🙂 👍🏻

Steps to reproduce

package version
@react-navigation/native 7.0.15
@react-navigation/bottom-tabs 7.2.1
@react-navigation/native-stack 7.2.1
react-native-screens 4.9.1
react-native-safe-area-context 5.3.0
react-native 0.78.0
react-native-web 0.19.13
node 22.14.0
yarn 1.22.22

Test case

https://github.com/necolas/react-native-web

Additional comments

No response

Metadata

Metadata

Assignees

No one assigned

    Labels

    bug

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions