Improving the debug-ability of Unable to find next-intl locale because the middleware didn't run on this request.

[RaenonX]

Is your feature request related to a problem? Please describe.

Sort of? Because I type the locale, the sample code provided at the very top of this doc page doesn't work for me, as matcher accepts const string only. This brings me to use this middleware config:

export const config = {
  // Skip all paths that should not be internationalized. This example skips the
  // folders "api", "_next" and all files with an extension (e.g. favicon.ico)
  matcher: ['/((?!api|account|_next|.*\\..*).*)'],
};

However, I am seeing tons of Error: Unable to find next-intl locale because the middleware didn't run on this request. See https://next-intl-docs.vercel.app/docs/routing/middleware#unable-to-find-locale errors. Since the error message doesn't have the request origin included, I don't really know what request causes this error.

Describe the solution you'd like

Error message be like Unable to find next-intl locale because the middleware didn't run on the request originated from some/path.

Describe alternatives you've considered

N/A

Additional Note

This happens in production build only, and I really have no idea what request triggered this error.
The log message doesn't give me useful information as well, unfortunately.

2|Pokemon.Sleep.UI  | 2023-12-11T14:22:27: Error: Unable to find `next-intl` locale because the middleware didn't run on this request. See https://next-intl-docs.vercel.app/docs/routing/middleware#unable-to-find-locale
2|Pokemon.Sleep.UI  |     at apply (C:\Users\Spinach\Documents\App\Deployments\Pokemon-Sleep-UI\20231210.9\.next\server\chunks\7980.js:1:60371)
2|Pokemon.Sleep.UI  |     at C:\Users\Spinach\Documents\App\Deployments\Pokemon-Sleep-UI\20231210.9\node_modules\next\dist\compiled\next-server\webpack:\next\dist\compiled\react\cjs\react.shared-subset.production.min.js:22:500
2|Pokemon.Sleep.UI  |     at u (C:\Users\Spinach\Documents\App\Deployments\Pokemon-Sleep-UI\20231210.9\.next\server\chunks\7980.js:1:60656)
2|Pokemon.Sleep.UI  |     at i (C:\Users\Spinach\Documents\App\Deployments\Pokemon-Sleep-UI\20231210.9\.next\server\chunks\1674.js:1:146011)
2|Pokemon.Sleep.UI  |     at b (C:\Users\Spinach\Documents\App\Deployments\Pokemon-Sleep-UI\20231210.9\.next\server\chunks\3878.js:9:1136)
2|Pokemon.Sleep.UI  |     at Q (C:\Users\Spinach\Documents\App\Deployments\Pokemon-Sleep-UI\20231210.9\node_modules\next\dist\compiled\next-server\webpack:\next\dist\compiled\react-server-dom-webpack\cjs\react-server-dom-webpack-server.edge.production.min.js:42:209)
2|Pokemon.Sleep.UI  |     at C:\Users\Spinach\Documents\App\Deployments\Pokemon-Sleep-UI\20231210.9\node_modules\next\dist\compiled\next-server\webpack:\next\dist\compiled\react-server-dom-webpack\cjs\react-server-dom-webpack-server.edge.production.min.js:47:294
2|Pokemon.Sleep.UI  |     at Array.K (C:\Users\Spinach\Documents\App\Deployments\Pokemon-Sleep-UI\20231210.9\node_modules\next\dist\compiled\next-server\webpack:\next\dist\compiled\react-server-dom-webpack\cjs\react-server-dom-webpack-server.edge.production.min.js:53:250)
2|Pokemon.Sleep.UI  |     at stringify (<anonymous>)
2|Pokemon.Sleep.UI  |     at eE (C:\Users\Spinach\Documents\App\Deployments\Pokemon-Sleep-UI\20231210.9\node_modules\next\dist\compiled\next-server\webpack:\next\dist\compiled\react-server-dom-webpack\cjs\react-server-dom-webpack-server.edge.production.min.js:57:54)

[Maciej916]

I'm encountering a similar issue while using the localePrefix 'as-needed' alongside the same matcher. For instance, when there's a missing image, console errors arise, and addressing this situation is imperative. Additionally, I've observed a related problem—storing the favicon.ico in a location other than /favicon.ico. This leads to Google Chrome attempting to retrieve the favicon.ico each time I open the page, resulting in an error. While one workaround is creating a different matcher, it's suboptimal as users might open random images (/random.png) that, while ignored by the matcher, trigger errors consistently. Hence, a more comprehensive solution or improvement is warranted. Edit: Another example is that I store favicon.ico in a different location than /favicon.ico, and every time I open the page in Google Chrome, it tries to retrieve the favicon.ico, causing an error. I can avoid this by creating a different matcher, but that's not ideal because a user can open a random image (/random.png), and since it is ignored by the matcher, it will throw an error each time.

[amannn]

@RaenonX I'm unfortunately not aware of anything next-intl could do to improve the debugging experience here. E.g. there's no way next-intl could output a pathname for example, because this information is not available by the time a locale is read. The only way to get a hold of a pathname in Server Components, is to attach it in a middleware—however, this is the problem that you're having: the middleware doesn't run on this request.

The troubleshooting section for this error contains all the cases I've seen users run into so far. This is the best resource to help you fix the error. Maybe you also have some luck by checking your CDN logs for 500 response codes so you can get a hold of the request URL.

For instance, when there's a missing image, console errors arise, and addressing this situation is imperative.

@Maciej916 That's why the troubleshooting guide recommends to validate your incoming locale. That should fix this error.

---

Generally, next-intl recommends this middleware config:

import createMiddleware from 'next-intl/middleware';
 
export default createMiddleware({
  // A list of all locales that are supported
  locales: ['en', 'de'],
 
  // Used when no locale matches
  defaultLocale: 'en'
});
 
export const config = {
  // Match only internationalized pathnames
  matcher: ['/', '/(de|en)/:path*']
};

This will help you to avoid this error. If you switch to localePrefix: 'as-needed' you need to be more careful—as mentioned in the docs.

I'm closing this issue as it's unfortunately not actionable.

[RaenonX]

Sad but understandable, thanks for the explanation, and great tips on checking CDN logs ngl!

[amannn]

There was an update to this in #742: next-intl will now call notFound() for these cases and therefore no error will be thrown anymore. A dev-only warning will still be printed though. Please still make sure that your middleware matcher is set up correctly. Have a look at the PR for details!