Please support multiple entry points for library mode

[franktopel]

Clear and concise description of the problem

Clear and concise description of the problem

I'm using Vite.js to build a webcomponent library for a customer.

        lib: {
            entry: path.resolve(__dirname, 'src/webcomponents.js'),
            formats: ['es'],
            name: 'webcomponents',
        },

This does perfectly create the desired output:

vite v2.4.4 building for production...
✓ 32 modules transformed.
dist/webcomponents.es.js   36.46kb / brotli: 10.31kb
dist/webcomponents.es.js.map 101.33kb
dist/style.css                  117.61kb / brotli: 82.97kb

In the same project, we also build the application that uses this library, which basically comprises of web components as well, which serve as views. So I need a second entry point:

        lib: [{
            entry: path.resolve(__dirname, 'src/webcomponents.js'),
            formats: ['es'],
            name: 'webcomponents',
        },
        {
            entry: path.resolve(__dirname, 'src/views.js'),
            formats: ['es'],
            name: 'views',
        }],

Unfortunately, that results in an error:

vite v2.4.4 building for production...
error during build:
TypeError [ERR_INVALID_ARG_TYPE]: The "path" argument must be of type string. Received undefined
...

Suggested solution

Instead of a single entry point for libarary mode, allow an array of entry points.

Alternative

I've tried working around this limitation by using rollupOptions instead, but wasn"t able to figure it out:

rollupOptions: [
    {
        input: path.resolve(__dirname, 'src/webcomponents.js'),
        output: {
            file: path.resolve(__dirname, 'dist/webcomponents.js'),
            format: 'es'
        },
    }, {
        input: path.resolve(__dirname, 'src/views.js'),
        output: {
            file: path.resolve(__dirname, 'dist/views.js'),
            format: 'es'
        }
    }
],

Unfortunately, this does not create the files I expect:

dist/index.html                                3.03kb
dist/assets/index.1a413bf8.css                 6.54kb / brotli: 1.96kb
dist/assets/vendor.ef70301d.js                 11.19kb / brotli: 3.72kb
dist/assets/vendor.ef70301d.js.map             45.39kb
dist/assets/index.fa2e2112.js                  31.74kb / brotli: 7.88kb
dist/assets/index.fa2e2112.js.map              73.46kb

Additional context

I've read and upvoted #1736 and wanted to turn this into a feature request.

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that request the same feature to avoid creating a duplicate.

[kasvith]

I was looking for this :( thought its already there and seems we still far behind

[SteveDesmond-ca]

In vite v2, this is possible with rollupOptions.input pointing to an object like

{
  "file1.js":"path/to/file1.js",
  "file2.js":"path/to/file2.js"
}

Per #9086, this currently no longer works in vite v3.

[raulfdm]

I just want to point out that now, Vite respects rollupOptions.input (v3.1.3) (#9086), however, multiple entry points still don't work.

My attempt:

import { defineConfig } from "vite";

export default defineConfig({
  build: {
    emptyOutDir: false,
    outDir: "dist",
    sourcemap: true,
    lib: {
      // fileName,
      formats: ["cjs", "es"],
    },
    rollupOptions: {
      input: {
        "math.js": "./src/math.ts",
        "logger.js": "./src/logger.ts",
      },
    },
  },
});

Vite won't respect the given input alias (math.js and logger.js). Instead, because I haven't defined a fileName in the .lib option, it'll fallback to my folder name, producing files like this:

vite v3.1.3 building for production...
✓ 2 modules transformed.
dist/using-rollup-input.cjs    0.15 KiB / gzip: 0.14 KiB
dist/using-rollup-input.cjs.map 0.25 KiB
dist/using-rollup-input2.cjs   0.16 KiB / gzip: 0.16 KiB
dist/using-rollup-input2.cjs.map 0.31 KiB
dist/using-rollup-input.js    0.06 KiB / gzip: 0.08 KiB
dist/using-rollup-input.js.map 0.25 KiB
dist/using-rollup-input2.js   0.09 KiB / gzip: 0.09 KiB
dist/using-rollup-input2.js.map 0.32 KiB

---

Repro repository: https://github.com/raulfdm/vite-3-lib-multiple-entrypoints/tree/main/packages/using-rollup-input-vite-313

[abdelkrimdev]

Hi @raulfdm 😀
You have to tell Vite how to resolve the fileName as follow

export default defineConfig({
  build: {
    emptyOutDir: false,
    outDir: "dist",
    sourcemap: true,
    lib: {
      fileName: "[name]",,
      formats: ["cjs", "es"],
    },
    rollupOptions: {
      input: {
        "math": "./src/math.ts",
        "logger": "./src/logger.ts",
      },
    },
  },
});

I hope that was helpful, happy coding and have a good day 😊

[raulfdm]

hey @abdelkrimdev ... that works indeed.

Thank you so much for the clarification and for the time to help me out.