vitejs / vite

Next generation frontend tooling. It's fast!
http://vite.dev
MIT License
68.09k stars 6.13k forks source link

Special comment in index.html causes incorrect injection #18386

Open puddleoasis opened 6 days ago

puddleoasis commented 6 days ago

Describe the bug

To keep it simple, my index.html has a commented version of the code preceeding the code. E.g.

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Housing Search App</title>
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="/src/index.jsx"></script>
  </body>
</html> -->

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Housing Search App</title>
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="/src/main.jsx"></script>
  </body>
</html>

I execute npm run build, and the module scripts I expect in dist/index.html are not present in the code for this file, but rather the scripts are injected into the comment. View dist/index.html for confirmation.

Reproduction

https://stackblitz.com/edit/vitejs-vite-fly8vq?file=index.html

Steps to reproduce

Run npm install, npm run build and npm run dev (this may be done automatically for you if you use stackblitz).

System Info

.

Used Package Manager

npm

Logs

I have seen varients depending on system. In the provided link I saw Error: createRoot(...): Target container is not a DOM element. On my local: Error: @vitejs/plugin-react can't detect preamble. Something is wrong. See https://github.com/vitejs/vite-plugin-react/pull/11#discussion_r430879201.

Validations

stackblitz[bot] commented 6 days ago

Fix this issue in StackBlitz Codeflow Start a new pull request in StackBlitz Codeflow.