How to remove reach navigation 5.x warnings

Question

I am developing a mobile app using react native Expo. I used the React Navigation version 5.x and getting the following warnings:

web Compiled with warnings.

D:/_expo/navi/node_modules/@react-navigation/routers/lib/module/index.js Attempted import error: 'DrawerActionType' is not exported from './DrawerRouter'.

D:/_expo/navi/node_modules/@react-navigation/routers/lib/module/index.js Attempted import error: 'DrawerNavigationState' is not exported from './DrawerRouter'.

D:/_expo/navi/node_modules/@react-navigation/routers/lib/module/index.js Attempted import error: 'DrawerRouterOptions' is not exported from './DrawerRouter'.

D:/_expo/navi/node_modules/@react-navigation/routers/lib/module/index.js Attempted import error: 'StackActionType' is not exported from './StackRouter'.

D:/_expo/navi/node_modules/@react-navigation/routers/lib/module/index.js Attempted import error: 'StackNavigationState' is not exported from './StackRouter'.

D:/_expo/navi/node_modules/@react-navigation/routers/lib/module/index.js Attempted import error: 'StackRouterOptions' is not exported from './StackRouter'.

D:/_expo/navi/node_modules/@react-navigation/routers/lib/module/index.js Attempted import error: 'TabActionType' is not exported from './TabRouter'.

D:/_expo/navi/node_modules/@react-navigation/routers/lib/module/index.js Attempted import error: 'TabNavigationState' is not exported from './TabRouter'.

D:/_expo/navi/node_modules/@react-navigation/routers/lib/module/index.js Attempted import error: 'TabRouterOptions' is not exported from './TabRouter'.

Please guide.

Answer 1

Remove imports that are not being exported from the file.

From what I saw StackRouter, TabRouter and DrawerRouter follow the same pattern and have not exported imports that have the endings: ActionType, RouterOptions and NavigationState.

I don't know if the Expo leaves these imports for later when it includes them on account of the SDK or something that escapes my knowledge, I made the change here and my project continued to run normally without these Yellow Boxes.

node_modules/@react-navigation/routers/lib/module/index.js BEFORE:

import * as CommonActions from './CommonActions';
export { CommonActions };
export { default as BaseRouter } from './BaseRouter';
export { default as StackRouter, StackActions, StackActionType, StackRouterOptions,         StackNavigationState } from './StackRouter';
export { default as TabRouter, TabActions, TabActionType, TabRouterOptions, TabNavigationState } from './TabRouter';
export { default as DrawerRouter, DrawerActions, DrawerActionType, DrawerRouterOptions, DrawerNavigationState } from './DrawerRouter';
export * from './types';
//# sourceMappingURL=index.js.map

node_modules/@react-navigation/routers/lib/module/index.js AFTER:

import * as CommonActions from './CommonActions';
export { CommonActions };
export { default as BaseRouter } from './BaseRouter';
export { default as StackRouter, StackActions } from './StackRouter';
export { default as TabRouter, TabActions } from './TabRouter';
export { default as DrawerRouter, DrawerActions } from './DrawerRouter';
export * from './types';
//# sourceMappingURL=index.js.map