Scenario Setup
In Webpack, the mainFiles module resolution feature allows for resolving specific files based on the environment. This concept is exemplified by:
| Button
| | - index.ts
| | - index.performer.ts
| | - index.customer.ts
// page.ts
import Button from './Button';
A similar approach exists in react-native's platform-specific module resolution.
This setup enables importing buttons based on the platform (i.e., environment).
| Button
| | - index.ts
| | - index.android.ts
| | - index.ios.ts
// App.ts
import Button from './Button';
The Question Arises:
How can TypeScript be configured to resolve imports and choose the correct file depending on the environment?
The issue arises when webpack or metro selects index.android.ts, while TypeScript assumes we imported index.ts.
This discrepancy poses a challenge that needs to be addressed.