[lexical] duplicate DOMImportRule name "${rule.name}" — keep

Error message

[lexical] duplicate DOMImportRule name "${rule.name}" — keep names unique to aid debugging.

What it means

compileImportRules() emits a console.warn when two DOMImportRule entries share the same explicit `name`. Names only exist to make debugging (rule attribution in devtools/logs) easier, so a duplicate means two rules are indistinguishable during debugging. The rules still compile and run; only the diagnostic value is lost.

Source

Thrown at packages/lexical-html/src/import/compileImportRules.ts:84

 * contributor occupy the lowest indices.
 *
 * @internal
 */
export function compileImportRules(
  rules: readonly AnyDOMImportRule[],
): CompiledDispatch {
  const compiled: CompiledRule[] = [];
  const byTag = new Map<string, number[]>();
  const wildcardIndices: number[] = [];
  const textIndices: number[] = [];
  const commentIndices: number[] = [];
  const seenNames = new Set<string>();

  rules.forEach((rule, i) => {
    const sel = getSelectorImpl(rule.match);
    const name = rule.name || defaultRuleName(sel, i);
    if (__DEV__ && typeof rule.name === 'string' && seenNames.has(rule.name)) {
      console.warn(
        `[lexical] duplicate DOMImportRule name "${rule.name}" — keep names unique to aid debugging.`,
      );
    }
    if (rule.name) {
      seenNames.add(rule.name);
    }
    compiled.push({
      $import: rule.$import as DOMImportFn<
        Node,
        Record<string, RegExpMatchArray>
      >,
      name,
      predicate: sel.predicate,
    });

    if (sel.kind === 'text') {
      textIndices.push(i);
    } else if (sel.kind === 'comment') {

View on GitHub (pinned to 76a22dcba9)

Solutions

Rename one of the duplicate rules so every rule has a unique `name`.
If names are generated, include the index or selector in the name to guarantee uniqueness (the fallback defaultRuleName(sel, i) does this).
If the name adds no value, omit `name` and let the default unique name be generated.
This is only a dev warning — for production builds (__DEV__ false) no warning is emitted; still fix the duplication for debuggability.

Example fix

// before
const rules = [
  {name: 'image', match: 'img', ...},
  {name: 'image', match: 'img[data-src]', ...},
];
// after
const rules = [
  {name: 'image', match: 'img', ...},
  {name: 'image-data-src', match: 'img[data-src]', ...},
];

Defensive patterns

Strategy: validation

Validate before calling

const names = rules.filter(r => r.name).map(r => r.name);
const dupes = names.filter((n, i) => names.indexOf(n) !== i);
if (dupes.length) throw new Error(`Duplicate DOMImportRule names: ${[...new Set(dupes)].join(', ')}`);

Prevention

Give each rule a unique, descriptive name derived from its selector or purpose.
Add a dev-time assertion/test that iterates your rule list and asserts name uniqueness.
Omit `name` when it carries no debugging value so defaults are used.

When it happens

Trigger: Calling compileImportRules (directly or via dispatch/defineOverlayRules) with an array of rules where at least two rules have the same non-empty `name` string; the __DEV__-only check dedupes via a Set of seen names.

Common situations: Spreading/concatenating rule arrays from two modules that both define a rule named e.g. 'image'; copy-pasting a rule and forgetting to rename it; programmatic rule generation that reuses a fixed name.

Related errors

AI-assisted analysis of facebook/lexical@76a22dcba9 (2026-08-31). Data as JSON: /api/errors/4d85322c9ae826cc. Report an issue: GitHub.