side-effect-analyzer

name

side-effect-analyzer

description

Run and interpret @module-federation/side-effect-scanner (se-scan) results to detect frontend side effects: CSS leaks/conflicts, global variable pollution, global event listener leaks, and risky DOM mutations. Use when you need a Markdown/JSON report, want to review a PR/build artifact for side effects, need help choosing scan mode (entry vs dist), configuring .serc.ts/alias/max-depth/ignore/adapter, or turning findings into actionable fixes.

Side Effect Analyzer

What to do

Use this skill to run se-scan and turn scan output into an actionable audit report + fix plan.

Focus areas:

• CSS side effects (global selectors, conflicts, risky rules)
• Global variable pollution (accidental globals, window/prototype overrides)
• Global event listeners (missing cleanup, duplicate listeners, anonymous handlers)
• Dynamic DOM mutations (append/remove/insert/innerHTML, when enabled)

Workflow

1) Pick scan mode

• Built artifacts (recommended): when you have dist/ or want production-truth.
  • npx se-scan --dir dist
• Source entry: when you want to analyze from an entry and dependencies.
  • npx se-scan --entry src/index.ts

If the project needs TS/JSX compilation, keep --compile (default). If you scan --dir, compile is off automatically.

2) Apply project config (optional)

Use .serc.ts (repo root has examples) when you need:

• alias for path mapping
• maxDepth to cap dependency traversal
• ignore to exclude files/lines