Error when trying to remove a lightning component's <design:attribute>

Question

Scenario:

I have a lightning component for my Save and Submit buttons. I thought I will need to add a design attribute and made the following changes:

Design

<design:component>
    <design:attribute name="taxRate" label="Tax Rate in %"/>
    ....
</design:component>

Component

<aura:component controller="FormController" implements="flexipage:availableForAllPageTypes,force:appHostable" access="global">
    <aura:attribute name="taxRate" type="String" access="global"/>
    ....
</aura:component>

After applying these changes, I found another method that renders this attribute useless. In the process of reverting the aforementioned changes returns the following error:

Failed to save undefined: Cannot remove design attributes when the component implements a Lightning Page interface.: Source

Problem:

How do I remove a design:attribute and it's corresponding aura:attribute?

Attempted fixes:

I tried to follow the tips in this link: Tips and Considerations for Configuring Components for Lightning App Builder

Also tried removing the component from the lightning apps before trying again without success.

Answer 1

This is a bit tricky Exercise .In fact the error gives an idea on why this showing up .When you have implemented a lightning Interface of AllPageTypes which means you cannot get rid of design file attributes

Step 0 - you might have to delete Lightning Pages that make reference to the component. Otherwise Salesforce might show an error when you try to remove the interface (or fields).

Step 1 - Lets remove the Interface from your code first ,so try removing the implements attribute

     <aura:component controller="FormController" access="global">
     <aura:attribute name="taxRate" type="String" access="global"/>
     ....
          </aura:component>

Step 2 - Remove the Design attribute now .

Step 3 - Remove the Attribute once you have removed the designed reference

Step 4 - Add the implements and other code back .

Answer 2

I had this issue and the following worked for me:

1. Delete the design file

Answer 3

For the record, these are the specific steps I performed to solve the problem after following @Mohith answer:

1. Remove use of the involved Lightning Component from all Lightning Page using Lightning App Builder.

   • Note: Performing step 2 first can be helpful in identifying which Lightning Pages are using the Lightning Component
   • Alert: Take note of the involved Lightning Component's attribute values before removing from the Lightning Page. Unless these are the default values defined in the CMP file's <aura:attribute>, there's no way to restore this once Lightning App Builder is done saving.

2. CMP file - cut the implements="xxx" attribute, then Save.

3. DESIGN file - remove the <design:attribute>, then Save.
4. CMP file - remove the <aura:attribute>, restore the implements="xxx" attribute, then Save.
5. Restore Lightning Component back to all affected Lightning Apps and re-populate the attributes.

Answer 4

As for my case, all the answer didn't worked for me. Here is my workaround:

1. Open Developer Console -> then open *.design file.
2. From Menu: File -> Delete (CTRL + DELETE) to delete the file.
3. Create new design file with the same name in Visual Studio Code, then deploy.

You have to do these again if you want to remove attribute from design file