How to use rnx-kit bundling with Nx ReactNative

253 Views Asked by At

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'
0

There are 0 best solutions below