Rollup build pipeline is broken

[miketests]

Which package(s) are affected?

Other/unknown (please mention in description)

Description

I've created a fresh new Lit project with Vite but unable to set environment to build HTML bundle with Rollup.

I repeated exactly as written in Lit documentation.

According to Lit docs Rollup packages should be installed but there are few problems:

1. Installation of rollup-plugin-minify-html-literals package fails because dependency tree can't be resolved

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR! 
npm ERR! While resolving: [email protected]
npm ERR! Found: [email protected]
npm ERR! node_modules/rollup
npm ERR!   dev rollup@"^3.20.7" from the root project
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer rollup@"^0.65.2 || ^1.0.0 || ^2.0.0" from [email protected]
npm ERR! node_modules/rollup-plugin-minify-html-literals
npm ERR!   dev rollup-plugin-minify-html-literals@"*" from the root project
npm ERR! 
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR! 
npm ERR! See /Users/mike/.npm/eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/mike/.npm/_logs/2023-04-21T16_53_26_092Z-debug-0.log

2. If I skip HTML minification and drop out rollup-plugin-minify-html-literals package Rollup also fails to build the project

$ npx rollup -c

Result:

[!] SyntaxError: The requested module '@web/rollup-plugin-html' does not provide an export named 'default'

---

So that for now I can't move forward with my Lit project since there are some flaws with dependency tree and no alternative example provided in the docs.

Any working and comprehensive code sample how to build HTML bundle with Lit will be appreciated!

Reproduction

1. At first create a new Lit project with Vite npm create vite@latest
2. Try to install all these dependencies which shown in the official Lit docs
3. Rollup environment setup fails

Workaround

No workaround found, unfortunately.

Is this a regression?

No or unsure. This never worked, or I haven't tried before.

Affected versions

[email protected]

Browser/OS/Node environment

macOS: 10.15.7 Node: v16.14.2 npm: 8.5.0

[AndrewJakubowicz]

Hi! The issue you are encountering is due to vite depending on a conflicting version of rollup, that the rollup-plugin-minify-html-literals package doesn't support.

From a cursory look it appears that the lit.dev documentation may also be out of date for the example rollup config imports. Tthe following modified imports should work:

// Import rollup plugins
import {rollupPluginHTML} from '@web/rollup-plugin-html'; // <- changed
import {copy} from '@web/rollup-plugin-copy';
import resolve from '@rollup/plugin-node-resolve';
import terser from '@rollup/plugin-terser'; // <- changed
import summary from 'rollup-plugin-summary';

Also note that the documentation you are referencing is for a pure rollup configuration. Instead of using rollup.config.js and npx rollup -c, prefer to use vite since you're using that environment. I believe rollup configuration can be put in a vite build option. Then build for production with vite build.

[miketests]

@AndrewJakubowicz thank you for detailed response! Looks like there was something wrong with the version of Vite which didn't output only index.html while building the project, so I had to take advantage of Rollup build with Vite :) I've updated Vite and now it generates index.html with npm run build command. I noticed that there is no vite.config.ts file in Vite + Lit template anymore. For sure now I can use vite build options if needed. Thank you also for example and mentioning outdated docs!

[AndrewJakubowicz]

I've moved this issue to the documentation repository because the documentation is outdated.

On an empty npm project, this issue can be reproduced by:

1. First run: npm i @web/dev-server -D
2. Then run: npm i --save-dev rollup @web/rollup-plugin-html @web/rollup-plugin-copy @rollup/plugin-node-resolve @rollup/plugin-terser rollup-plugin-minify-html-literals rollup-plugin-summary.

Expect that it works. Instead get npm ERR! ERESOLVE could not resolve