react-native-web: Attempted import error: 'BackHandler' is not exported from 'react-native' (imported as 'BackHandler').

Is there an existing issue for this?

I have searched the existing issues

Describe the issue

Attempted import error: 'BackHandler' is not exported from 'react-native' (imported as 'BackHandler').
ERROR in ./node_modules/@react-navigation/native/lib/module/useBackButton.js 5:25-53
export 'BackHandler' (imported as 'BackHandler') was not found in 'react-native' (possible exports: AccessibilityInfo, ActivityIndicator, Alert, Animated, AppRegistry, AppState, Appearance, Button, CheckBox, Clipboard, DeviceEventEmitter, Dimensions, Easing, FlatList, I18nManager, Image, ImageBackground, InteractionManager, Keyboard, KeyboardAvoidingView, LayoutAnimation, Linking, LogBox, Modal, NativeEventEmitter, NativeModules, PanResponder, Picker, PixelRatio, Platform, Pressable, ProgressBar, RefreshControl, SafeAreaView, ScrollView, SectionList, Share, StatusBar, StyleSheet, Switch, Text, TextInput, Touchable, TouchableHighlight, TouchableNativeFeedback, TouchableOpacity, TouchableWithoutFeedback, UIManager, Vibration, View, VirtualizedList, YellowBox, findNodeHandle, processColor, render, unmountComponentAtNode, unstable_createElement, useColorScheme, useLocaleContext, useWindowDimensions)

Expected behavior

no error

Steps to reproduce

upgrade from 0.18.12 to 0.19.1

Test case

n/a

Additional comments

  "scripts": {
    "web": "react-scripts start",
    "build": "react-scripts build",
  },
  "dependencies": {
    "@invertase/react-native-apple-authentication": "2.2.2",
    "@mdi/js": "7.2.96",
    "@mdi/react": "1.6.1",
    "@react-native-community/netinfo": "9.3.7",
    "@react-native-community/slider": "4.4.2",
    "@react-native-firebase/analytics": "14.12.0",
    "@react-native-firebase/app": "14.12.0",
    "@react-native-firebase/auth": "14.12.0",
    "@react-native-firebase/crashlytics": "14.12.0",
    "@react-native-firebase/firestore": "14.12.0",
    "@react-native-firebase/remote-config": "14.12.0",
    "@react-native-google-signin/google-signin": "9.0.2",
    "@react-native-masked-view/masked-view": "0.2.8",
    "@react-navigation/bottom-tabs": "6.5.7",
    "@react-navigation/native": "6.1.6",
    "@react-navigation/native-stack": "6.9.12",
    "@shopify/flash-list": "1.4.2",
    "axios": "1.3.4",
    "d3-scale": "4.0.2",
    "d3-shape": "3.2.0",
    "dayjs": "1.11.7",
    "howler": "2.2.3",
    "lottie-ios": "3.4.4",
    "lottie-react-native": "5.1.5",
    "patch-package": "6.5.1",
    "postinstall-postinstall": "2.1.0",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "react-native": "0.71.4",
    "react-native-config": "1.5.0",
    "react-native-dev-menu": "4.1.1",
    "react-native-device-info": "10.5.0",
    "react-native-draggable-flatlist": "4.0.1",
    "react-native-fast-image": "8.6.3",
    "react-native-gesture-handler": "2.9.0",
    "react-native-get-random-values": "1.8.0",
    "react-native-json-tree": "1.3.0",
    "react-native-keyboard-aware-scroll-view": "0.9.5",
    "react-native-localize": "2.2.6",
    "react-native-mmkv-storage": "0.9.1",
    "react-native-rate": "1.2.12",
    "react-native-reanimated": "3.0.2",
    "react-native-safe-area-context": "4.5.0",
    "react-native-screens": "3.20.0",
    "react-native-sensors": "7.3.6",
    "react-native-sound": "0.11.2",
    "react-native-svg": "13.8.0",
    "react-native-toast-message": "2.1.6",
    "react-native-vector-icons": "9.2.0",
    "react-native-web": "0.19.1",
    "react-redux": "8.0.5",
    "react-scripts": "5.0.1",
    "redux": "4.2.1",
    "redux-persist": "6.0.0",
    "redux-thunk": "2.4.2",
    "reselect": "4.1.7",
    "typesafe-actions": "5.1.0",
    "uuid": "9.0.0",
    "zod": "3.21.4"
  },
  "devDependencies": {
    "@babel/core": "7.21.3",
    "@babel/preset-env": "7.20.2",
    "@babel/preset-typescript": "7.21.0",
    "@babel/runtime": "7.21.0",
    "@commitlint/cli": "17.5.1",
    "@commitlint/config-conventional": "17.4.4",
    "@react-native-community/eslint-config": "3.2.0",
    "@rnx-kit/dep-check": "1.14.0",
    "@semantic-release/changelog": "6.0.3",
    "@semantic-release/commit-analyzer": "9.0.2",
    "@semantic-release/git": "10.0.1",
    "@semantic-release/github": "8.0.7",
    "@semantic-release/npm": "10.0.2",
    "@semantic-release/release-notes-generator": "10.0.3",
    "@testing-library/jest-dom": "5.16.5",
    "@testing-library/jest-native": "5.4.2",
    "@testing-library/react-hooks": "8.0.1",
    "@testing-library/react-native": "12.0.1",
    "@tsconfig/react-native": "2.0.3",
    "@types/axios": "0.14.0",
    "@types/d3-scale": "4.0.3",
    "@types/d3-shape": "3.1.1",
    "@types/howler": "2.2.7",
    "@types/jest": "29.5.0",
    "@types/node": "18.15.11",
    "@types/react": "18.0.31",
    "@types/react-native-vector-icons": "6.4.13",
    "@types/react-test-renderer": "18.0.0",
    "@types/uuid": "9.0.1",
    "@typescript-eslint/eslint-plugin": "5.57.0",
    "@typescript-eslint/parser": "5.57.0",
    "@welldone-software/why-did-you-render": "7.0.1",
    "babel-jest": "29.5.0",
    "babel-plugin-transform-remove-console": "6.9.4",
    "codecov": "3.8.3",
    "eslint": "8.37.0",
    "eslint-config-prettier": "8.8.0",
    "eslint-plugin-import": "2.27.5",
    "eslint-plugin-jest": "27.2.1",
    "eslint-plugin-jsx-a11y": "6.7.1",
    "eslint-plugin-prettier": "4.2.1",
    "eslint-plugin-react": "7.32.2",
    "eslint-plugin-react-hooks": "4.6.0",
    "eslint-plugin-react-native": "4.0.0",
    "eslint-plugin-react-perf": "3.3.1",
    "eslint-plugin-react-redux": "4.0.0",
    "eslint-plugin-sonarjs": "0.19.0",
    "eslint-plugin-sort-destructure-keys": "1.5.0",
    "eslint-plugin-sort-keys-fix": "1.1.2",
    "eslint-plugin-testing-library": "5.10.2",
    "eslint-plugin-typescript-sort-keys": "2.3.0",
    "husky": "8.0.3",
    "jest": "29.5.0",
    "jsinspect": "0.12.7",
    "metro-react-native-babel-preset": "0.76.0",
    "prettier": "2.8.7",
    "react-native-bundle-visualizer": "3.1.3",
    "react-native-flipper": "0.187.1",
    "react-native-flipper-performance-plugin": "0.4.0",
    "react-native-highlight-updates": "1.2.0",
    "react-test-renderer": "18.2.0",
    "redux-flipper": "2.0.2",
    "semantic-release": "21.0.0",
    "ts-essentials": "9.3.1",
    "typescript": "5.0.2"
  },

About this issue

Original URL
State: closed
Created a year ago
Reactions: 4
Comments: 17 (2 by maintainers)

Most upvoted comments

Hello @necolas . As stated here

https://github.com/necolas/react-native-web/pull/2377#issuecomment-1487146649

I believe that BackHandler support should be re added. The purpose of this library is to provide compatibility with React Native. BackHandler is not deprecated on React Native, so if you remove it from react native web, it will cause incompatibility issues with RN, that is the main goal of this library.

You can’t just expect that every other RN library updates their code when they are not even using react-native-web, they are just using react-native.

+22

agusvazquez on Mar 30, 2023

Open an issue against react-navigation

+15

necolas on Mar 30, 2023

Same issue found in expo web, after migration from expo 48 to 49

+13

kirtikapadiya on Jul 24, 2023

The removal of this, totally breaks the migration from expo 48 to 49

events-jonas-chrisw on Jul 20, 2023

Any update on this? For now a patch-package

diff --git a/node_modules/react-native-web/dist/cjs/exports/BackHandler/index.js b/node_modules/react-native-web/dist/cjs/exports/BackHandler/index.js
index 24ebcd8..aa26374 100644
--- a/node_modules/react-native-web/dist/cjs/exports/BackHandler/index.js
+++ b/node_modules/react-native-web/dist/cjs/exports/BackHandler/index.js
@@ -16,7 +16,6 @@ function emptyFunction() {}
 var BackHandler = {
   exitApp: emptyFunction,
   addEventListener() {
-    console.error('BackHandler is not supported on web and should not be used.');
     return {
       remove: emptyFunction
     };
diff --git a/node_modules/react-native-web/dist/exports/BackHandler/index.js b/node_modules/react-native-web/dist/exports/BackHandler/index.js
index 13f044d..ae8ed17 100644
--- a/node_modules/react-native-web/dist/exports/BackHandler/index.js
+++ b/node_modules/react-native-web/dist/exports/BackHandler/index.js
@@ -12,7 +12,6 @@ function emptyFunction() {}
 var BackHandler = {
   exitApp: emptyFunction,
   addEventListener() {
-    console.error('BackHandler is not supported on web and should not be used.');
     return {
       remove: emptyFunction
     };
diff --git a/node_modules/react-native-web/dist/exports/BackHandler/index.js.flow b/node_modules/react-native-web/dist/exports/BackHandler/index.js.flow
index 1523698..347b533 100644
--- a/node_modules/react-native-web/dist/exports/BackHandler/index.js.flow
+++ b/node_modules/react-native-web/dist/exports/BackHandler/index.js.flow
@@ -13,7 +13,6 @@ const BackHandler = {
   addEventListener(): {|
     remove: () => void
   |} {
-    console.error('BackHandler is not supported on web and should not be used.');
     return {
       remove: emptyFunction
     };
diff --git a/node_modules/react-native-web/src/exports/BackHandler/index.js b/node_modules/react-native-web/src/exports/BackHandler/index.js
index 205fc58..69557f6 100644
--- a/node_modules/react-native-web/src/exports/BackHandler/index.js
+++ b/node_modules/react-native-web/src/exports/BackHandler/index.js
@@ -13,9 +13,6 @@ function emptyFunction() {}
 const BackHandler = {
   exitApp: emptyFunction,
   addEventListener(): {| remove: () => void |} {
-    console.error(
-      'BackHandler is not supported on web and should not be used.'
-    );
     return {
       remove: emptyFunction
     };

Acetyld on May 23, 2023

this ever going to get fixed?

events-jonas-chrisw on Feb 8, 2024

There’re lots of errors in web console. any updates on this issue?

futurechallenger on Jan 21, 2024

Any workaround for this issue? It is blocking migration from expo 48 to 49.

harshad-kathiriya on Sep 19, 2023

BackHandler is no longer exported. You also shouldn’t be importing ‘native’ implementations from react-navigation when running on web

necolas on Mar 29, 2023