React Native Web + React Native Navigation

[taronsarkisyan]

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

[taronsarkisyan]

Additional information from React Native Navigation
react-navigation/react-navigation#12474

Additional information from ESBuild
evanw/esbuild#4108