search

lxs24sxl / vite-plugin-html-env

A vite plugin for rewriting html
82 stars 10 forks source link

Build error, vite 2.8.0 #4

Closed n-kort closed 2 years ago

n-kort commented 2 years ago

After upgrading some packages in a project I now get a build error:

[vite:build-html] Unable to parse HTML; URI malformed
 at "/projects/vite-html-env-test/index.html"

which I can recreate in a fresh vite project (with Vue). Seems to specifically be an issue with <link> tags, or with the href= in links.

Removing the <% VITE_ENV_VAR /> results in a clean build. Order of plugins in vite config doesn't seem to make a difference. Oddly the vite (dev) command works fine... and if the offending line of HTML is commented-out the placeholder is replaced.

lxs24sxl commented 2 years ago

Thank you for raising this issueI found that vite decodes the URI of the href content of the tag. so I made the following compatibility, you can update version 1.1.1 to fix this issue.

// vite.config.js
import VitePluginHtmlEnv from 'vite-plugin-html-env'

export default {
  plugins: [
    // Customizable prefixes and suffixes
    // The default prefix is <{ and the default suffix is }>.
    VitePluginHtmlEnv()
    // VitePluginHtmlEnv({
    //   prefix: '<{',
    //   suffix: '}>',
    //})
  ]
}
<link rel="stylesheet" href="//<{ VITE_APP_HOST }>/test.css" />
n-kort commented 2 years ago

thanks @lxs24sxl, that does seem to work now!