vitebundlelit-elementlit

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


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.


Solution

  • 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.