[SOLVED] Build React Native app with webpack instead of metro

Issue

My React Native app is part of a monorepo. All the "buildables" (api, backend, website) are written in TypeScript and built with Webpack.

All of them use inversify. Therefore, the configuration to make decorators work is kind of duplicated in both Webpack and Metro/Babel configuration. Plus, some things are not working the same and require additional babel plugins.

I’ve checked pretty much everywhere but did not find an answer :

What concretely prevents us from using Webpack to build a RN app and completely get rid of Metro/Babel ? (except dev tools like HMR, etc.)

Solution

I’ve ended up splitting my build process in 2 parts :

  1. Webpack takes my index.tsx and builds an index.js via
    ts-loader (using a node target)
  2. Metro takes this index.js as entrypoint

Since it’s already transpiled, no need to define complex mechanism for Metro to build TypeScript 👌🏽. And no need for any babel plugins neither. Much simpler.

It’s an addiitonal step, but at least, I have one central Webpack configuration to transpile TS and most of all, I’m sure it’s transpiled the same way for all my targets (especially the decorators part).

Answered By – c4k

Answer Checked By – David Goodson (BugsFixing Volunteer)

Leave a Reply

Your email address will not be published. Required fields are marked *