Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Inherited template not found when using TypeScript and Babel #4233

Closed
kdinluks opened this issue May 29, 2024 · 3 comments · Fixed by #4261
Closed

Inherited template not found when using TypeScript and Babel #4233

kdinluks opened this issue May 29, 2024 · 3 comments · Fixed by #4261
Labels
BUG P3 bug typescript Typescript related bugs

Comments

@kdinluks
Copy link

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.

@nolanlawson nolanlawson added bug typescript Typescript related bugs labels Jun 4, 2024
wjhsf added a commit that referenced this issue Jun 5, 2024
@wjhsf wjhsf added the BUG P3 label Jun 5, 2024
Copy link

git2gus bot commented Jun 5, 2024

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

wjhsf added a commit that referenced this issue Jun 10, 2024
…cript file @W-15941938 (#4261)

* fix(rollup-plugin): allow any implicit HTML import from any kind of script file

Fixes #4233

* refactor(rollup-plugin): use list of file extensions instead of regex

* feat(transformer): allow .mts and .mjs file extensions
@kdinluks
Copy link
Author

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

@wjhsf
Copy link
Contributor

wjhsf commented Jun 10, 2024

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
BUG P3 bug typescript Typescript related bugs
Projects
None yet
3 participants