dotnet/aspnetcore · error · Error

Invalid number value '${attributeValue}' for parameter '${pa

Error message

Invalid number value '${attributeValue}' for parameter '${parameterName}'

What it means

Thrown by parseAttributeValue in the 'number' case when Number(attributeValue) returns NaN. Custom elements can only receive primitives via attributes; numeric parameters must be parseable by JavaScript's Number() constructor.

Source

Thrown at src/Components/CustomElements/src/js/BlazorCustomElements.ts:125

  static parseAttributeValue(attributeValue: string, type: JSComponentParameterType, parameterName: string): any {
    switch (type) {
      case 'string':
        return attributeValue;
      case 'boolean':
        switch (attributeValue) {
          case 'true':
          case 'True':
            return true;
          case 'false':
          case 'False':
            return false;
          default:
            throw new Error(`Invalid boolean value '${attributeValue}' for parameter '${parameterName}'`);
        }
      case 'number':
        const number = Number(attributeValue);
        if (Number.isNaN(number)) {
          throw new Error(`Invalid number value '${attributeValue}' for parameter '${parameterName}'`);
        } else {
          return number;
        }
      case 'boolean?':
        return attributeValue ? BlazorCustomElement.parseAttributeValue(attributeValue, 'boolean', parameterName) : null;
      case 'number?':
        return attributeValue ? BlazorCustomElement.parseAttributeValue(attributeValue, 'number', parameterName) : null;
      case 'object':
        throw new Error(`The parameter '${parameterName}' accepts a complex-typed object so it cannot be set using an attribute. Try setting it as a element property instead.`);
      default:
        throw new Error(`Unknown type '${type}' for parameter '${parameterName}'`);
    }
  }
}

function dasherize(value: string): string {
  return camelCase(value).replace(/([A-Z])/g, "-$1").toLowerCase();
}

View on GitHub (pinned to 294cab2f9b)

Solutions

  1. Ensure the attribute value is a valid numeric literal that Number() accepts (e.g. '42', '3.14', '-1').
  2. Declare the parameter as 'number?' if an empty/null representation is needed (empty string yields null, not a throw).
  3. Set the value as a JS property to bypass string parsing: element.count = 42;
  4. Sanitize/format the value in your templating/binding layer before emitting it as an attribute.

Example fix

// before
<my-grid page-size="1,000"></my-grid>

// after
<my-grid page-size="1000"></my-grid>
Defensive patterns

Strategy: validation

Validate before calling

function isValidNumberAttr(v: string): boolean {
  return v.trim() !== '' && !Number.isNaN(Number(v));
}

if (!isValidNumberAttr(raw)) {
  throw new Error(`Refusing to set non-numeric attribute: ${raw}`);
}
el.setAttribute('count', raw);

Type guard

function asNumberAttr(v: unknown): number | null {
  if (typeof v !== 'string' || v.trim() === '') return null;
  const n = Number(v);
  return Number.isNaN(n) ? null : n;
}

Try / catch

try {
  el.setAttribute('count', raw);
} catch (e) {
  if (/Invalid number value/.test((e as Error).message)) {
    el.count = Number(raw.replace(/[^0-9.\-]/g, '')) || 0; // fallback via property
  } else throw e;
}

Prevention

When it happens

Trigger: Setting a numeric [Parameter] via an HTML attribute with a non-numeric value: <my-component count="abc"/>, count="12px", count="1.2.3", or count="" (for a non-nullable number). The empty string for a non-nullable number parses to 0 normally, but values like '' actually pass Number('')===0; the failing cases are genuinely non-numeric like 'abc'.

Common situations: Templating engines interpolating a non-number variable, localized number formats with commas ('1,000'), units appended ('5px'), or passing a number-like object's toString() that is not a clean number.

Related errors


AI-assisted analysis of dotnet/aspnetcore@294cab2f9b (2026-08-06). Data as JSON: /api/errors/659c8301a10523a0. Report an issue: GitHub.