[problem] Injection not working when vite config has root attribute

[BrainCrumbz]

Hi there and thanks for this plugin.

Just for some context: our page templates are normally served and data-injected by an express.js app. We started to use this plugin so that page templates could also be tested locally in dev environment with a fast turnaround. Instead of actually going through the server, they are served and hot-reloaded by vitejs dev server, and instead of DB data, there are some dummy data injected by this plugin.

In order to have a repro project, we cloned your MPA playground project and made some changes to show the issue. The main changes are to move both HTML files from root folder to src subfolder and then specify root: 'src', in vite.config.ts.

Here's the actual issue description:

Steps to reproduce

1. Open stackblitz repro project at https://stackblitz.com/edit/vitejs-vite-m4vdfj with Google Chrome or some other browser fully supporting WebContainer (e.g. Firefox would give you errors)
2. Wait until stackblitz installs and runs the app

What should happen

• Page shows its contents, (e.g. hello world from ..., and so on)

What actually happens

• Page shows a title is not defined error. It seems like injection is not working correctly

Versions

• vite-plugin-html: ^3.2.0
• vite: ^2.8.6

[BrainCrumbz]

Also, if it can help: at least in our project, the issue does not show up when we stick to versions:

• vite-plugin-html: ^3.0.3
• vite: ^2.7.2

that is: we actually have HTML files in src subfolder, we have root attribute set in vite.config.js, and yet injection works

[ghetolay]

Seems like htmlName on transform should take root into account because then it never matches any page's template.

Go from

const htmlName = path__default.relative(process.cwd(), excludeBaseUrl);

to something like

const cwd = viteConfig.root ?? process.cwd();
const htmlName = path__default.relative(cwd, excludeBaseUrl);