typescriptreact-nativewebpackmetro-bundlerinversifyjs

Build React Native app with webpack instead of metro

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).

    UPDATE 2024-07-26 : This turned out to be a "bad" idea because it broke the assets mechanism handled by Metro. Therefore, I had to switch back to letting Metro/Babel do the transpiling.