React-native-gesture-handler: [Web] Attempted import error: 'ToolbarAndroid' is not exported from 'react-native'

Created on 24 Jan 2020  路  5Comments  路  Source: software-mansion/react-native-gesture-handler

Hi,

I am trying to run my app as web instance using react-native-web and I have the following error:

./node_modules/react-native-gesture-handler/GestureComponents.web.js
Attempted import error: 'ToolbarAndroid' is not exported from 'react-native' (imported as 'RNToolbarAndroid').

This is my routing file:

// @ts-ignore
import {createBrowserApp} from '@react-navigation/web';
// @ts-ignore
import {createSwitchNavigator} from '@react-navigation/core';
import MainScreen from '../screens/MainScreen';

const FinalRouting = createSwitchNavigator({
  root: MainScreen,
});

export default createBrowserApp(FinalRouting);

The web app is created with CRA and I use 'customize-cra' to edit babel and webpack config.
This is my config-overrides.js

const {
  addExternalBabelPlugins,
  addWebpackModuleRule,
  override,
  babelInclude,
  setWebpackTarget,
  getBabelLoader,
} = require('customize-cra');
const path = require('path');
console.log(path.resolve(__dirname, './node_modules/@react-navigation'));
module.exports = override(
  ...addExternalBabelPlugins('@babel/plugin-proposal-class-properties'),
  babelInclude([
    path.resolve('src'),
    path.resolve('node_modules/@react-navigation'),
    path.resolve('node_modules/react-native-gesture-handler'),
  ]),
  addWebpackModuleRule({
    test: /\.(js|jsx)$/,
    exclude: /node_modules\/(?!(react-native-elements|react-native-vector-icons)\/).*/,
    loader: 'babel-loader',
  }),
  setWebpackTarget('electron-renderer'),
);

"react-native": "0.60.5"
"react-navigation": "^4.0.10"
"@react-navigation/web": "^1.0.0-alpha.9"
"react-native-web": "^0.12.0-rc.1"
"react-native-gesture-handler": "^1.5.3"

What could be the issue? Thanks!

Bug Web

Most helpful comment

Seems to be an issue that React-native 0.61 removed the reference to ToolbarAndroid but gesture-handler is still referencing to it.

Seems to be fixed in commit: a40804dd90b829924d2bfcea90b10f747f59ddc2

But not yet released.

Hopefully gets released soon!

All 5 comments

I'm having the same issue with a bare-bones expo app when trying to export to web. All latest versions.

Seems to be an issue that React-native 0.61 removed the reference to ToolbarAndroid but gesture-handler is still referencing to it.

Seems to be fixed in commit: a40804dd90b829924d2bfcea90b10f747f59ddc2

But not yet released.

Hopefully gets released soon!

I had this same issue but now able to build the project after downgrading react-native-web as a temp fix:

"react-native-web": "0.11.7"

Version 1.5.5 is released with the fix

Seems like this is fixed now. Closing

Was this page helpful?
0 / 5 - 0 ratings

Related issues

alexthebake picture alexthebake  路  3Comments

nguyenhose picture nguyenhose  路  4Comments

muhaimincs picture muhaimincs  路  3Comments

brunolemos picture brunolemos  路  3Comments

chhornponleu picture chhornponleu  路  3Comments