Partials only work on index.html

[jplukarski]

I basically have the same issue raised in this stack overflow, but the one response does not solve my issue -> https://stackoverflow.com/questions/74877312/vite-plugin-handlebars-not-working-with-multipage-set-up

I can only get partials to work in the index.html file at my project's root, which seems to make this plugin not very useful as only one single file in my project can receive partials. How can we use this plugin in order to use partials in both the index.html file at the root of the project and files in the public directory?

Here is my vite.config:

import { defineConfig } from 'vite'
import handlebars from 'vite-plugin-handlebars';
import { resolve } from 'path';

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [handlebars({
    partialDirectory: resolve(__dirname, 'public/partials')
  })],
})

Here is my project structure:

├── package.json
├── vite.config.js
├── index.html
└── public
    ├── about
        ├── about.html
    ├── contact
        ├── contact.html
    └── partials
        ├── header.hbs
        └── footer.hbs

Basically, {{> header }} works as expected on the index.html page, but shows up as raw text on the about.html page and the contact.html pages. Am I missing something obvious in my config?I built my project using the Vanilla JS scaffold right from the Vite docs.

[zgoda]

It will work on any entrypoint that's touched by Vite - to have that kind of setup you need to add these to Rollup's input (in vite.config.js) like

  build: {
    rollupOptions: {
      input: {
        main: resolve(__dirname, 'index.html'),
        about: resolve(__dirname, 'about/index.html'),
        privacy: resolve(__dirname, 'privacy/index.html'),
        contact: resolve(__dirname, 'contact/index.html'),
      },
    },
  },