I have React web app and ReactNative mobile app in Nx monorepo
I need tree shaking in ReactNative so I am trying to use rnx-kit for this purpose but unable to make it work.
How to make rnx-kit work with Nx ReactNative to achieve tree shaking?
Below are the code snippets that I am trying.
metro.config.js
const { withNxMetro } = require('@nx/react-native')
const { getDefaultConfig } = require('metro-config')
const exclusionList = require('metro-config/src/defaults/exclusionList')
const { makeMetroConfig } = require('@rnx-kit/metro-config')
const MetroSymlinksResolver = require('@rnx-kit/metro-resolver-symlinks')
module.exports = (async () => {
const {
resolver: { sourceExts, assetExts },
} = await getDefaultConfig()
const config = withNxMetro(
{
transformer: {
getTransformOptions: async () => ({
transform: {
experimentalImportSupport: false,
inlineRequires: true,
},
}),
babelTransformerPath: require.resolve('react-native-svg-transformer'),
},
resolver: {
assetExts: assetExts.filter((ext) => ext !== 'svg'),
sourceExts: [...sourceExts, 'svg'],
blockList: exclusionList([/^(?!.*node_modules).*\/dist\/.*/]),
},
},
{
debug: false,
extensions: [],
projectRoot: __dirname,
watchFolders: [],
}
)
return makeMetroConfig({
...config,
resolver: {
...config.resolver,
resolveRequest: MetroSymlinksResolver(),
},
})
})()
and added below rnx-kit App configuration in Nx workspace package.json
{
...
"rnx-kit": {
"bundle": {
"entryFile": "./apps/my-app/src/main.tsx",
"targets": [
"ios", "android"
],
"treeShake": true
}
}
}
and I am using react-native rnx-bundle for bundling but it is unable to locate my Nx lib imports e.g
import { SomeFunction } from '@RNApp/components'