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

ethanneff · 2023-03-29T06:11:48Z

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"
  },

The text was updated successfully, but these errors were encountered:

gizomo · 2023-03-29T07:38:55Z

I faced the same issue after having upgraded upto 0.19.1.

Webpack throw Error ERROR in ./node_modules/@react-navigation/native/lib/module/useBackButton.js 1:262-314 Module not found: Error: Can't resolve 'react-native-web/dist/exports/BackHandler' in '/home/dev/work/telebreeze-interpreter/node_modules/@react-navigation/native/lib/module'

necolas · 2023-03-29T16:35:47Z

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

ethanneff · 2023-03-30T04:03:41Z

Since @react-navigation/web has been deprecated for 2 years, what do you recommend? This error is coming from the root import { NavigationContainer } from '@react-navigation/native';

necolas · 2023-03-30T07:25:46Z

Open an issue against react-navigation

agusvazquez · 2023-03-30T16:14:41Z

Hello @necolas . As stated here

#2377 (comment)

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.

chrisedington · 2023-04-03T12:49:43Z

I agree, not sure how to solve this without it being supported by the library as it's not deprecated in RN.

Acetyld · 2023-05-23T19:39:17Z

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
     };

events-jonas-chrisw · 2023-07-20T11:48:29Z

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

kirtikapadiya · 2023-07-24T09:08:57Z

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

harshad-kathiriya · 2023-09-19T09:13:35Z

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

events-jonas-chrisw · 2023-09-19T10:44:03Z

yep, this is getting really annoying, not being able to migrate to expo 49

jjspierx · 2023-10-02T21:00:23Z

I am running into the same problem trying to upgrade from Expo 48 to 49. This is going to be a major issue soon for Android releases since Google is now requiring Expo SDK's to target Android API level 33. I really don't run a modded version of react-native-web, but it's starting to look like we might have to do that. :-(

bassettmason · 2023-10-13T04:58:10Z

any updates?

futurechallenger · 2024-01-21T12:33:17Z

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

events-jonas-chrisw · 2024-02-08T15:16:14Z

this ever going to get fixed?

gituser8796 · 2024-03-04T22:41:32Z

@necolas how to overcome an error when trying to run react-native-web while having a sub-dependency that doesn't work on react-native-web?

agusvazquez · 2024-03-04T23:19:13Z

@gituser8796 you need to create your own component wrapper and differentiate the implementations with

ComponentName.tsx => Native
ComponentName.web.tsx => Web implementation

arjunkahlon · 2024-05-03T20:10:14Z

Has anyone found a solution? BackHandler is built into NavigationContainer in react-navigation/native and is not deprecated.

SnakeLil · 2024-06-08T04:40:45Z

React Native
I am upgrading from expo49 to 51, and after the upgrade, everything is normal on my Android and iOS devices. However, I reported this error on the web side,
54c14d6
The author seems to have restored BackHandler,
But after upgrading "react native web" to the latest version - "0.19.12", this issue still occurred,
The error reported is:
error: shim:react-native-web\dist\exports\BackHandler\index.js: D:\Desktop\code\reva-store-mobile\shim:react-native-web\dist\exports\BackHandler\index.js: The argument 'path' must be a string or Uint8Array without null bytes. Received 'D:\Desktop\code\reva-store-mobile\\x00shim:react-native-web\dist\exports\BackHandler\index.js'

Hemako · 2024-10-11T17:07:01Z

React Native
I am upgrading from expo49 to 51, and after the upgrade, everything is normal on my Android and iOS devices. However, I reported this error on the web side,
54c14d6
The author seems to have restored BackHandler,
But after upgrading "react native web" to the latest version - "0.19.12", this issue still occurred,
The error reported is:
error: shim:react-native-web\dist\exports\BackHandler\index.js: D:\Desktop\code\reva-store-mobile\shim:react-native-web\dist\exports\BackHandler\index.js: The argument 'path' must be a string or Uint8Array without null bytes. Received 'D:\Desktop\code\reva-store-mobile\x00shim:react-native-web\dist\exports\BackHandler\index.js'

I am also facing the similar issue while upgrading expo 50 to 51. @SnakeLil Please help to resolve this

ethanneff added the bug label Mar 29, 2023

necolas closed this as completed Mar 29, 2023

agusvazquez mentioned this issue Apr 4, 2023

Don't use BackHandler in web code paths react-navigation/react-navigation#11316

Closed

5 tasks

quicksilverr mentioned this issue Jul 28, 2023

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

Closed

1 task

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

ethanneff commented Mar 29, 2023 •

edited

Loading

gizomo commented Mar 29, 2023

necolas commented Mar 29, 2023

ethanneff commented Mar 30, 2023

necolas commented Mar 30, 2023

agusvazquez commented Mar 30, 2023 •

edited

Loading

chrisedington commented Apr 3, 2023

Acetyld commented May 23, 2023 •

edited

Loading

events-jonas-chrisw commented Jul 20, 2023

kirtikapadiya commented Jul 24, 2023

harshad-kathiriya commented Sep 19, 2023

events-jonas-chrisw commented Sep 19, 2023

jjspierx commented Oct 2, 2023

bassettmason commented Oct 13, 2023

futurechallenger commented Jan 21, 2024

events-jonas-chrisw commented Feb 8, 2024

gituser8796 commented Mar 4, 2024

agusvazquez commented Mar 4, 2024

arjunkahlon commented May 3, 2024

SnakeLil commented Jun 8, 2024

Hemako commented Oct 11, 2024

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

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

Comments

ethanneff commented Mar 29, 2023 • edited Loading

Is there an existing issue for this?

Describe the issue

Expected behavior

Steps to reproduce

Test case

Additional comments

gizomo commented Mar 29, 2023

necolas commented Mar 29, 2023

ethanneff commented Mar 30, 2023

necolas commented Mar 30, 2023

agusvazquez commented Mar 30, 2023 • edited Loading

chrisedington commented Apr 3, 2023

Acetyld commented May 23, 2023 • edited Loading

events-jonas-chrisw commented Jul 20, 2023

kirtikapadiya commented Jul 24, 2023

harshad-kathiriya commented Sep 19, 2023

events-jonas-chrisw commented Sep 19, 2023

jjspierx commented Oct 2, 2023

bassettmason commented Oct 13, 2023

futurechallenger commented Jan 21, 2024

events-jonas-chrisw commented Feb 8, 2024

gituser8796 commented Mar 4, 2024

agusvazquez commented Mar 4, 2024

arjunkahlon commented May 3, 2024

SnakeLil commented Jun 8, 2024

Hemako commented Oct 11, 2024

ethanneff commented Mar 29, 2023 •

edited

Loading

agusvazquez commented Mar 30, 2023 •

edited

Loading

Acetyld commented May 23, 2023 •

edited

Loading