Getting Error on react-navigation after latest update

[nazrighazi-cd]

Hi, I'm getting error on the react-navigation after updating repack to 3.5.1.

I undo the update to 3.4.0, and the app working again. Is there any changes I need to do on 3.5.1 update?

[jbroma]

Hey @nazrighazi-cd,

could you please share your webpack.config so we can see what might be a potential issue? Thanks!

[nazrighazi-cd]

Hey @jbroma , sure. This is my webpack config. I have to change to docx format as I cannot upload mjs file

webpack.config.mjs.docx

        import path from 'path';
        import TerserPlugin from 'terser-webpack-plugin';
        import * as Repack from '@callstack/repack';
        
        export default (env) => {
          const {
            mode = 'development',
            context = Repack.getDirname(import.meta.url),
            entry = './index.js',
            platform = process.env.PLATFORM,
            minimize = mode === 'production',
            devServer = undefined,
            bundleFilename = undefined,
            sourceMapFilename = undefined,
            assetsPath = undefined,
            reactNativePath = new URL('./node_modules/react-native', import.meta.url)
              .pathname,
          } = env;
          const dirname = Repack.getDirname(import.meta.url);
        
          if (!platform) {
            throw new Error('Missing platform');
          }
        
          process.env.BABEL_ENV = mode;
        
          return {
            mode,
            devtool: false,
            context,
            entry: [
              ...Repack.getInitializationEntries(reactNativePath, {
                hmr: devServer && devServer.hmr,
              }),
              entry,
            ],
            resolve: {
              ...Repack.getResolveOptions(platform),
              alias: {
                'react-native': reactNativePath,
                '@cd-next-gen-app/ui-components': new URL(
                  '../../../libs/ui-components/src/index.ts',
                  import.meta.url
                ).pathname,
                '@cd-next-gen-app/icons': new URL(
                  '../../../libs/icons/src/index.ts',
                  import.meta.url
                ).pathname,
                '@cd-next-gen-app/themes': new URL(
                  '../../../libs/themes/src/index.ts',
                  import.meta.url
                ).pathname,
                '@cd-next-gen-app/store': new URL(
                  '../store/src/index.ts',
                  import.meta.url
                ).pathname,
              },
            },
        
            output: {
              clean: true,
              hashFunction: 'xxhash64',
              path: path.join(dirname, 'build/generated', platform),
              filename: 'index.bundle',
              chunkFilename: '[name].chunk.bundle',
              publicPath: Repack.getPublicPath({ platform, devServer }),
            },
            optimization: {
              minimize,
              minimizer: [
                new TerserPlugin({
                  test: /\.(js)?bundle(\?.*)?$/i,
                  extractComments: false,
                  terserOptions: {
                    format: {
                      comments: false,
                    },
                  },
                }),
              ],
              chunkIds: 'named',
            },
            module: {
              rules: [
                {
                  test: /\.[jt]sx?$/,
                  include: [
                    /node_modules(.*[/\\])+react\//,
                    /node_modules(.*[/\\])+react-native/,
                    /node_modules(.*[/\\])+@react-native/,
                    /node_modules(.*[/\\])+@react-navigation/,
                    /node_modules(.*[/\\])+@react-native-community/,
                    /node_modules(.*[/\\])+@expo/,
                    /node_modules(.*[/\\])+pretty-format/,
                    /node_modules(.*[/\\])+metro/,
                    /node_modules(.*[/\\])+abort-controller/,
                    /node_modules(.*[/\\])+@callstack\/repack/,
                    /node_modules(.*[/\\])+native-base/,
                    /node_modules(.*[/\\])+react-freeze/,
                    /node_modules(.*[/\\])+@react-stately/,
                    /node_modules(.*[/\\])+react-native-svg/,
                  ],
                  use: 'babel-loader',
                },
                {
                  test: /\.[jt]sx?$/,
                  exclude: /node_modules/,
                  use: {
                    loader: 'babel-loader',
                    options: {
                      plugins:
                        devServer && devServer.hmr
                          ? ['module:react-refresh/babel']
                          : undefined,
                    },
                  },
                },
        
                {
                  test: Repack.getAssetExtensionsRegExp(
                    Repack.ASSET_EXTENSIONS.filter()
                  ),
                  use: {
                    loader: '@callstack/repack/assets-loader',
                    options: {
                      platform,
                      devServerEnabled: Boolean(devServer),
                      scalableAssetExtensions: Repack.SCALABLE_ASSETS,
                    },
                  },
                },
              ],
            },
            plugins: [
              new Repack.RepackPlugin({
                context,
                mode,
                platform,
                devServer,
                output: {
                  bundleFilename,
                  sourceMapFilename,
                  assetsPath,
                },
              }),
        
              new Repack.plugins.ModuleFederationPlugin({
                name: 'reload',
                exposes: {
                  './App': './src/containers/home',
                },
        
                shared: {
                  react: {
                    singleton: true,
                    eager: true,
                    requiredVersion: '18.2.0',
                  },
                  'react-native': {
                    singleton: true,
                    eager: true,
                    requiredVersion: '0.72.4',
                  },
                  '@react-navigation/native': {
                    singleton: true,
                    eager: true,
                    requiredVersion: '6.1.7',
                  },
                  '@react-navigation/native-stack': {
                    singleton: true,
                    eager: true,
                    requiredVersion: '6.9.13',
                  },
                  'native-base': {
                    singleton: true,
                    eager: true,
                  },
                  'react-native-svg': {
                    ...Repack.Federated.SHARED_REACT_NATIVE,
                  },
                },
              }),
            ],
          };
        };

[jbroma]

@nazrighazi-cd, you need to add react-native-safe-area-context to shared dependencies inside of ModuleFederationPlugin in order to properly share it.

[nazrighazi-cd]

working now. thank you