@lwc/rollup-plugin doesn't work with Vite

danjunger commented 2 days ago

Description

The LWC Rollup plugin seems to have a fundamental incompatibility with Vite's core set of plugins (which are not configurable). The issue stems from the fact that both the LWC Rollup plugin and Vite's build-html plugin attempt to transform LWC html files into javascript assets. It doesn't matter which plugin comes first in the chain, as either will break the other because both expect to receive valid html to transform (instead of the javascript that each plugin produces).

If Vite's build-html plugin comes first, it will also complain about LWC's html files lacking a doctype tag (ie <!DOCTYPE html>) as they typically only have a <template> tag along with their html snippets.

Steps to Reproduce

Example Vite configuration:

export default defineConfig({
    plugins: [
       lwc()
    ]
});

Expected Results

It would be nice if this "just worked" ™️.

Actual Results

Errors such as:

RollupError: src/modules/x/app/app.ts (1:9): "default" is not exported by "src/modules/x/app/app.html", imported by "src/modules/x/app/app.ts".

[CompilerError: [rollup-plugin-lwc-compiler] LWC1072: Missing root template tag file: /Users/djunger/code/electron-forge-vite/src/modules/x/app/app.html]

Browsers Affected

N/A

Version

All versions

Possible Solution

This may require a unique plugin distinct from the existing Rollup plugin, though it could also point to systemic integration issues with the LWC platform and its pseudo html templates.

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

cardoso commented 1 day ago

Hi @danjunger

I know it doesn't work out of the box with vite, but I've made it work in many different vite setups using configuration or wrapping the plugin, and even monkey-patching internal vite plugins. But I've been working with very complex setups.

The bare minimum change would be playing with:

plugins: [{
  enforce: 'pre',// or post
  ...lwc({ /* rootDir etc */ })
}]

But generally you'll run into other issues (or not) depending on your setup.

In your case vite is resolving and transforming the .html import before the lwc plugin has a chance to do it. When it gets to the lwc plugin it is not in the expected format.

Can you share a repository that mimics your setup?

I'm sure I can make it work for you and we can add instructions to this repo (or maybe suggest a vite-specific plugin).

Actually a great long-term solution would be a vite-specific plugin wrapping the rollup plugin, but that requires accounting for many different types of setups which the plugin can handle inside the config and configResolved hooks.

danjunger commented 1 day ago

Like I said, it doesn't matter the order because both plug-ins break each other. I can try to get a repo up later today.

danjunger commented 1 day ago

here's a pretty minimal repro repo. https://github.com/danjunger/vite-repro

clone that and then:

npm i
npm run make -> explodes with:

An unhandled rejection has occurred inside Forge:
RollupError: src/modules/demo/app/app.ts (1:9): "default" is not exported by "src/modules/demo/app/app.html", imported by "src/modules/demo/app/app.ts".
file: /Users/dan/code/vite-repro/src/modules/demo/app/app.ts:1:9

cardoso commented 1 day ago

@danjunger I'm not familiar with electron/forge etc, but I made it work under npm run start. https://github.com/danjunger/vite-repro/pull/1

I suppose you just need to replicate the solution in the other config files to get npm run make to work.

Yes, I know it's hacky, especially disabling the vite css processing, but it's the only way for now. Vite is opinionated on css processing so they need to provide a better way to hook into it (or lwc needs to conform to vite by using their query params ?inline ?raw which I don't think is reasonable)

danjunger commented 1 day ago

@cardoso thanks a lot for looking into this. Will give this a try.

cardoso commented 1 day ago

@danjunger my pleasure. Let me know how it goes and if you run into more issues. I'd love to know everything that can break using LWC with Vite. That would help build an eventual lwc vite plugin (official or not).

salesforce / lwc