dev-overrides

1. What dev-overrides does

• Adds a floating Dev Overrides panel to your app in development.
• You register an exported symbol (by path + name), then apply a mock:
  • function → change return value, patch arguments, or throw
  • component → replace/override render output
  • hook → override hook return/behavior (Rules of Hooks preserved)
• Your source files are never modified on disk. Webpack transforms them in memory via a Babel plugin that only wraps symbols you registered.

2. Prerequisites

• Node >= 22.11.0 (spr-main-web engines).
• spr-main-web dev environment already working (yarn next-dev:only runs).

3. Install dev-overrides

yarn workspace spr-main-web add -D dev-overrides

(Or, for local development against this repo, use a file: / workspace link to dev-tool/.)

4. Wire dev-overrides into spr-main-web

A. Webpack (client dev only) — apps/spr-main-web/webpack-next/index.ts:

function makeDecorateWebpackConfig({ getAssetPrefix }) {
  return function decorateWebpackConfig(config, options) {
    defaultDecorateWebpackConfig(config, options);
    addModuleFederationPlugin(config, options, { getAssetPrefix });

    // dev-overrides — CLIENT DEV build only
    if (options.dev && !options.isServer) {
      const { devOverridesNext } = require('dev-overrides/next-plugin');
      config.plugins.push(devOverridesNext());
    }
    return config;
  };
}

B. Bootstrap the panel — top of apps/spr-main-web/src/pages/_app.tsx:

if (typeof window !== 'undefined' && __IS_DEV_BUILD__) {
  require('dev-overrides/bootstrap');
}

5. Start spr-main-web normally

yarn next-dev:only        # Module Federation off
# or
yarn next-dev-mf:clean    # Module Federation on

6. Confirm the standalone API is running

Set DEV_OVERRIDES_DEBUG=true when starting dev to enable useful [DEV-OVERRIDES] logs in the terminal and in the browser DevTools → Console (filter by [DEV-OVERRIDES]). Accepted values: true, 1, yes, on.

DEV_OVERRIDES_DEBUG=true yarn next-dev:only

What you see with DEBUG on (not noisy):

| Where | Examples | | --------------- | ------------------------------------------------------------------------------ | | Terminal | Plugin wiring, standalone API URL, register/deregister/invalidate, webpack HMR | | Browser Console | Bootstrap, panel mount, API base resolution, register/apply/deregister |

Per-file Babel transforms and per-invoke mock calls are off by default. Enable only when you need deep tracing:

DEV_OVERRIDES_TRACE=true DEV_OVERRIDES_DEBUG=true yarn next-dev:only

Look for these lines in the terminal (when debug is enabled):

[DEV-OVERRIDES] wired N loader(s) [loader/index.js] with the dev-overrides Babel transform.
[DEV-OVERRIDES] Standalone API server at http://127.0.0.1:48765 ...
[DEV-OVERRIDES] Health check: GET http://127.0.0.1:48765/__dev_overrides__/enabled

7. Open and use the panel

The floating Dev Overrides panel mounts automatically in dev. Drag/resize/minimize as needed.

8. Register an entity

1. Open the panel's Register section.
2. File path — hub-relative from sprinklr-ui-hub root, e.g.:

• apps/spr-main-web/src/components/AppThemeSwitcher.tsx
• packages/modules/src/components/ModuleWidget.tsx
• microfrontends/ads/src/.../CreateForm.tsx
• Import aliases also work: @spr-main-web/components/AppThemeSwitcher.tsx

3. Entity name — the symbol at its definition site (e.g. AppThemeSwitcher, helper, default for export default arrows).
4. Click Register. The tool validates on disk, adds it to the enable-set, and triggers a scoped recompile so the Babel plugin wraps it.

9. Validate an entity

Validation runs automatically as you type (debounced). It confirms the symbol exists as a callable definition in the file and returns its parameter names when found. Errors are shown inline (e.g. entity "foo" not found as a named function/arrow definition in this file).

10. Apply a mock

Select the entity in the list → choose an effect:

• Component → applies instantly (store-only, no rebuild, no reload). Modes: Hide, Suspend (Suspense), props patch, throw.
• Function → set a fixed return, patch args, or throw; the wrapped export reads the store on each call (HMR reloads the source module when needed).
• Hook → override return/behavior; importers refresh via HMR.

11. Deregister an entity

Click Deregister on the entity. It is removed from the enable-set and the next rebuild emits the original, unwrapped export.

12. Supported entity shapes

Supported callable definitions (validated on disk, wrapped by the Babel plugin after register):

• function Name(...) { … } — module-level or exported (named / default)
• const Name = () => … / const Name = function (...) { … } — including export const
• export default arrow / function expression — register the entity name as default

Kind is inferred from the symbol name:

• useX → hook
• PascalCase → component
• otherwise → function

Examples:

export function setWindowEnv() { /* ... */ }           // function
export const AppThemeSwitcher = () => { /* ... */ };   // component (PascalCase)
export function useCampaign(id: string) { /* ... */ }  // hook

// export default arrow — register entity name "default"
export default () => <div />;