LWC quick action not working

Question

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?

Answer 1

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>