Namespace not being loaded for error page with default-prefix middleware

[iksent]

What version of Next.js are you using?

12.0.4-canary.5

What version of Node.js are you using?

v16.13.0

What browser are you using?

Chrome

What operating system are you using?

macOS

How are you deploying your application?

next start

Describe the Bug

I see not translated strings at error page using middleware to prefix default locale

Expected Behavior

I expected to see translated strings with loaded namespace

To Reproduce

1. Use middleware to prefix the default locale
2. Try to open any not-existing file from public folder (without locale prefix): http://localhost:3031/common/this_file_not_exists.png
3. There will be no redirect to locale-prefixed path because of the check for a file at middleware config
4. You will see the output from the _error.tsx page.
5. Try to output some translatable strings on this error page
6. You'll see "common:error.title" instead of the translated strings
7. All strings are translated OK with locale-prefixed path like: http://localhost:3031/ru/common/test.png

My i18n.json:

{
  "locales": ["default", "ru", "en"],
  "defaultLocale": "default",
  "pages": {
    "*": ["common", "main"],
    "/_error": ["common", "main"]
  }
}

And /pages/_middleware.ts:

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

const PUBLIC_FILE = /\.(.*)$/
const DEFAULT_LOCALE = 'en'

export function middleware(request: NextRequest) {
  const pathName = request.nextUrl.pathname
  const shouldHandleLocale =
    !PUBLIC_FILE.test(pathName) && request.nextUrl.locale === 'default'
  return shouldHandleLocale
    ? NextResponse.redirect(`/${DEFAULT_LOCALE}${pathName}`)
    : undefined
}

[ajmnz]

Just for context, this is the error

next-translate - compiled page: /404 - locale: default - namespaces: common - used loader: getStaticProps
SerializableError: Error serializing `.__namespaces.common` returned from `getStaticProps` in "/404".
Reason: `undefined` cannot be serialized as JSON. Please use `null` or omit this value.
    at isSerializable (/***/node_modules/next/dist/lib/is-serializable-props.js:39:19)
    at /***/node_modules/next/dist/lib/is-serializable-props.js:46:66
    at Array.every (<anonymous>)
    at isSerializable (/***/node_modules/next/dist/lib/is-serializable-props.js:43:39)
    at /***/node_modules/next/dist/lib/is-serializable-props.js:46:66
    at Array.every (<anonymous>)
    at isSerializable (/***/node_modules/next/dist/lib/is-serializable-props.js:43:39)
    at Object.isSerializableProps (/***/node_modules/next/dist/lib/is-serializable-props.js:66:12)
    at Object.renderToHTML (/***/node_modules/next/dist/server/render.js:418:93)
    at async doRender (/***/node_modules/next/dist/server/next-server.js:1389:38)

It would be nice if there was a property like ignoreDefault: boolean, that would just ignore the default locale.

[martinratinaud]

Yes for me, it's also generating errors on build as it tries to build all /default routes

I tried to bypass it for dynamic routes by filtering locales that is named default but still it does not work for main routes

If anybody has an idea on how to make it work it would be great

[aralroca]

@martinratinaud @ajmnz I prereleased 1.3.0-canary.6 with this fix. Would you please confirm that it works correctly? 😊 Thank you very much!

I close the issue, anything you find I will reopen the issue.

[martinratinaud]

Woa thanks a lot

Unfortunately, I switched to "next-translate": "1.3.0-canary.6"

And I got

Error occurred prerendering page "/__default/404". Read more: https://nextjs.org/docs/messages/prerender-error
RangeError: Incorrect locale information provided
    at new PluralRules (<anonymous>)
    at I18nProvider (/Users/martin/Workspace/labs/crypto-rates/node_modules/next-translate/lib/cjs/I18nProvider.js:50:23)
    at d (/Users/martin/Workspace/labs/crypto-rates/node_modules/react-dom/cjs/react-dom-server.node.production.min.js:33:498)
    at bb (/Users/martin/Workspace/labs/crypto-rates/node_modules/react-dom/cjs/react-dom-server.node.production.min.js:36:16)
    at a.b.render (/Users/martin/Workspace/labs/crypto-rates/node_modules/react-dom/cjs/react-dom-server.node.production.min.js:42:43)
    at a.b.read (/Users/martin/Workspace/labs/crypto-rates/node_modules/react-dom/cjs/react-dom-server.node.production.min.js:41:83)
    at Object.exports.renderToString (/Users/martin/Workspace/labs/crypto-rates/node_modules/react-dom/cjs/react-dom-server.node.production.min.js:52:138)
    at Object.renderPage (/Users/martin/Workspace/labs/crypto-rates/node_modules/next/dist/server/render.js:621:45)
    at Object.defaultGetInitialProps (/Users/martin/Workspace/labs/crypto-rates/node_modules/next/dist/server/render.js:301:51)
    at Function.getInitialProps (/Users/martin/Workspace/labs/crypto-rates/.next/server/chunks/5517.js:551:20)

Here is my i18n.js

module.exports = {
  // "locales": ["en", "fr"],
  // "defaultLocale": "en",
  "locales": ["__default","en", "fr"],
  "defaultLocale": "__default",
  "localesToIgnore": ["__default"],
  "keySeparator": false,
  "pages": {
    "*": [
      '404',
      '500',
      'banner',
      'common',
      'compare',
      'faq',
      'footer',
      'header',
      'hot-deals',
      'stake',
      'subscribe',
    ],
  }
}

[martinratinaud]

But I can't reopen this issue :-)

[iksent]

I can confirm there is RangeError: Incorrect locale information provided error now, although I didn't see this error when creating the issue (there were just untranslated strings)

(I have updated Next.JS to the ^12.0.7 version)

[aralroca]

I hope with 1.3.0-canary.7 it will be solved

[iksent]

@aralroca, please, try to open:

http://localhost:PORT/any-not-existing-file.png

500 with error

RangeError: Incorrect locale information provided`
 at new PluralRules (<anonymous>)
    at I18nProvider (/<project/path>/node_modules/next-translate/lib/cjs/I18nProvider.js:53:23)
...

[iksent]

Hello, @aralroca! Have you tried to get the error as I described?

[yfhui]

hi guys, using 1.4.0 of next-translate now.

After setup with localesToIgnore, But I still got the default locale with a 404 page complied at the very first time it running npm run dev (should be the compliation triggered by getStaticProps )

Here is the sinppet:

// i18n.js
module.exports = {
    defaultLocale: "default",
    locales: ["default", "en-us"],
    localeDetection: false,
    localesToIgnore: ["default"],
    // ...
};

// 404.js
// ...
export default function Custom404() {
   // ...
}
export const getStaticProps = async ({ req, res, query, locale }) => {
    console.log(locale) // it prints "default"
    return { props: {} };
};

May I know what is wrong in my config? Or there's other issues we didn't spot it in this thread?

[iksent]

Any updates on this issue?