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

> Fix quiz app build issues in Microsoft AI-For-Beginners by deleting node_modules and package lock files reinstalling dependencies and setting BASE_URL before rebuilding. Resolve common build failures efficiently.

- Repository: [Microsoft/AI-For-Beginners](https://github.com/microsoft/AI-For-Beginners)
- Tags: how-to-guide
- Published: 2026-08-21

---

**Delete `node_modules` and [`package-lock.json`](https://github.com/microsoft/AI-For-Beginners/blob/main/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`](https://github.com/microsoft/AI-For-Beginners/blob/main/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`](https://github.com/microsoft/AI-For-Beginners/blob/main/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:**

```bash
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:**

```bash
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`](https://github.com/microsoft/AI-For-Beginners/blob/main/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:

```bash
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`](https://github.com/microsoft/AI-For-Beginners/blob/main/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/`:

```text
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`](https://github.com/microsoft/AI-For-Beginners/blob/main/etc/quiz-app/package.json). Stale files from previous builds may cause chunk reference errors.

**Fix:** Clean the output folder before rebuilding:

```bash
rm -rf dist && npm run build

```

## Complete Build Resolution Workflow

Follow this sequence to resolve any build failure:

```bash

# 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`](https://github.com/microsoft/AI-For-Beginners/blob/main/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`](https://github.com/microsoft/AI-For-Beginners/blob/main/etc/quiz-app/babel.config.js) | Babel preset used by Vue CLI for transpilation |
| [`etc/quiz-app/src/router/index.js`](https://github.com/microsoft/AI-For-Beginners/blob/main/etc/quiz-app/src/router/index.js) | Router configuration consuming `process.env.BASE_URL` |
| [`etc/quiz-app/src/main.js`](https://github.com/microsoft/AI-For-Beginners/blob/main/etc/quiz-app/src/main.js) | Application entry point mounting the Vue instance |
| [`etc/quiz-app/src/components/Quiz.vue`](https://github.com/microsoft/AI-For-Beginners/blob/main/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`](https://github.com/microsoft/AI-For-Beginners/blob/main/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`](https://github.com/microsoft/AI-For-Beginners/blob/main/etc/quiz-app/package.json).

### Where is the BASE_URL error coming from?

The error originates in [`etc/quiz-app/src/router/index.js`](https://github.com/microsoft/AI-For-Beginners/blob/main/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.