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

Cannot inject script if I add the type attr #117

Open
bpetii opened this issue May 2, 2023 · 1 comment
Open

Cannot inject script if I add the type attr #117

bpetii opened this issue May 2, 2023 · 1 comment

Comments

@bpetii
Copy link

bpetii commented May 2, 2023

I encountered with the vite-plugin-html plugin. I have been attempting to dynamically inject a script file into my HTML using this plugin, but I have found that when I include the type attribute in the script tag, the injection seems to be skipped.

Here are the steps to reproduce the issue:

  1. Install the vite-plugin-html plugin in your project

  2. Add a script file to your project with a type attribute, for example:
    <script type="module" src="./my-script.js"></script>

  3. Configure the vite-plugin-html plugin in your vite.config.js file to include this script file using the inject option:

import { defineConfig } from 'vite'
import html from 'vite-plugin-html'

export default defineConfig({
  plugins: [
    html({
      inject: {
        injectData: {
          title: 'My App',
          myScript: '<script type="module" src="./my-script.js"></script>'
        }
      }
    })
  ]
})

In your HTML file, include the <%- injectScript %> variable:


<!DOCTYPE html>
<html>
  <body>
   <%- injectScript %>
  </body>
</html>

Run the project with the vite build command and observe that the script file is not injected into the HTML.
I have found that when I remove the type attribute from the script tag in my script file, the injection works as expected. However, I need to include the type attribute in order to use ES modules.

Please let me know if there is a workaround for this issue, or if a fix can be included in a future release of the plugin.

Thank you for your attention to this matter.
@skymoonya
Copy link

In fact, the content of my-script.js has been built into the js asset. It was built by Vite. If this is not what you expect, use CDN import.

<script type="module" src="https://unpkg.com/[email protected]/source/index.js"></script>

by the way. It seems that vite-plugin-html is no longer being updated, and you can try vite-plugin-htmlx

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
@skymoonya @bpetii