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!
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
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!