[SalesForce] LWC quick action not working

I am trying the new summer 21 feature: LWC from quick action. I am trying this on my developer edition, already updated to summer 21 version.

But with a very simple code, the modal is not opening and I get and error that I don't understand.

Html:

<template> 
   Test quick action
</template>

js:

import { LightningElement, api } from 'lwc';
 
export default class TestQuickAction extends LightningElement {

    @api recordId;

    connectedCallback() {
        console.log("recordId", this.recordId);
    }
}

xml:

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="urn:metadata.tooling.soap.sforce.com" fqn="testQuickAction">
  <apiVersion>52.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
        <target>lightning__RecordAction</target>
    </targets>
    <targetConfigs>
        <targetConfig targets="lightning__RecordAction">
            <actionType>Action</actionType>
        </targetConfig>
    </targetConfigs>
</LightningComponentBundle>

Console Error:

[LWC QUICK ACTION]s.invoke is not a function
handleClick @   executorLwcHeadless.js:1

Any Idea?

Best Answer

If you want to create the screen action then use action type as ScreenAction. Action can be used only for headless actions. For headless action, you need to define the @api invoke(){...} function in your component.

Just change the action type inside the target config from your component's meta XML.

<actionType>ScreenAction</actionType>
Related Topic