Bundling Lit.js in Vite for production - RollupError: Could not resolve entry module "index.html"

Question

I have kickstarted the project in Vite using Lit & TypeScript template.

It has automatically created an HTML and css files.

My aim is to create an app.ts file that dynamically injcets Lit Custom components once downloaded (my project is a third party plugin that is being loaded via script tag from the CDN).

When delete the HTML file and I run the build script that is tsc && vite build I get the following error:

RollupError: Could not resolve entry module "index.html".

Why do I need the html file for Lit project? If it's optional how can I bundle so that I only get bundeled js?

I have deleted the HTML file expecting it would just simply not bundle it but I am getting an error.

Answer 1

Use the library mode of Vite and set the entry point to a js/ts file.

e.g.

import { resolve } from 'path'
import { defineConfig } from 'vite'

export default defineConfig({
  build: {
    lib: {
      // Could also be a dictionary or array of multiple entry points
      entry: resolve(__dirname, 'lib/index.js'),
      name: 'MyLib',
      // the proper extensions will be added
      fileName: 'my-lib',
    },
    rollupOptions: {
      // make sure to externalize deps that shouldn't be bundled
      // into your library
      external: ['lit'],
    },
  },
})

Keeping the HTML file may still be useful in previewing your components during development.