An old tab after a new deploy: the missing chunk
The first lines are React's development message for an error caught by a boundary (Topic 23.5 shows how to send it to a reporter instead). The boundary turns a broken screen into a clear next step. Don't click Reload in the preview: it reloads the preview frame.
A client-side React app is a folder of static files, so any static host can serve it, as long as it answers unknown paths like /products/42 with index.html (the SPA fallback) and caches hashed assets for a year while always revalidating index.html; Vercel, Netlify and nginx in Docker each express those two rules in their own config.
Change the code and press Run (Ctrl+Enter). Predict what will happen first, then break it on purpose and read what changes. Your edits are saved and match the lesson page.
Ready for more? This phase has 5 hands-on exercises with automatic checks.
Practice questions
Write the code in the editor, run it, then open the model answer to compare.
Write the Netlify files for a Vite app with React Router: an SPA fallback and long caching for /assets/*.
Write an nginx server block for an app deployed under /shop/ (Vite base: "/shop/").
Explain it without notes
Why does reloading /products/42 give a 404 on some hosts while clicking a link to it works?
Describe the caching strategy for a Vite build and why it's safe.
Walk through a multi-stage Dockerfile for a React app served by nginx.
What happens to users with an old tab open when you deploy, and how do you handle it?
Preview
Console
Nothing logged yet.Expected console output
TypeError: Failed to fetch dynamically imported module: https://shop.example/assets/Reports-Bq31x9.js
The above error occurred in one of your React components.
React will try to recreate this component tree from scratch using the error boundary you provided, ChunkBoundary.
page: ReportsA new version is available.Reload