How to Resolve Quiz App Build Issues in Microsoft AI-For-Beginners

Delete node_modules and package-lock.json, reinstall dependencies with Node 14+, ensure BASE_URL is defined, then rebuild to fix most quiz app build failures.

The quiz application in Microsoft's AI-For-Beginners repository is a Vue 2 single-page app located in etc/quiz-app. Its build process relies on scripts defined in package.json and uses Vue CLI to compile source files in src/ into a production bundle. This guide explains how to diagnose and resolve common build failures based on the actual source code implementation.

Common Build Failure Categories

Build failures typically fall into five categories, each with distinct symptoms and solutions.

Dependency Version Mismatch

Symptoms: Errors like Cannot find module '@vue/cli-service' or Vue is undefined.

Root cause: The dependencies and devDependencies in etc/quiz-app/package.json specify Vue 2 (^2.6.11), Vue CLI (~5.0.8), and related plugins. If your local node_modules were installed with a different npm version or an outdated lock file, the resolver may pull incompatible releases.

Fix:

rm -rf node_modules package-lock.json
npm install
npm ls vue @vue/cli-service

Node Version Incompatibility

Symptoms: SyntaxError: Unexpected token or Cannot read property 'default' of undefined during build.

Root cause: Vue CLI 5 requires Node ≥ 14. Older Node versions cannot handle the transpilation step performed by Babel.

Fix:

nvm install 18
nvm use 18
node -v  # verify >= 14

Linting Failures Blocking Build

Symptoms: Build stops with messages like Unexpected console statement or Missing semicolon.

Root cause: The eslintConfig section in etc/quiz-app/package.json runs vue-cli-service lint automatically. Some CI pipelines treat lint errors as build failures.

Fix: Either fix the reported issues or bypass lint checking temporarily:

npm run build --no-verify

Missing Environment Variables

Symptoms: Cannot read property 'BASE_URL' of undefined.

Root cause: etc/quiz-app/src/router/index.js uses process.env.BASE_URL. Vue CLI expects this variable to be defined via a .env file or environment.

Fix: Create a minimal .env file in etc/quiz-app/:

BASE_URL=/

Corrupt Build Artifacts

Symptoms: npm run build succeeds but the dist/ bundle fails to load (404 or blank page).

Root cause: The output location is hard-coded to dist/ in etc/quiz-app/package.json. Stale files from previous builds may cause chunk reference errors.

Fix: Clean the output folder before rebuilding:

rm -rf dist && npm run build

Complete Build Resolution Workflow

Follow this sequence to resolve any build failure:

# 1. Clean all potentially corrupted files

cd etc/quiz-app
rm -rf node_modules package-lock.json dist

# 2. Install exact dependency tree

npm install

# 3. Verify Node version compatibility

node -v  # must be >= 14

# 4. Create environment file if missing

echo "BASE_URL=/" > .env

# 5. Check for lint errors (optional but recommended)

npm run lint

# 6. Build production bundle

npm run build

Key Files and Their Roles

Understanding these files helps diagnose failures faster:

File	Purpose
etc/quiz-app/package.json	Defines scripts (serve, build, lint), Vue 2 dependencies, Vue CLI ~5.0.8, and ESLint configuration
etc/quiz-app/babel.config.js	Babel preset used by Vue CLI for transpilation
etc/quiz-app/src/router/index.js	Router configuration consuming process.env.BASE_URL
etc/quiz-app/src/main.js	Application entry point mounting the Vue instance
etc/quiz-app/src/components/Quiz.vue	Core quiz component rendered per lesson
etc/quiz-app/dist/	Generated production bundle output directory

Summary

• Dependency mismatches are resolved by purging node_modules and lock files, then reinstalling.
• Node version errors require upgrading to Node 14 or later.
• Lint failures can be bypassed with --no-verify or fixed permanently.
• Missing BASE_URL requires a .env file defining the base path.
• Stale artifacts are cleared by deleting dist/ before rebuilding.

Frequently Asked Questions

What Node version does the AI-For-Beginners quiz app require?

The quiz app requires Node 14 or later because Vue CLI 5 depends on features unavailable in older versions. Use node -v to check your version, and nvm install 18 to upgrade if needed.

Why does my build fail with "Cannot find module '@vue/cli-service'"?

This indicates a dependency installation problem. Your node_modules directory may be corrupted or your package-lock.json may reference incompatible versions. Delete both and run npm install to regenerate a clean dependency tree matching the ranges in etc/quiz-app/package.json.

Where is the BASE_URL error coming from?

The error originates in etc/quiz-app/src/router/index.js, which references process.env.BASE_URL. Vue CLI injects this at build time from a .env file or environment variable. Create etc/quiz-app/.env with BASE_URL=/ to resolve it.

Can I skip linting during the build?

Yes. Run npm run build --no-verify to bypass pre-hooks including lint checks. However, fix lint errors permanently by running npm run lint and addressing reported issues, as this improves code quality and prevents CI failures.

{
  "mcpServers": {
    "instagit": {
      "command": "npx",
      "args": ["-y", "instagit@latest"]
    }
  }
}