Unable to use new directives lwc:if, lwc:elseif, lwc:else

[jefersonchaves]

Describe the bug Local development tool fails to load components using the new lwc:if, lwc:elseif, or lwc:else to Render DOM Elements Conditionally. Error: Invalid directive "$lwc:if" on element <template>..

To Reproduce Steps to reproduce the behavior:

1. Create a component simple as:

   <template>
   <template lwc:if={_isLoading}>Loading</template>
   <template lwc:else>
       Display data loaded
   </template> 
   </template>

2. Save.

Expected behavior The conditional display of elements as if it was deployed to Salesforce.

Screenshots

Desktop (please complete the following information):

• OS: macOS Ventura 13.2.1
• Browser: Chrome
• Version 111.0.5563.64 (Official Build) (arm64)

Additional context The browser is irrelevant.

[jsmithdev]

Updated sfdx and plugins but same issue. Hopefully we can start using new directives over if:true etc soon :crossed_fingers:

Error: LWRPLUGIN_ERROR: Invalid directive "$lwc:if" on element <template>.

Plug in version: @salesforce/lwc-dev-server 2.11.0

SFDX version: sfdx-cli/7.192.2 linux-x64 node-v18.14.1

[stale[bot]]

This issue has been automatically marked as type:bug-p3 because it has not had recent activity.

[RaviVaranasi]

Are there any plans on supporting this for local dev server development?

[stale[bot]]

This issue has been automatically marked as type:bug-p3 because it has not had recent activity.

[petter-eikeland]

It would be really good if this plugin could be maintained. It has great potential to dramatically increase Developer Productivity!