What causes "Please check the source around " " for invalid usage." in quasarframework/quasar?

Open the app's index.html and inspect every occurrence; fix unbalanced or malformed tags.

Please check the source around "<%" and "%>" for invalid usa

Error message

Please check the source around "<%" and "%>" for invalid usage.

What it means

Quasar compiles index.html (and the dev SSR template) as an EJS-like template; when compilation throws, handleTemplateError reports 'HTML template compilation failed' and advises checking the source around '<%' and '%>' for invalid EJS usage. In non-fatal (dev SSR template) contexts it returns an error HTML page so the browser shows the problem.

Source

Thrown at app-vite/lib/plugins/vite.html.js:173

        <div style="display:flex;flex-direction:column;align-items:center;justify-content:center;border:1px solid #000;padding:20px;border-radius:4px;">
          <h1>HTML template compilation error</h1>
          <p>
            Please check the source around "&lt;%" and "%&gt;" for invalid usage.
          </p>
        </div>
    </body>
  </html>
`

function handleTemplateError(isProd) {
  if (isProd) {
    fatal(
      `HTML template compilation failed. Please check the source around "<%" and "%>" for invalid usage.`
    )
  }

  warn()
  warn(
    `Please check the source around "<%" and "%>" for invalid usage.`,
    'HTML template compilation failed'
  )
  warn()

  return templareErrorHtmlPage
}

async function transformHtml(template, htmlVariables, quasarConf) {
  let html = renderTemplate(template, htmlVariables, templateCompileOpts)
  if (html === templateRenderError) {
    return handleTemplateError(quasarConf.ctx.prod)
  }

  const isNonSSR = !quasarConf.ctx.mode.ssr && !quasarConf.ctx.mode.ssg

  html = html.replace(
    entryPointMarkup,

View on GitHub (pinned to 4841521b5f)

Solutions

Open the app's index.html and inspect every <% and %> occurrence; fix unbalanced or malformed tags.
Simplify suspect interpolations (<%= ... %>) to static text to isolate the broken one.
Verify any referenced variables exist in the template scope (e.g. ctx, process.env) and guard with typeof if unsure.
Restore index.html from the Quasar template and reapply customizations carefully.

Example fix

<!-- before -->
<div><%= config.brandName %></div>
<!-- after -->
<div><%= ctx.productName %></div>

Defensive patterns

Strategy: validation

Validate before calling

// Pre-check template tags are balanced before build:
const html = fs.readFileSync('index.html', 'utf8')
const opens = (html.match(/<%/g) || []).length
const closes = (html.match(/%>/g) || []).length
if (opens !== closes) throw new Error('Unbalanced EJS tags in index.html')

Prevention

After editing index.html, count <%/ %> occurrences for balance.
Keep interpolations simple; prefer variables provided by Quasar over inline logic.
Test the template with `quasar build` before committing template edits.
Keep index.html under version control to diff-verify template changes.

When it happens

Trigger: An invalid template expression in index.html: unterminated or malformed <% %>, a runtime ReferenceError inside <%= %> interpolation, or invalid JavaScript inside a scriptlet, during transformHtml (build/dev index.html) or getDevSsrTemplateFn (SSR dev template).

Common situations: Hand-editing index.html and typos in a <% code %>/<%= interpolation %> tag; injecting app config interpolation with wrong syntax; copying EJS snippets with stray '<%' or '%>'; using an undefined variable in the template scope.

Related errors

AI-assisted analysis of quasarframework/quasar@4841521b5f (2026-08-30). Data as JSON: /api/errors/53ae4dcc87651626. Report an issue: GitHub.