Open miketests opened 1 year ago
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
.
@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!
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:
npm i @web/dev-server -D
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
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 resolved2) 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 failsWorkaround
No workaround found, unfortunately.
Is this a regression?
No or unsure. This never worked, or I haven't tried before.
Affected versions
lit@2.7.2
Browser/OS/Node environment
macOS: 10.15.7 Node: v16.14.2 npm: 8.5.0