Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Special comment in index.html causes incorrect injection #18386

Open
7 tasks done
puddleoasis opened this issue Oct 17, 2024 · 1 comment
Open
7 tasks done

Special comment in index.html causes incorrect injection #18386

puddleoasis opened this issue Oct 17, 2024 · 1 comment
Labels
feat: html p2-edge-case Bug, but has workaround or limited in scope (priority)

Comments

@puddleoasis
Copy link

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 StackBlitz
Copy link

stackblitz bot commented Oct 17, 2024

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

@sapphi-red sapphi-red added feat: html p2-edge-case Bug, but has workaround or limited in scope (priority) labels Oct 18, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
feat: html p2-edge-case Bug, but has workaround or limited in scope (priority)
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@puddleoasis @sapphi-red