LWC1188: Invalid dynamic components usage, lwc:component and lwc:is can only be used when dynamic components have been enabled.

[lukethacoder]

Description

Compiler error is thrown even when experimentalDynamicDirective and enableDynamicComponents are set to true in the lwr.config.json file.

CompilerError: LWC1188: Invalid dynamic components usage, lwc:component and lwc:is can only be used when dynamic components have been enabled.

Steps to Reproduce

lwr.config.json

{
  "lwc": {
    "experimentalDynamicDirective": true,
    "enableDynamicComponents": true,
    "modules": [
      { "dir": "$rootDir/src/modules" },
      { "npm": "lightning-base-components" }
    ]
  },
  "routes": [
    {
      "id": "example",
      "path": "/",
      "rootComponent": "example/app"
    }
  ],
  "moduleProviders": [
    "@lwrjs/label-module-provider",
    "@lwrjs/app-service/moduleProvider",
    "@lwrjs/lwc-module-provider",
    "@lwrjs/npm-module-provider"
  ]
}

app.html

<template>
    <main> 
        <h1>dynamic LWC</h1>
        <button onclick={handleClick}>click for dynamic LWC</button>
        <template if:true={dynamicCtor}>
            <lwc:component lwc:is={dynamicCtor}></lwc:component>
        </template>
    </main>
</template>

app.js

import { LightningElement } from 'lwc';

export default class HelloWorldApp extends LightningElement {
  dynamicCtor;

  handleClick = async () => {
    const specifier = 'example/child';
    const module = await import(specifier);

    if (!module.default) {
      throw new Error();
    }

    this.dynamicCtor = module.default;
  };
}

Expected Results

No error is thrown an able to use lwc:component and lwc:is instead of the older lwc:dynamic={dynamicCtor} syntax

Actual Results

Version

• lwc: 2.40.1
• lwr: 0.8.15
• @lwrjs/app-service: 0.8.15
• @lwrjs/label-module-provider: 0.8.15
• @lwrjs/lwc-module-provider: 0.8.15
• @lwrjs/npm-module-provider: 0.8.15
• lightning-base-components: 1.17.3-alpha

Possible Solution

Are compiler config values not promoted to the @lwc/template-compiler?

[ravijayaramappa]

@jmsjtu

[jmsjtu]

@lukethacoder I don't think you can set LWC compiler options using lwr.config.json. I'll check with the LWR team to see if there is a way to set the options but I don't think they allow you to configure it.

Also the new dynamic components feature is scheduled to be GA in Winter24, at which point you should be able to use it without any additional configuration.

If you want to test out the feature in the meantime, you can use the LWC OSS compiler directly.

[lukethacoder]

@jmsjtu no problem if it's not supported. Was poking around in this repo looking at the config for the @lwc/* packages and thought it might/should work.

Happy to close this if it is not meant to be exposed to the lwr.config.json

[jmsjtu]

@lukethacoder looks like compiler options are not supported in lwr.config.json.

[lukethacoder]

all good. happy to close this. Keen for Winter24 to use the new dynamic components in LWR.