SSR compiler imports template from the wrong place

[lpomerleau]

Description

Steps to Reproduce

See lwc#2400 here.

In this PR, we are integrating the @lwc/ssr-compiler into LWR-Node for TD-0205202. We started passing TransformOptions.targetSSR = true into @lwc/compiler#transformSync.

1. Clone the lwr repo
2. Checkout the laura/ssr-code-type branch
3. yarn (install + build)
4. In packages/test-apps/lwr-ssr-app/lwr.config.json, set _isSsrCompilerEnabled to true (this is the "gate")
5. yarn ssr:start
6. Visit http://localhost:4000

Expected Results

The LWC modules are compiled for SSR with relative template imports.

The existing compiler gives output like this, with the template being a relative import to the .html file:

import { registerDecorators as _registerDecorators, LightningElement, registerComponent as _registerComponent } from "lwc";
import _tmpl from "./home.html";
class Home extends LightningElement { /* ... */ }

Actual Results

LWR cannot parse the specifier for the tmpl in the SSR compiled code:

[error][parse-package-name] "/Users/lpomerleau/git/lwr/packages/test-apps/lwr-ssr-app/src/modules/demo/home/home.ts" is not a valid string

The SSR compiler uses a fully qualified import URL for the template, and it's not pointing to the .html file:

import {fallbackTmpl as __fallbackTmpl, renderAttrs as __renderAttrs} from \'@lwc/ssr-runtime\';
import tmpl from "/Users/me/my-app/src/modules/x/x/home.ts";
import {LightningElement} from "@lwc/ssr-runtime";
export default class Home extends LightningElement { /* ... */ }

Side question: Is LightningElement supposed to be imported from @lwc/ssr-runtime when compiling for SSR?

Browsers Affected

Node.js

Version

Node project
package.json
"peerDependencies": { "@lwc/compiler": ">= 2.x" }
"devDependencies": { "@lwc/compiler": "8.1.2" }

• LWC: 8.1.2

Possible Solution

Can the tmpl be a relative import to the .html file for the component?

[git2gus]

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