Logs & Warnings
This document describes runtime logs and static usage checks from the Element libraries and ESLint rules. These diagnostics help identify potential issues with component usage and implementation.
Duplicate Package Version
This warning appears when the application bundles or imports many versions of Elements or its dependencies within the same runtime. This can create unexpected compatibility issues and bug at runtime. To resolve, ensure dependencies are up to date and list their dependencies or peer dependencies if they internally depend on Elements.
Excessive Instance Limit
In development, this warning appears when more than 50 instances of the same nve-tooltip, nve-toggletip, nve-dropdown, nve-dialog, or nve-toast connect to the DOM. Each instance adds setup and lifecycle work. For example, a tooltip inside a repeated grid cell can create hundreds of popovers.
The count includes dynamically generated instances. The warning fires once when the count exceeds the limit and can fire again after the count returns within the limit. The default limit is an advisory budget.
The no-excessive-popover-instances ESLint rule complements the runtime warning by detecting excessive literal counts and popovers inside recognizable repeated templates.
To resolve this warning:
- Consider reusing existing elements instead of creating new ones
- Use virtualization or pagination of elements
- Data Grid Performance Documentation
- Dynamic Tree Documentation
Page Shell Count
Use one nve-page as the application shell. In development, a separate warning identifies when more than one page shell connects, including pages generated by JavaScript. The page shell ESLint rule checks templates with more than one shell and shells in detectable repetition. Independent templates and documentation examples have separate static counts.
Number and Byte Formatting
The number formatting options ESLint rule checks literal locales and fraction-digit options on nve-format-number and nve-format-bytes. It also checks integer digits, currency codes, unit identifiers, and required currency/unit options on nve-format-number. The existing attribute-value rule checks enum options.
The rule uses the lint environment's Intl.NumberFormat to validate numeric coercion and digit ordering. Dynamic bindings, encoded values, document language defaults, and JavaScript assignments remain outside static coverage.
Both components preserve the original input when formatting fails. They keep exception handling and fallback behavior without logging a runtime warning.
Date and Relative Time Formatting
The date formatting options ESLint rule checks literal locales on nve-format-datetime and nve-format-relative-time. It also checks literal time-zone values on nve-format-datetime using the lint environment's Intl.DateTimeFormat data. The rule accepts supported zone aliases and offsets. Empty time zones use the component's default, and preset date/time styles keep precedence over granular options. The existing attribute-value rule checks enum options.
Locale parsing follows the same shared check as number and byte formatting. Dynamic bindings, encoded values, document language defaults, and JavaScript assignments remain outside static coverage.
Both date components preserve the original input when formatting fails, with no runtime warning. Date validation, exception handling, and relative time updates continue to run.
Invalid Parent
The parent element ESLint rule checks supported direct parents for components. For example, nve-card-header requires nve-card as its direct parent.
Runtime development warnings remain for nve-menu-item, nve-tabs-item, nve-tabs-item-group, nve-steps-item, and nve-tree-node. These controls depend on their owners for selection, keyboard navigation, or accessibility semantics. The runtime check also covers controls created by JavaScript when static placement is unknown.
Card sections, popover headers and footers, drawer content, and page panels use static parent checks only. Their parent contracts describe layout and slot composition.
To resolve this diagnostic:
- Place the component directly under the correct parent element
- Review the component's API for parent element requirements
Invalid Slotted Children
The no-invalid-slotted-elements ESLint rule reports invalid direct children in a component's default slot. For example, nve-tree and nve-grid-row require specific direct children. Run ESLint to check these relationships during development.
To resolve this lint error:
- Check the component's documentation for allowed slotted elements
- Place only supported elements in slots
ID Match Not Found
This warning appears when a component tries to reference an element by ID that doesn't exist in the DOM. Example a popover with a button trigger.
To resolve this warning:
- Ensure the referenced element exists in the DOM
- Check that the ID uses the correct spelling
- Verify the element renders before the component references it
Cross Shadow Root Anchor
Native CSS Anchor Positioning allows two elements to tether together via a unique identifier. This is commonly used for popover-like elements. But CSS Anchor Positioning only supports positioning two elements in the same render root. Examples of rendering across render roots include in different Shadow DOM Roots or popover top layer instances. The CSSWG tracks this behavior/compatibility issue at https://github.com/w3c/csswg-drafts/issues/9408.
Element popover positioning detects instances of cross Shadow Root anchoring attempts and falls back to a JavaScript based positioning system. This allows the popover to anchor correctly but at the cost of render reliability and performance when compared to native CSS Anchor Positioning.
SSR Mismatch
This warning appears when there's a mismatch between server-side rendered content and client-side rendered content.
To resolve this warning:
- Ensure consistent rendering between server and client
- Check for conditional rendering that might differ between environments
- Verify that all required data is available during server-side rendering