Unable to resolve module @react-navigation/material-top-tabs

[pedrobern]

Unable to resolve module @react-navigation/material-top-tabs

[andreialecu]

bundling failed seems like a weird message, and looks related to building the project, not using it.

Can you explain step by step what you did to receive this error?

[PedroBern]

@andreialecu it seems to happen because we are exporting createMaterialCollapsibleTopTabNavigator and MaterialTopTabsCollapsibleTabView even if react-navigation isen't installed. So, if react-navigation is not added as a dependency, it will break the build.

It's easy to reproduce:

1. Create a new expo project
2. Add react-native-collapsible-tab-view and the peers (without react-navigation)
3. Copy the quick start code
4. expo start should error
5. add the @react-navigation/... peers
6. expo start works

Note that the quick start code does not use the navigator. So it should work.

I think the solution is to conditionally export createMaterialCollapsibleTopTabNavigator and MaterialTopTabsCollapsibleTabView , but I was not successful.

The other option is to remove the peerDependenciesMeta , @andreialecu what you think? (thanks for the help)

[andreialecu]

I see. I don't use expo so I wasn't familiar with that error signature.

Normally if the material tab files are not imported there shouldn't be any error but I suspect that typescript is interfering. I will take a look in a couple of hours, currently away for a bit.

[PedroBern]

Thanks @andreialecu! But don't worry, it's not a priority

[andreialecu]

I'm still on mobile but I figured out what the problem is. It's related to these exports:

react-native-collapsible-tab-view/src/index.tsx

Line 9 in e58a5f5

export { default as MaterialTopTabsCollapsibleTabView } from './MaterialTopTabsCollapsibleTabView';

They should be in a separate file instead of the index. Perhaps one named navigation.tsx so that end users would import them from "react-native-collapsible-tab-view/navigation" instead.

[andreialecu]

Upon further investigation, the problem with my proposed approach above is that because of the path structure of the published package, the imports would end up looking like:

import { createMaterialCollapsibleTopTabNavigator } from "react-native-collapsible-tab-view/lib/module/navigation"

Which isn't a great experience...

There's a proposal here that would allow rewriting the imports so that react-native-collapsible-tab-view/navigation would work, but I'm not sure if react native and the metro bundler can use it:
https://nodejs.org/api/packages.html#packages_package_entry_points

Alternatives:

1. Could make the peer non optional, but users still need to ensure it's installed in their projects. Peers usually just show a warning while installing, which most users ignore. And having it non-optional isn't a great approach for people that don't need react-navigation integration.

2. Could publish a separate npm package just with the react-navigation integration. Might be do-able, but would need restructuring this project to be a monorepo (via yarn workspaces, for example).

[PedroBern]

@andreialecu thanks for the help. Did a quick modification, adding a navigation.tsx to export the navigator, published the @beta version to test, and didn't work. Need to import from .../lib/module/navigation, and something was broken, because the navigator stopped working in my project.

Seems like the best alternative is the 2 you have pointed, I will look into it in the future, but as right now I don't have much time, I will follow the alternative 1.

[PedroBern]

As it isn't an optional dependency anymore (in v1.4.2), I'm closing. When there is some extra time, I will look into refactoring into a monorepo.

[345ml]

Good job guys!!!