Skip to content

fix(frontend): migrate CRA→Vite (resolves ajv build failure) + fix scrub-corrupted identifier - #38

Open
OneByJorah wants to merge 1 commit into
mainfrom
fix/vite-migration
Open

fix(frontend): migrate CRA→Vite (resolves ajv build failure) + fix scrub-corrupted identifier#38
OneByJorah wants to merge 1 commit into
mainfrom
fix/vite-migration

Conversation

@OneByJorah

Copy link
Copy Markdown
Owner

Problem

The frontend failed docker compose build under Create React App (react-scripts 5.0.1) with Error: Unknown keyword formatMinimum — a deep schema-utils→ajv-keywords vs nested ajv version conflict. This is not fixable by dependency overrides (8 combinations attempted: ajv 8.11.0/8.17.1, ajv-formats, ajv-keywords, schema-utils pins, committed lockfiles, node:18 base — all failed). react-scripts is already at its max (5.0.1; CRA is deprecated).

Fix

Migrated the build tooling from CRA to Vite 5:

  • package.json: react-scripts → vite + @vitejs/plugin-react; scripts updated.
  • vite.config.js: React plugin, esbuild JSX loader for .js files (CRA compat), output to build/ (keeps nginx COPY path), dev/preview on :3000.
  • index.html: moved public/→root, removed %PUBLIC_URL%, added module entry script.
  • Dockerfile: npm cinpm install; header note CRA→Vite.
  • Added .dockerignore + .gitignore for node_modules/build.

Also fixed (scrub-induced bug)

src/components/Settings.js line 6 had mesh-vpnApiKey: *** — a scrub artifact (tailscale→mesh-vpn created an invalid hyphenated JS identifier, and *** redacted the value into invalid syntax). Corrected to meshVpnApiKey: ''.

Verification

  • npm run build GREEN locally; docker compose build GREEN (backend/ffmpeg/frontend all Built).
  • Built image serves valid index.html (#root, module script, hashed assets/index-*.js + .css).

…crub-corrupted identifier

- CRA5 react-scripts 5.0.1 build failed with 'Unknown keyword formatMinimum'
  (schema-utils→ajv-keywords vs nested ajv conflict); unfixable via overrides
  (8 combos tried). Migrated to Vite 5 (@vitejs/plugin-react).
- Fixed scrub-corrupted state init in Settings.js: 'mesh-vpnApiKey: ***'
  (invalid identifier + redacted value) → 'meshVpnApiKey: ""'.
- Vite outputs to build/ (nginx COPY path unchanged); Dockerfile npm ci→install.
- docker compose build now GREEN (frontend/backend/ffmpeg all Built).
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant