salesforce/lwc

Inherited template not found when using TypeScript and Babel

Closed this issue · 3 comments

kdinluks commented

Description

As TypeScript is not fully supported by LWC and the LWC rollup plugin we need to use Babel to remove the TypeScript annotation before the LWC rollup plugin can process it. This works fine when we have discrete components that implement both the javascript class and the html template.
The problem only occurs when we have one LWC component extending another LWC component and inheriting the html template from the parent component. Rollup throws an error that the template file cannot be found. It tries to find the html template for the child component instead of trying to load the template from the parent component.
This issue only happens when using TypeScript.

On the playground repro below you will see the error message ENOENT: no such file or directory, open '/home/projects/salesforce-lwc-k2agyu/src/test/btnExtended/btnExtended.html'.

I have created a workaround rollup plugin with the hardcoded path for the correct template as in the code snippet below.
If you uncomment those lines in the rollup config on the playground below the error goes away and the example works.

Steps to Reproduce

https://stackblitz.com/edit/salesforce-lwc-k2agyu?file=rollup.config.mjs

    (() => ({
      name: "proxy-templates",
      resolveId: {
        order: "pre",
        handler(source) {
          if (source === "./btnExtended.html") {
            return path.resolve("src/test/button/button.html");
          }

          return null;
        }
      }
    }))()

Expected Results

No errors are thrown and the components work.

Actual Results

Rollup throws the error:

[!] Error: Could not load /home/projects/salesforce-lwc-k2agyu/src/test/btnExtended/btnExtended.html (imported by src/test/btnExtended/btnExtended.ts): ENOENT: no such file or directory, open '/home/projects/salesforce-lwc-k2agyu/src/test/btnExtended/btnExtended.html'

Browsers Affected

N/A

Version

  • Node 18.20.3
  • LWC: 6.6.3
  • rollup: 3.28.0
  • @rollup/plugin-babel: 6.0.4

Possible Solution

Additional context/Screenshots
Add any other context about the problem here. If applicable, add screenshots to help explain.

git2gus commented

This issue has been linked to a new work item: W-15941938

kdinluks commented

@wjhsf how do I know in which version this fix will be publish?

wjhsf commented

It will land in our next release, which will be either v6.6.7 or v6.7.0. I haven't checked what else we have slated for release, so I don't know if it will be a patch or minor version bump.

  • 👍1