# LWC1102

Represents an error for a decorator not properly imported from the lwc module.

Severity: Error

# Message

Invalid '{0}' decorator usage. Supported decorators ({1}) should be imported from "{2}"

The error message includes three placeholders:

• {0} - The decorator name used
• {1} - The list of supported decorators
• {2} - The required import source

Example diagnostic messages:

LWC1102: Invalid 'api' decorator usage. Supported decorators (api, wire, track) should be imported from "lwc"

# Problem

LWC1102 occurs when a decorator is used on a class member but is not properly imported from the lwc module. LWC only supports three decorators — @api, @wire, and @track — and all must be explicitly imported from "lwc". This error is also thrown when an unsupported decorator is used on a class member.

# Examples

LWC1102 is thrown when a decorator is not imported from the lwc module, or when an unsupported decorator is used on a class member.

# 1. Missing Decorator Import

The @api, @track, and @wire decorators must be explicitly imported from "lwc". Using one of these decorators without importing it causes this error, even if the name exists in the global scope or is defined locally.

# Examples with Errors

@api used without importing it:

import { LightningElement } from "lwc";

export default class Test extends LightningElement {
  @api title = "hello";
}

Error Message: LWC1102: Invalid 'api' decorator usage. Supported decorators (api, wire, track) should be imported from "lwc"

@track used without importing it:

import { LightningElement } from "lwc";

export default class Test extends LightningElement {
  @track title = "hello";
}

Error Message: LWC1102: Invalid 'track' decorator usage. Supported decorators (api, wire, track) should be imported from "lwc"

@wire used without importing it:

import { LightningElement } from "lwc";
import { getTodo } from "todo";

export default class Test extends LightningElement {
  @wire(getTodo, {})
  todoData;
}

Error Message: LWC1102: Invalid 'wire' decorator usage. Supported decorators (api, wire, track) should be imported from "lwc"

# Error Resolution Examples

Add the missing decorator to the import statement:

import { LightningElement, api } from "lwc";

export default class Test extends LightningElement {
  @api title = "hello";
}

import { LightningElement, track } from "lwc";

export default class Test extends LightningElement {
  @track title = "hello";
}

import { LightningElement, wire } from "lwc";
import { getTodo } from "todo";

export default class Test extends LightningElement {
  @wire(getTodo, {})
  todoData;
}

# 2. Decorator Shadowed by a Local Definition

Defining a local function or variable with the same name as an LWC decorator (api, track, or wire) shadows the intended import. The decorator must be imported from "lwc", not defined locally.

# Examples with Errors

Local function named api used as a decorator:

import { LightningElement } from "lwc";

function api(target) {}

export default class Test extends LightningElement {
  @api
  label = "hello";
}

Error Message: LWC1102: Invalid 'api' decorator usage. Supported decorators (api, wire, track) should be imported from "lwc"

# Error Resolution Examples

Remove the local definition and import the decorator from "lwc":

import { LightningElement, api } from "lwc";

export default class Test extends LightningElement {
  @api
  label = "hello";
}

# 3. Unsupported Decorator

LWC only supports @api, @wire, and @track. Any other decorator — whether defined locally, imported from a third-party library, or from another framework — is not supported.

# Examples with Errors

Custom decorator on a class property:

import { LightningElement } from "lwc";

function readonly(target) {}

export default class Test extends LightningElement {
  @readonly
  label = "hello";
}

Error Message: LWC1102: Invalid 'readonly' decorator usage. Supported decorators (api, wire, track) should be imported from "lwc"

# Error Resolution Examples

Remove the unsupported decorator:

import { LightningElement } from "lwc";

export default class Test extends LightningElement {
  label = "hello";
}

# Suggested Fix Steps

# Step 1: Identify the Decorator in the Error Message

The error message names the decorator that caused the issue (e.g., 'api', 'track', 'readonly'). Locate that decorator in your component code.

# Step 2: Apply the Fix

• Missing import: add the decorator to your import statement from "lwc" (e.g., import { LightningElement, api } from "lwc")
• Local definition shadowing an LWC decorator: remove the local function or variable and import the decorator from "lwc" instead
• Unsupported decorator: remove it and use one of the supported LWC decorators (@api, @track, or @wire) if applicable, or remove the decorator entirely

For specific code examples, see the Error Resolution Examples in the Examples section.

# Step 3: Verify the Fix

1. Re-compile your component
2. Ensure LWC1102 no longer appears
3. Test your component to verify it behaves as expected