No loader is configured for ".html" files

[jayzun]

Describe the bug

During dependency pre-bundling, if there is a dependency which imports html files, esbuild would report an error:

No loader is configured for ".html" files: xxx.html

Reproduction

https://stackblitz.com/edit/vitejs-vite-b7dx3h?file=vite.config.js,test.html,index.html,public%2Fmain.js&terminal=dev

System Info

System:
    OS: macOS 11.3.1
    CPU: (6) x64 Intel(R) Core(TM) i5-8500B CPU @ 3.00GHz
    Memory: 211.95 MB / 16.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 14.20.0 - ~/.nvm/versions/node/v14.20.0/bin/node
    npm: 6.14.17 - ~/.nvm/versions/node/v14.20.0/bin/npm
  Browsers:
    Chrome: 104.0.5112.101
    Edge: 92.0.902.84
    Firefox: 103.0.2
    Safari: 14.1
  npmPackages:
    @vitejs/plugin-legacy: ^2.0.0 => 2.0.0 
    vite: ^3.0.9 => 3.0.9

Used Package Manager

npm

Logs

No response

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Make sure this is a Vite issue and not a framework-specific issue. For example, if it's a Vue SFC related bug, it should likely be reported to vuejs/core instead.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
• The provided reproduction is a minimal reproducible example of the bug.

[jayzun]

anyone?👀

[jonaskuske]

I think this is working as intended – dependencies should be shipped as valid JS code and JS doesn't allow HTML imports. So this needs to be fixed on the side of the dependency by removing the HTML import or bundling it into valid JavaScript before shipping to npm.

Which dependency is causing this? (in the repro you're adding main.js to optimizeDeps, which is not necessary)

[jayzun]

I think this is working as intended – dependencies should be shipped as valid JS code and JS doesn't allow HTML imports. So this needs to be fixed on the side of the dependency by removing the HTML import or bundling it into valid JavaScript before shipping to npm.

Which dependency is causing this? (in the repro you're adding main.js to optimizeDeps, which is not necessary)

It's not an open source package, so it may not be standard enough. Since I couldn't import it in the repro, I used optimizeDeps to simulate this error.

[bluwy]

Yeah this is working as intended per @jonaskuske. Vite doesn't support importing HTML in dependency prebundling, adding the library to optimizeDeps.exclude might work if you have a plugin that handles importing HTML.