Using React-Navigation with react-native-web throws me error because it cannot import web related module

Question

I am using react native web with react-navigation. I am getting this error:

Module not found: Can't resolve './PlatformHelpers' in '/home/vineet/projects/jm-agent-web/node_modules/react-navigation/lib'

I am getting this error because these files are present: PlatfomrHelpers.ios.js, PlatfomrHelpers.android.js, PlatfomrHelpers.web.js. But there is no PlatfomrHelpers.js.

So my ES6 importing system is not able to import PlatfomrHelpers.web.js for the import name ' PlatfomrHelpers' in react-native-web.

How to solve this?

Answer 1

I would like to share the solution that I implemented and its a really easy one.

The problem can be solved by telling webpack to prioritize import of .web.js file.

I went into my webpack.config.js file. Inside top level 'resolve' property I can add '.web.js' as an element in the 'extensions' array. The following code solved it:

extensions: ['.web.js', '.js', '.json', '.jsx']

Now my webpack is picking up 'PlatfomrHelpers.web.js' for the statement:

import 'PlatformHelpers'

Answer 2

The problem is that react-navigation distinguishes between PlatformHelpers.native.js and PlatformHelpers.web.js for native and web. With react native you usually have .ios.js and .android.js files to distinguish between your platform, react-navigation also targets web though. The simplest solution is to teach your flow config to also handle .native.js files for native and .web.js for react native web.

Therefore add this to your .flowconfig in the [options] section:

module.file_ext=.web.js

Or for standard react native:

module.file_ext=.native.js