# LWC1107

Represents an error for a property name that starts with the "data" prefix.

Severity: Error

# Message

Invalid property name "{0}". Properties starting with "data" are reserved attributes.

The error message format includes one placeholder: {0} is the property name that starts with "data".

Example diagnostic message:

LWC1107: Invalid property name "dataFooBar". Properties starting with "data" are reserved attributes.

# Problem

LWC1107 occurs when you declare a public property (decorated with @api) with a name that starts with "data" and has more than 4 characters. Property names starting with "data" are reserved for HTML data-* attributes and can't be used as public property names in LWC.

# Examples

LWC1107 occurs when you declare a public property (using the @api decorator) with a name that starts with "data" and has more than 4 characters.

# 1. Public Properties Starting with "data"

Properties decorated with @api can't have names starting with "data" (except for the exact name "data"). This restriction exists because:

• HTML uses data-* attributes for custom data attributes, such as data-id, data-value, data-config
• Public properties in LWC components become attributes on the component when used in templates
• Property names starting with "data" conflict with HTML's data attribute naming convention
• The LWC compiler reserves this namespace to maintain compatibility with HTML standards

# Example with Error

Public property named "dataFooBar":

import { api, LightningElement } from 'lwc';

export default class Test extends LightningElement {
  @api dataFooBar;
}

Error Message: LWC1107: Invalid property name "dataFooBar". Properties starting with "data" are reserved attributes.

# 2. Public Getters and Setters Starting with "data"

The same restriction applies to getters and setters decorated with @api, whether you define:

• A standalone getter
• A standalone setter
• A getter/setter pair

# Example with Error

Public getter/setter pair named "dataInfo":

import { api, LightningElement } from 'lwc';

export default class MyComponent extends LightningElement {
  _dataInfo;
  
  @api
  get dataInfo() {
    return this._dataInfo;
  }
  
  set dataInfo(value) {
    this._dataInfo = value;
  }
}

Error Message: LWC1107: Invalid property name "dataInfo". Properties starting with "data" are reserved attributes.

# Error Resolution Examples

Here are several ways to fix LWC1107.

Rename properties to avoid "data" prefix:

import { api, LightningElement } from 'lwc';

export default class MyComponent extends LightningElement {
  @api recordId;
  @api value;
  @api attributes;
  @api configInfo;
}

Rename getters/setters to avoid "data" prefix:

import { api, LightningElement } from 'lwc';

export default class MyComponent extends LightningElement {
  @api
  get configValue() {
    return this._configValue;
  }
  
  set configValue(value) {
    this._configValue = value;
  }
}

# LWC1107 Suggested Fix Steps

Consider these suggestions to fix LWC1107 errors.

# Step 1: Identify the Invalid Property Name

1. Read the error message to identify which property name is causing the issue
2. Locate the property declaration in your component class
3. Understand what the property represents in your component

# Step 2: Choose a Better Property Name

Select a new property name that clearly describes its purpose without the "data" prefix. Consider these common replacements for property names that use the "data" prefix.

Alternatively, consider these patterns:

• Move "data" to the end: replace dataRecord with recordData
• Use more specific names: replace dataUser with userInfo, and replace userData with user
• Use domain-specific terminology: replace dataAccount with account or accountInfo

# Step 3: Update Your Component

1. Rename the property in your component class
2. Update all references to the property in your component's JavaScript code
3. Update any template references if the property is used in the HTML template
4. Update any documentation or comments that reference the old property name

# Step 4: Verify the Fix

1. Re-run the LWC compilation
2. Make sure that LWC1107 no longer appears
3. Test your component functionality to make sure that the renamed property works correctly
4. If the property is used by parent components, update those as well