[vite-plugin-html] Dev server fails to start when EJS is used in index.html

[yurique]

• Read the docs.
• Make sure this is a Vite issue and not a framework-specific issue. For example, if it's a Vue SFC related bug, it should likely be reported to https://github.com/vuejs/vue-next instead.
• This is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.

Describe the bug

When using vite-plugin-html and injecting vars into the html using the following in vite.config.js:

  const mainJS = `/main.js`
// ...
    plugins: [
      injectHtml({
        injectData: {
          mainJS
        }
      })
    ]

and using it in index.html like this:

    <script type="module" src="<%= mainJS %>"></script>

the dev server fails to start with this message:

Unterminated string literal

A workaround for this is to remove the EJS snippet (the line containing "<%= mainJS %>) from the index.html, start the dev server, and put that line back into index.html after the dev server has started.

This way the dev server works fine, and seems to be starting without the above error afterwards.

Reproduction

https://github.com/yurique/vite-html-plugin-bug

git clone git@github.com:yurique/vite-html-plugin-bug.git
cd vite-html-plugin-bug
yarn
yarn dev

System Info

• vite version: 2.0.5
• Operating System: osx 10.15.7
• Node version: 14.15.4
• Package manager (npm/yarn/pnpm) and version: yarn 2.4.1

Logs (Optional if provided reproduction)

  vite:config bundled config file loaded in 178ms +0ms
  vite:config using resolved config: {
  vite:config   plugins: [
  vite:config     'vite:pre-alias',
  vite:config     'alias',
  vite:config     'vite:dynamic-import-polyfill',
  vite:config     'vite:resolve',
  vite:config     'vite:html',
  vite:config     'vite:css',
  vite:config     'vite:esbuild',
  vite:config     'vite:json',
  vite:config     'vite:wasm',
  vite:config     'vite:worker',
  vite:config     'vite:asset',
  vite:config     'vite:injectHtml',
  vite:config     'vite:define',
  vite:config     'vite:css-post',
  vite:config     'vite:client-inject',
  vite:config     'vite:import-analysis'
  vite:config   ],
  vite:config   server: {},
  vite:config   configFile: '/Users/yurique/git/GitHub/yurique/vite-html-plugin-bug/vite-html-plugin-bug/vite.config.js',
  vite:config   inlineConfig: {
  vite:config     root: undefined,
  vite:config     base: undefined,
  vite:config     mode: undefined,
  vite:config     configFile: undefined,
  vite:config     logLevel: undefined,
  vite:config     clearScreen: undefined,
  vite:config     server: {}
  vite:config   },
  vite:config   root: '/Users/yurique/git/GitHub/yurique/vite-html-plugin-bug/vite-html-plugin-bug',
  vite:config   base: '/',
  vite:config   resolve: { dedupe: undefined, alias: [ [Object] ] },
  vite:config   publicDir: '/Users/yurique/git/GitHub/yurique/vite-html-plugin-bug/vite-html-plugin-bug/public',
  vite:config   command: 'serve',
  vite:config   mode: 'development',
  vite:config   isProduction: false,
  vite:config   optimizeCacheDir: '/Users/yurique/git/GitHub/yurique/vite-html-plugin-bug/vite-html-plugin-bug/node_modules/.vite',
  vite:config   build: {
  vite:config     target: [ 'es2019', 'edge16', 'firefox60', 'chrome61', 'safari11' ],
  vite:config     polyfillDynamicImport: true,
  vite:config     outDir: 'dist',
  vite:config     assetsDir: 'assets',
  vite:config     assetsInlineLimit: 4096,
  vite:config     cssCodeSplit: true,
  vite:config     sourcemap: false,
  vite:config     rollupOptions: {},
  vite:config     commonjsOptions: { include: [Array], extensions: [Array] },
  vite:config     minify: 'terser',
  vite:config     terserOptions: {},
  vite:config     cleanCssOptions: {},
  vite:config     write: true,
  vite:config     emptyOutDir: null,
  vite:config     manifest: false,
  vite:config     lib: false,
  vite:config     ssr: false,
  vite:config     ssrManifest: false,
  vite:config     brotliSize: true,
  vite:config     chunkSizeWarningLimit: 500
  vite:config   },
  vite:config   env: { BASE_URL: '/', MODE: 'development', DEV: true, PROD: false },
  vite:config   assetsInclude: [Function: assetsInclude],
  vite:config   logger: {
  vite:config     hasWarned: false,
  vite:config     info: [Function: info],
  vite:config     warn: [Function: warn],
  vite:config     error: [Function: error],
  vite:config     clearScreen: [Function: clearScreen]
  vite:config   },
  vite:config   createResolver: [Function: createResolver]
  vite:config } +3ms
  vite:deps Crawling dependencies using entries:
  vite:deps   /Users/yurique/git/GitHub/yurique/vite-html-plugin-bug/vite-html-plugin-bug/index.html +0ms
 > html:/Users/yurique/git/GitHub/yurique/vite-html-plugin-bug/vite-html-plugin-bug/index.html:1:2: error: Unterminated string literal
    1 │ ">
      ╵   ^

error when starting dev server:
Error: Build failed with 1 error:
html:/Users/yurique/git/GitHub/yurique/vite-html-plugin-bug/vite-html-plugin-bug/index.html:1:2: error: Unterminated string literal
    at failureErrorWithLog (/Users/yurique/git/GitHub/yurique/vite-html-plugin-bug/vite-html-plugin-bug/.yarn/unplugged/esbuild-npm-0.8.57-7fe43e451a/node_modules/esbuild/lib/main.js:1160:15)
    at buildResponseToResult (/Users/yurique/git/GitHub/yurique/vite-html-plugin-bug/vite-html-plugin-bug/.yarn/unplugged/esbuild-npm-0.8.57-7fe43e451a/node_modules/esbuild/lib/main.js:896:32)
    at /Users/yurique/git/GitHub/yurique/vite-html-plugin-bug/vite-html-plugin-bug/.yarn/unplugged/esbuild-npm-0.8.57-7fe43e451a/node_modules/esbuild/lib/main.js:991:20
    at /Users/yurique/git/GitHub/yurique/vite-html-plugin-bug/vite-html-plugin-bug/.yarn/unplugged/esbuild-npm-0.8.57-7fe43e451a/node_modules/esbuild/lib/main.js:542:9
    at handleIncomingPacket (/Users/yurique/git/GitHub/yurique/vite-html-plugin-bug/vite-html-plugin-bug/.yarn/unplugged/esbuild-npm-0.8.57-7fe43e451a/node_modules/esbuild/lib/main.js:631:9)
    at Socket.readFromStdout (/Users/yurique/git/GitHub/yurique/vite-html-plugin-bug/vite-html-plugin-bug/.yarn/unplugged/esbuild-npm-0.8.57-7fe43e451a/node_modules/esbuild/lib/main.js:509:7)
    at Socket.emit (events.js:315:20)
    at addChunk (internal/streams/readable.js:309:12)
    at readableAddChunk (internal/streams/readable.js:284:9)
    at Socket.Readable.push (internal/streams/readable.js:223:10)

[yyx990803]

vite-plugin-html is not an official plugin. Please report issues to its repo instead.