Platform Specific Code with Webpack - React Native

Question

I have been fighting with this trying to find a solution and trying solutions left and right, and I can't seem to figure this one out.

With React Native we have .ios and .android file extensions. Each of which the React Native packager will handle for us. Now, I'm using webpack (because I love to torture myself) and I cannot get it to resolve the filename extensions properly. Using the React Native Webpack Server (which there seemed to be no solution for this), it returns an error that looks similar to this:

This is due to there being a .ios and .android file being called as: require('Spinner'); The React Native packager will resolve these files, webpack will not. I need to mix these two to get this to work, or is there now a magical solution to where I don't have to use webpack at all anymore.

I think I'm getting my point across with this alone, and wondered if there is a webpack extension or a resolve alias I can use to fix this issue. If needed I will post my webpack setup here.

Have you tried looking to any of the webpack boilerplates for inspiration? Here's one. github.com/jhabdas/react-native-webpack-starter-kit — Chris Geirman
That is what I'm using currently as inspiration, and it doesn't have the solution either. — Mike Huebner

Bob Sponge Bob Sponge · Accepted Answer · 2016-03-10T12:14:35

Let me share my inspiration :) You can split webpack config into two configs with single entry point in each. Then specify .ios.js and .android.js extensions in resolve section:

entry: {
  'index.ios': ['./src/main.ios.js']
},
...
resolve: {
   extensions: ['', '.js', '.ios.js', ...] // '.android.js' will be in other config
}

Or you can write own loader, but it needs more inspiration.

Platform Specific Code with Webpack - React Native

1 Answers