`next dev` Renders but Nothing Works: Your CSP Is Missing `unsafe-eval`
I run AI Change Watch , a small independent project that crawls what 15 AI vendors publish about their own models — deprecation tables, lifecycle pages, pricing and SDK releases — and records every time one of them changes. At some point I added a Content-Security-Policy. It was correct. It shipped. Production was fine. And then, locally, every interactive thing on the site stopped working. The…
The AI Change Watch project, which monitors AI vendors' documentation for changes, encountered an issue with its development environment. After implementing a Content-Security-Policy (CSP), interactive elements on the site stopped functioning in the local development environment. The page loaded correctly, but features like the search box and sort functionality became inert.
The problem arose from the CSP directive, specifically the "unsafe-eval" permission, which was required for the development server to evaluate compiled modules and enable features like React Refresh and Fast Refresh. In production, the server does not perform this string evaluation, so the CSP works without issue. However, in development, the same CSP caused a silent failure, resulting in interactive elements not functioning.
The project developer discovered that adding a conditional in the CSP to allow "unsafe-eval" only in development fixed the issue. They also noted that testing client behavior in development can be unreliable, as it may not reflect how the code behaves in production.
Written by urgent.news from Dev.to's reporting — not their text. Machine-written — may contain errors; check the original before relying on it.
