How to set root path properly about repack

[zamotany]

The value seems correct. It looks to me that React Native app is configured to make requests using package/appX. Can you check AppDelegate.m and make sure it's not setting package/appX in URL somewhere. You can also do project-wide search for package/app.

[zamotany]

Can you paste your webpack.config.js for either of there apps?
Also from which directory are you running the react-native webpack-start/Webpack CLI - is it from the monorepo root or from inside packages/appX?

[DanijelBojcic]

Im running it from packages/appX
Webpack config:

const path = require("path");
const webpack = require("webpack");
const ReactNative = require("@callstack/repack");
const TerserPlugin = require("terser-webpack-plugin");

const mode = ReactNative.getMode();
const dev = mode === "development";
const context = ReactNative.getContext();
const entry = ReactNative.getEntry();
const platform = ReactNative.getPlatform({ fallback: process.env.PLATFORM });
const minimize = ReactNative.isMinimizeEnabled({ fallback: !dev });
const devServer = ReactNative.getDevServerOptions();
const reactNativePath = ReactNative.getReactNativePath({ fallback: "../../node_modules/react-native" });

const babelConfig = {
  presets: ["module:metro-react-native-babel-preset"],
  plugins: ["react-native-reanimated/plugin"],
  env: {
    production: {
      plugins: [
        "transform-remove-console",
        [
          "babel-plugin-jsx-remove-data-test-id",
          {
            attributes: ["testID", "testId"],
          },
        ],
      ],
    },
  },
};

process.env.BABEL_ENV = mode;

/**
 * Webpack configuration.
 */
module.exports = {
  mode,
  devtool: false,
  context,
  entry: [
    ...ReactNative.getInitializationEntries(reactNativePath, {
      hmr: devServer.hmr,
    }),
    entry,
  ],
  resolve: {
    ...ReactNative.getResolveOptions(platform),
    alias: {
      "react-native": reactNativePath,
    },
  },

  output: {
    clean: true,
    path: path.join(__dirname, "build", platform),
    filename: "index.bundle",
    chunkFilename: "[name].chunk.bundle",
    publicPath: ReactNative.getPublicPath(devServer),
  },

  optimization: {
    minimize,
    minimizer: [
      new TerserPlugin({
        test: /\.(js)?bundle(\?.*)?$/i,
        extractComments: false,
      }),
    ],
  },
  module: {
    rules: [
      {
        test: /\.[jt]sx?$/,
        include: [
          /node_modules(.*[/\\])+react/,
          /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/,
        ],
        use: {
          loader: "babel-loader",
          options: babelConfig,
        },
      },
      {
        test: /\.[jt]sx?$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
          options: {
            ...babelConfig,
            plugins: devServer.hmr ? ["module:react-refresh/babel", ...babelConfig.plugins] : babelConfig.plugins,
          },
        },
      },
    ],
  },
  plugins: [
    new webpack.DefinePlugin({
      __DEV__: JSON.stringify(dev),
    }),
    new ReactNative.AssetsPlugin({
      platform,
      devServerEnabled: devServer.enabled,
    }),
    new ReactNative.TargetPlugin(),
    new ReactNative.OutputPlugin({
      devServerEnabled: devServer.enabled,
    }),
    new ReactNative.DevServerPlugin({
      platform,
      ...devServer,
    }),
    new webpack.SourceMapDevToolPlugin({
      test: /\.(js)?bundle$/,
      exclude: /\.chunk\.(js)?bundle$/,
      filename: "[file].map",
      append: `//# sourceMappingURL=[url]?platform=${platform}`,
    }),
    new webpack.SourceMapDevToolPlugin({
      test: /\.(js)?bundle$/,
      include: /\.chunk\.(js)?bundle$/,
      filename: "[file].map",
      append: `//# sourceMappingURL=[url]?platform=${platform}`,
    }),
    new ReactNative.LoggerPlugin({
      platform,
      devServerEnabled: devServer.enabled,
      output: {
        console: true,
      },
    }),
  ],
};

[zamotany]

Can you add console.log({ context }) to this webpack.config.js and check what it's printing?

[DanijelBojcic]

Here's every variable:

{
  "mode": "development",
  "dev": true,
  "context": "path_to_root/packages/app1",
  "entry": "./index.js",
  "platform": "ios",
  "minimize": false,
  "devServer": { "enabled": true, "hmr": true, "host": "localhost", "port": 52019 },
  "reactNativePath": "path_to_root/node_modules/react-native"
}

[DanijelBojcic]

Thanks, this did the trick.
For other folks out there using monorepo and migrating to Repack these are the changes that solved this:

• In AppDelegate.m find the sourceURLForBridge section and change it so it looks like the following:

- (NSURL *)sourceURLForBridge:(RCTBridge *)bridge
{
#if DEBUG
  return [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index" fallbackResource:nil]; // I had jsBundleURLForBundleRoot:@"packages/appX"
#else
  return [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"];
#endif
}

• In MainApplication.java find getJSMainModuleName, it should be:

 @Override
        protected String getJSMainModuleName() {
          return "index"; // I had "packages/appX"
        }

• In app/build.gradle find project.ext.react and remove the folllowing fields if they are present:

entryFile,cliPath,composeSourceMapsPath

• In xCode open Build phases and expand Bundle React Native Code And Images. You don't need EXTRA_PACKAGER_ARGS if its there.

Also If you get errors in the bundle after the build in xCode ( some classes were not transpiled ) you need to add them in the webpack.config. ( https://github.com/callstack/repack/blob/main/templates/webpack.config.js#L147 )

[zamotany]

I'm closing this issue since it seems to be resolved. If there are any more problems with it, feel free to reopen.