Panic occured at runtime - Migration form CRA

[mathiaslaramee]

System Info

System: OS: Windows 10 10.0.19045 CPU: (16) x64 AMD Ryzen 7 PRO 6850U with Radeon Graphics Memory: 12.01 GB / 31.31 GB Binaries: Node: 18.19.0 - C:\Program Files\nodejs\node.EXE Yarn: 1.22.19 - ~\AppData\Roaming\npm\yarn.CMD npm: 10.2.3 - C:\Program Files\nodejs\npm.CMD Browsers: Edge: Chromium (120.0.2210.121)

Details

Following the guide on rsbuild.dev migrating from an existing MF CRA (not ejected) app to rsbuild. Got this error in the terminal when running rsbuild dev - It told me to create an issue here

Message:  should have dependency id, failed at C:\source\analytics\heat
Location: crates\rspack_plugin_javascript\src\dependency\context\common_js_require_context_dependency.rs:101

Run with COLORBT_SHOW_HIDDEN=1 environment variable to disable frame filtering.
Run with RUST_BACKTRACE=full to include source snippets.
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ BACKTRACE ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
 1: napi_register_module_v1
    at <unknown source file>
 2: napi_register_module_v1
    at <unknown source file>
 3: napi_register_module_v1
    at <unknown source file>
 4: napi_register_module_v1
    at <unknown source file>
 5: napi_register_module_v1
    at <unknown source file>
 6: napi_register_module_v1
    at <unknown source file>
 7: napi_register_module_v1
    at <unknown source file>
 8: BaseThreadInitThunk
    at <unknown source file>
 9: RtlUserThreadStart
    at <unknown source file>
error Command failed with exit code 3221226505.

Using: "@rsbuild/core": "^0.3.1", "@rsbuild/plugin-react": "^0.3.1",

rsbuild.config.ts:

import { defineConfig, loadEnv } from "@rsbuild/core";
import { pluginReact } from "@rsbuild/plugin-react";
import rspack from "@rspack/core";
import mfConfig from "./modulefederation.config";

const { publicVars } = loadEnv({ prefixes: ["REACT_APP_"] });

export default defineConfig({
  html: {
    template: "./public/index.html"
  },
  source: {
    define: publicVars,
    entry: {
      index: "./src/index.js"
    }
  },
  dev: {
    assetPrefix: "/heat/",
    startUrl: "http://localhost:3000/heat"
  },
  server: {
    port: 3000
  },
  output: {
    distPath: {
      root: "build"
    },
    assetPrefix: "/heat/",
    sourceMap: {
      js:
        process.env.NODE_ENV === "production"
          ? // Use a high quality source map format for production
            "source-map"
          : // Use a more performant source map format for development
            "cheap-module-source-map"
    }
  },
  tools: {
    rspack: {
      plugins: [new rspack.container.ModuleFederationPlugin(mfConfig)],
      module: {
        rules: [
          {
            test: /\.pdf$/,
            // converts asset to a separate file and exports the URL address.
            type: "asset/resource"
          }
        ]
      }
    }
  },
  plugins: [pluginReact()]
});

modulefederation.config.js:

const env = process.env.NODE_ENV ? process.env.NODE_ENV : "development";
require("dotenv").config({ path: __dirname + `/.env.${env}` });
const { dependencies } = require("./package.json");

// Use the REMOTE_DOMAIN variable in urls to enable dev/test/prod deployment.
const REMOTE_DOMAIN =
  process.env.REMOTE_DOMAIN ||
  (() => {
    throw new Error("REACT_APP_REMOTE_DOMAIN environmental variable not set");
  })();

module.exports = {
  name: "heat",
  filename: "remoteEntry.js",
  remotes: {
    "@remotes/coreState": `coreState@${REMOTE_DOMAIN}/mf/core-state/remoteEntry.js`,
    "@remotes/coreAuth": `coreAuth@${REMOTE_DOMAIN}/mf/core-auth/remoteEntry.js`,
    "@remotes/DLTA": `DLTA@${REMOTE_DOMAIN}/heatintbasic/remoteEntry.js`
  },
  exposes: {
    "./moduleIntegration": "./src/exposes/moduleIntegration"
  },
  shared: {
    ...dependencies,
    "@kamstrup/kfl": {
      singleton: true
    },
    "@emotion/react": {
      singleton: true,
      requiredVersion: "auto"
    },
    "react-router-dom": {
      singleton: true,
      requiredVersion: dependencies["react-router-dom"]
    },
    react: {
      eager: true,
      singleton: true,
      requiredVersion: dependencies["react"]
    },
    "react-dom": {
      eager: true,
      singleton: true,
      requiredVersion: dependencies["react-dom"]
    }
  }
};

Reproduce link

No response

Reproduce Steps

Install @rsbuild/core & @rsbuild/plugin-react run yarn rsbuild dev

[github-actions[bot]]

Hello @mathiaslaramee, sorry we can't investigate the problem further without reproduction demo, please provide a repro demo by forking rspack-repro, or provide a minimal GitHub repository by yourself. Issues labeled by need reproduction will be closed if no activities in 14 days.

[ahabhgk]

Could you provide a minimal reproduction?

[mathiaslaramee]

I cannot create a repo to reproduce since it's happening in a prod app at my company but I did boil it down to the failure happening in an internal npm-package handling INTL.

When doing this inline require inside an NPM-package, so basically from node_modules in the failing application

return (
    <TranslationContext.Provider
      value={{
        translateText,
        translateDate,
        translateNumber,
        isLanguage,
        locale
      }}
    >
      <IntlProvider
        locale={lang}
        timeZone={timeZone}
        messages={require(`/src/i18n/${languagePath}/${translationsFileName}.json`)}
      >
        <IntlSetter setIntl={setIntl} />
        {intl ? children : null}
      </IntlProvider>
    </TranslationContext.Provider>
  );

Then it fails. We've later upgraded this package to handle this differently so the messages are passed as a prop to this npm-package component instead of letting the Provider handle it.

This is how it was used in the failing app

 <TranslationsProvider
      supportedLocales={supportedLanguages}
      ranslationsFileName="translations"
 >
     <AuthenticationProvider>
         <App />
      </AuthenticationProvider>
</TranslationsProvider>

[ahabhgk]

Could you change 'require(`/src/i18n/${languagePath}/${translationsFileName}.json`)' to a relative path and see whether the problem still exists?

[ahabhgk]

If still exists then I can't help more without a minimal reproduction, I suggest try to extract this into a separate demo.

[mathiaslaramee]

I changed it so it wasn't the npm packages job to get the json file but the consuming application itself and then it passes it on to the npm package and now it works. So looks like the absolute require form within node_modules broke the build step. Thanks for your help and time 😄

[ahabhgk]

Good to hear