Compilation fails when using @Styles to decorate properties with the same name in a single HAP

#harmonyos #arkui #stylesdecorator #happackagebuild

Read the original article：Compilation fails when using @Styles to decorate properties with the same name in a single HAP

Requirement Description

In the project, multiple .ets files define reusable component styles with the same name. For example, both ExampleFirst.ets and ExampleSecond.ets define a style named itemStyle.
During compilation and build, the system reports the following error:

ERROR: ArkTS Compiler Error
Error Message: Duplicate function implementation.

This occurs because the compiler detects duplicate function definitions within the same HAP package.

Background Knowledge

The @Styles decorator allows multiple style settings to be extracted into a single reusable function.
This decorator can be applied globally or within a component to quickly define and reuse custom styles.

However, if multiple @Styles functions with the same name are defined within one HAP package, the IDE merges all .ets files during compilation.
As a result, functions with identical names conflict, leading to a “Duplicate function implementation” error.

Implementation Steps

Search globally in your project for all functions decorated with @Styles.
Identify any duplicate style names defined across different .ets files.
Rename the duplicate @Styles functions so that each has a unique name.
Rebuild the project after renaming.
Confirm that the build completes successfully without compilation errors.

Code Snippet / Configuration

Before (compilation error):

// ExampleFirst.ets
@Entry
@Component
struct ExampleFirst {
  build() {
    Row() {
    }
    .itemStyle()
  }
}

@Styles
function itemStyle() {
  .width('60%')
  .height(42)
  .backgroundColor(Color.Blue)
  .borderRadius(24)
  .margin({ top: 12 })
}

// ExampleSecond.ets
@Styles
function itemStyle() {
  .width('100%')
  .height(56)
  .padding({
    top: 17,
    bottom: 17,
    left: 12,
    right: 12
  })
  .backgroundColor(Color.Black)
  .borderRadius(24)
  .margin({ top: 12 })
}

@Entry
@Component
struct ExampleSecond {
  build() {
    Row() {
    }
  }
}

After (renamed and compiled successfully):

// ExampleFirst.ets
@Styles
function itemStyleBlue() {
  .width('60%')
  .height(42)
  .backgroundColor(Color.Blue)
  .borderRadius(24)
  .margin({ top: 12 })
}

// ExampleSecond.ets
@Styles
function itemStyleBlack() {
  .width('100%')
  .height(56)
  .padding({
    top: 17,
    bottom: 17,
    left: 12,
    right: 12
  })
  .backgroundColor(Color.Black)
  .borderRadius(24)
  .margin({ top: 12 })
}

Test Results

When multiple files define @Styles functions with the same name → Compilation fails.
After renaming to unique style names → Compilation succeeds.

Limitations or Considerations

The issue occurs because all .ets files in a HAP package are merged during compilation.
Function name conflicts in global or component-level @Styles definitions trigger errors.
Naming conventions or unique prefixes for style functions are recommended for large projects.

DEV Community