Locale not found

[gustaveWPM]

Hello!

I experienced a bit with the lib today.

When I go to http://localhost:3000/this.doesnotexist

I have this error :

Unhandled Runtime Error

Error: Locale not found
Call Stack
useCurrentLocale/<
node_modules/next-international/dist/app/client/index.js (219:0)
mountMemo
node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (11768:0)
useMemo
node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (12287:0)
useMemo
node_modules/next/dist/compiled/react/cjs/react.development.js (1784:0)
useCurrentLocale
node_modules/next-international/dist/app/client/index.js (213:0)
I18nProviderClient
node_modules/next-international/dist/app/client/index.js (70:0)
renderWithHooks
node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (10697:0)
mountIndeterminateComponent
node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (15735:0)
beginWork$1
node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (17310:0)
beginWork
node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (25675:0)
performUnitOfWork
node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (24526:0)
workLoopSync
node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (24242:0)
renderRootSync
node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (24197:0)
recoverFromConcurrentError
node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (23432:0)
performConcurrentWorkOnRoot
node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (23377:0)
workLoop
node_modules/next/dist/compiled/scheduler/cjs/scheduler.development.js (261:0)
flushWork
node_modules/next/dist/compiled/scheduler/cjs/scheduler.development.js (230:0)
performWorkUntilDeadline
node_modules/next/dist/compiled/scheduler/cjs/scheduler.development.js (534:0)

It seems that I can't catch it via any error boundary, nor error.tsx, nor global-error.tsx.

I'm using Next.js 13 with the App Router.

Here is my middleware.ts

import { NextRequest, NextResponse } from 'next/server';

import { createI18nMiddleware } from 'next-international/middleware';
import { fallbackLng, languages } from './i18n/settings';

const I18nMiddleware = createI18nMiddleware(languages, fallbackLng);

// * ... Work-around (1): used for getServerSidePathnameWorkaround
function appendCurrentUrlHeader(request: NextRequest, i18nResponse: NextResponse) {
  i18nResponse.headers.set('x-url', request.url);
}

export function middleware(request: NextRequest) {
  const i18nResponse: NextResponse = I18nMiddleware(request);
  appendCurrentUrlHeader(request, i18nResponse);
  return i18nResponse;
}

export const config = {
  matcher: ['/((?!api|static|_next|.*\\..*).*)']
};

Would it be possible to call notFound() when Locale not found is throwed in this execution context?

[QuiiBz]

Thanks, this seems like a valid use case for notFound() and will be added for the v1 release as it's technically breaking.

[QuiiBz]

I've published 1.0.0-rc.1 that includes #145 if you want to try - you'll need to read the release notes as v1 have some breaking changes: #126

[gustaveWPM]

Thx!
I've done something tricky to handle /lol.wtf_this_does_not_exist, but that's okay.

src/app/not-found.tsx

// * ... Will fire a "Can't use notFound() from Root Layout" error

export default function NotFoundPage() {
  return <></>;
}

src/app/error.tsx

'use client';

// * ... Catching this "Can't use notFound() from Root Layout" error

import { redirect } from 'next/navigation';

export default function Error({ error, reset }: { error: Error; reset: () => void }) {
  redirect('/');
}

It does not seem to be the most standard way to achieve what I wanted, but it works.
Thanks!