nextjs - 💡(How to fix) Fix Turbopack HMR stops working after first edit for dynamically imported JSON files (16.2 regression) [4 comments, 3 participants]

Link to the code that reproduces this issue

https://github.com/guoxinghuang/nextjs-turbopack-hmr-repro

To Reproduce

1. pnpm install
2. pnpm dev (uses Turbopack, the default in Next.js 16)
3. Open http://localhost:3000
4. Edit messages/en.json — change the "hello" value and save
5. The page updates correctly (first edit works)
6. Edit messages/en.json again — change the "hello" value and save
7. The page does NOT update (subsequent edits are ignored)

Current vs. Expected Behavior

Current: Only the first edit to a JSON file loaded via dynamic import() with a template literal triggers HMR. All subsequent edits are silently ignored until the dev server is restarted.

Expected: Every edit should trigger HMR and update the page, as it did in Next.js 16.1.

Provide environment information

• Next.js: 16.2.1
• next-intl: 4.8.3
• React: 19.x
• Node: 22.x
• OS: macOS (Darwin 25.3.0)

Which area(s) are affected? (Select all that apply)

Turbopack, HMR

Which stage(s) are affected? (Select all that apply)

next dev (local)

Additional context

This is a regression introduced in Next.js 16.2. It worked correctly in 16.1.

The root cause appears to be the new Server Fast Refresh feature in 16.2 which uses Turbopack's fine-grained module graph invalidation instead of clearing the full require.cache. Dynamic import() with template literals (e.g., import(`../../messages/${locale}.json`)) cannot be statically analyzed by Turbopack, so after the first resolution, the JSON file is not tracked in the module graph for subsequent change detection.

Workaround: Using next dev --webpack works correctly for all edits.

This pattern is commonly used with next-intl for loading i18n message files per locale:

// src/i18n/request.ts
const messages = (await import(`../../messages/${locale}.json`)).default;