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

Scripts surrounded by comments in markup get stripped during build #33

Open
oquas opened this issue Jun 15, 2023 · 1 comment
Open

Scripts surrounded by comments in markup get stripped during build #33

oquas opened this issue Jun 15, 2023 · 1 comment

Comments

@oquas
Copy link

oquas commented Jun 15, 2023

Hey there,

i just found a bug i want to communicate here.

Steps to reproduce:

Add a script surrounded by comments in the body of index.html in your Vue3 app

<html>
  <head>…</head>
  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.ts"></script>
    <!-- GA4 -->
    <!-- Google Tag Manager -->
    <script type="text/plain" cookie-consent="tracking">
      (function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
          new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
          j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
          'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
          })(window,document,'script','dataLayer','GTM-XXXXXXX');
    </script>
    <noscript
      ><iframe
        src="https://www.googletagmanager.com/ns.html?id=GTM-XXXXXXX"
        height="0"
        width="0"
        style="display: none; visibility: hidden"
      ></iframe
    ></noscript>
    <!-- End Google Tag Manager -->
    <!-- end of GA4-->
  </body>
</html>

Setup the plugin with its default configuration in vite.config.ts:

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import VitePluginHtmlEnv from 'vite-plugin-html-env'

export default defineConfig({
  …,
  plugins: [
    vue(),
    VitePluginHtmlEnv(),
  ],
})

Run a production build and look into dist/index.html.

Actual result:

The whole block beginning with <!-- GA4 --> and ending with <!-- end of GA4--> has been removed from the built index.html.

Expected result:

The whole block beginning with <!-- GA4 --> and ending with <!-- end of GA4--> should not be removed from the built index.html.
@oquas oquas changed the title Scripts surrounded by comments in markup get stripped during buidl Scripts surrounded by comments in markup get stripped during build Jun 15, 2023
@vdiaza
Copy link

vdiaza commented Dec 29, 2023

It happened to me too! Whatever is between comments it gets automatically stripped out and added to the main index.js.

It took me a long time to figure it out, but the easiest way to solve it is to remove the comments, just leave the script alone.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@oquas @vdiaza