Is babel-plugin-react-native-web still required with Next.js 12?

[steida]

Next.js 12 has a new Rust compiler that does not support Babel.
From the babel-plugin-react-native-web readme:

A Babel plugin that will alias react-native to react-native-web and exclude any modules not required by your app (keeping bundle size down).

There is already aliasing in Webpack and as I manually checked, babel-plugin-react-native-web actually makes the build slightly bigger (around 4 kB).

So my question is, is babel-plugin-react-native-web still recommended?

[danbim]

@steida Any revelations on this one? :)

[danbim]

Btw... here's the relevant documentation: https://nextjs.org/docs/advanced-features/compiler#unsupported-features

[nissy-dev]

I think the babel-plugin-react-native-web is not necessary in many cases in the term of tree shaking or keeping bundle size down.

Actually, I confirmed removing all the unused code from react-native-web about the next.js example without using babel-plugin-react-native-web (only using the package aliasing). The total module size is 70.3kB, but the bundled size is only 14kB.

bundlephobia also said that react-native-web package is tree shakeable.
https://bundlephobia.com/package/react-native-web@0.18.10

[danbim]

Thanks @nissy-dev ‚ Sounds promising :). Given that you’ve already done this work, could you share how your next.js configuration looks like to work with react-native-web?

[nissy-dev]

The configuration is the same as https://github.com/vercel/next.js/blob/canary/examples/with-react-native-web/next.config.js