Overriding resolution through Babel poisons Metro's transformer cache

[byCedric]

Hi! After I created PR #8, I noticed something in packages/vega that I don't have a fix for but thought you should know.

TL;DR; @amazon-devices/kepler-module-resolver-preset should be a Metro resolution override, not a Babel plugin.

As you know, Metro is a bundler that heavily leverages caching to stay performant. The main thing Metro is caching is the transform results from Metro's own transform pipeline, which by default is Babel. While it's perfectly fine to mutate code during the transformation stage, there are also some heavy pitfalls that we (at Expo) came to learn the hard way.

Both babel-plugin-module-resolver and babel-plugin-transform-inline-environment-variables (and similar) actually mutate code during transformation. The first is just for resolution, to change the resolution mechanism based on overrides or redirects. The second one just swaps out environment variable references with it's value at the time of transformation. Unfortunately, both poison the Metro cache, as both transform actions get cached without Metro being aware of this without being able to invalidate these caches when things change.

I see that packages/vega uses @amazon-devices/kepler-module-resolver-preset in

react-native-multi-tv-helloworld/packages/vega/babel.config.js

Line 11 in 8e741f3

'module:@amazon-devices/kepler-module-resolver-preset', // Enables usage of VegaModuleResolverPreset

, which AFAICS is exactly the same pitfall as babel-plugin-module-resolver. When users have a warm cache, but the package wants to change any resolutions, users have to force-reset the cache as the previous resolutions are cached in the transformer stage. This is also the primary reason why we added support for .env files and environment variables in Expo, to make Metro aware of these values and be able to cache correctly.

Ideally, you'd want to use Metro's own config.resolver.resolveRequest override to customize resolutions. Instead of these resolutions being cached in the transform stage, these types of resolutions are not cached (but are still fast, we really worked on them). Meaning that if you'd add, remove, or change resolutions in @amazon-devices/kepler-module-resolver-preset, even with a warm cache the right resolutions are hit and no force-clear is required.

I think this is the gist of the issue, happy to elaborate more if needed.

[anishamalde]

Thanks for flagging this & the PR's, really appreciate the detailed breakdown.

You're spot on. I think the reason VMRP went through Babel is that Vega uses split bundling, and the architecture doesn't support standard npm aliases and overrides. But as you've outlined, doing resolution in the transform layer 'poisons' the Metro cache. The VMRP docs even recommend --reset-cache on rebuilds, which 'acknowledges' this problem.

Agreed that config.resolver.resolveRequest is the right place for this - so I'll flag it with the Vega platform team as a suggested improvement.

Thanks again for the insight - really useful for the team to hear!

[byCedric]

Oh awesome! Sorry, I did not look at the docs 😅.

If it helps, I think there is a way to do both Babel and Metro resolutions from a single library. You can reuse all code, except the plugin itself ofc. It's kind of funny to see "CONFIDENTIAL" in the published npm package, but I can see roughly how it works through that.

Let me know if there is anything we can help or prototype for Vega and Expo! 😄