quasarframework/quasar · warning

Please remove ${attachMarkup} from /index.html inside of <bo

Error message

Please remove ${attachMarkup} from /index.html inside of <body>

What it means

appFilesValidations detects the legacy Quasar v1 attach markup '<div id="q-app"></div>' hardcoded inside /index.html. In Quasar v2 with Vite, that div is injected automatically by the tooling (transformHtml), so keeping it in the template causes a duplicated mount node; the validation warns and marks the project invalid.

Source

Thrown at app-vite/lib/utils/app-files-validations.js:19

import fs from 'node:fs'

import { warn } from './logger.js'
import { attachMarkup, entryPointMarkup } from '../plugins/vite.html.js'

export function appFilesValidations(appPaths) {
  let valid = true

  const file = appPaths.resolve.app('index.html')

  if (!fs.existsSync(file)) {
    warn('The file /index.html is missing. Please add it back.\n')
    return false
  }

  const content = fs.readFileSync(file, 'utf8')

  if (content.includes(attachMarkup)) {
    warn(`Please remove ${attachMarkup} from
    /index.html inside of <body>\n`)
    valid = false
  }

  if (!content.includes(entryPointMarkup)) {
    warn(`Please add ${entryPointMarkup} to
    /index.html inside of <body>\n`)
    valid = false
  }

  return valid
}

View on GitHub (pinned to 4841521b5f)

Solutions

  1. Delete the <div id="q-app"></div> line from index.html inside <body>; Quasar injects it at build time.
  2. Keep only the <!-- quasar:entry-point --> comment in <body> as injection point.

Example fix

<!-- before -->
<body>
  <div id="q-app"></div>
  <!-- quasar:entry-point -->
</body>
<!-- after -->
<body>
  <!-- quasar:entry-point -->
</body>
Defensive patterns

Strategy: validation

Validate before calling

import { readFileSync } from 'node:fs'
if (readFileSync('index.html', 'utf8').includes('<div id="q-app"></div>')) {
  console.warn('Remove <div id="q-app"></div> from index.html; Quasar injects it')
}

Prevention

When it happens

Trigger: Running quasar dev/build when root index.html still contains <div id="q-app"></div> in <body>, typically after a v1 -> v2 migration; called from #computeConfig via appFilesValidations.

Common situations: Upgrading a Quasar CLI v1 project (src/index.template.html contained the div) by copying its body into the new root index.html.

Related errors


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