next-translate-plugin Failing `npm run build` during server page prerender at `useTranslation`

What version of this package are you using? 2.0.3 & 2.0.4 NextJS 13, app directory

What operating system, Node.js, and npm version? MacOS/Github actions (debian), node v19.6.0

What happened? npm run build is failing when meets useTranslation in server component.

info  - Linting and checking validity of types
info  - Collecting page data
info  - Creating an optimized production build ...TypeError: Cannot read properties of undefined (reading '_currentValue')
    at Object.Ca (/Users/pannoire/Projects/utterHealth/packages/web/.next/server/chunks/42.js:1238:14)
    at exports.useContext (/Users/pannoire/Projects/utterHealth/packages/web/.next/server/chunks/42.js:2251:22)
    at useTranslationInPages (/Users/pannoire/Projects/utterHealth/packages/web/.next/server/chunks/42.js:430:38)
    at useTranslation (/Users/pannoire/Projects/utterHealth/packages/web/.next/server/chunks/42.js:460:12)
    at Home (/Users/pannoire/Projects/utterHealth/packages/web/.next/server/app/page.js:222:102)
    at X (/Users/pannoire/Projects/utterHealth/packages/web/.next/server/chunks/42.js:1416:13)
    at Na (/Users/pannoire/Projects/utterHealth/packages/web/.next/server/chunks/42.js:1584:21)
    at Array.toJSON (/Users/pannoire/Projects/utterHealth/packages/web/.next/server/chunks/42.js:1344:20)
    at stringify (<anonymous>)
    at da (/Users/pannoire/Projects/utterHealth/packages/web/.next/server/chunks/42.js:858:9)

Error occurred prerendering page "/". Read more: https://nextjs.org/docs/messages/prerender-error
TypeError: Cannot read properties of undefined (reading '_currentValue')
    at Object.Ca (/Users/pannoire/Projects/utterHealth/packages/web/.next/server/chunks/42.js:1238:14)
    at exports.useContext (/Users/pannoire/Projects/utterHealth/packages/web/.next/server/chunks/42.js:2251:22)
    at useTranslationInPages (/Users/pannoire/Projects/utterHealth/packages/web/.next/server/chunks/42.js:430:38)
    at useTranslation (/Users/pannoire/Projects/utterHealth/packages/web/.next/server/chunks/42.js:460:12)
    at Home (/Users/pannoire/Projects/utterHealth/packages/web/.next/server/app/page.js:222:102)
    at X (/Users/pannoire/Projects/utterHealth/packages/web/.next/server/chunks/42.js:1416:13)
    at Na (/Users/pannoire/Projects/utterHealth/packages/web/.next/server/chunks/42.js:1584:21)
    at Array.toJSON (/Users/pannoire/Projects/utterHealth/packages/web/.next/server/chunks/42.js:1344:20)
    at stringify (<anonymous>)
    at da (/Users/pannoire/Projects/utterHealth/packages/web/.next/server/chunks/42.js:858:9)
info  - Generating static pages (5/5)

My code is rather simply:

// src/app/layout.tsx
interface RootLayoutProps {
  children: React.ReactNode;
}

export default function RootLayout({ children }: RootLayoutProps) {
  return (
    <html>
      <head>
        <link rel="manifest" href="/manifest.json" />
      </head>
      <body>{children}</body>
    </html>
  );
}

// src/app/page.tsx
import useTranslation from 'next-translate/useTranslation';

export default function Home() {
  const { t } = useTranslation('common');

  return <span>{t('test')}</span>;
}

// next.config.js
const nextTranslate = require('next-translate-plugin')

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  experimental: {
    appDir: true,
  },
};

module.exports = nextTranslate(nextConfig);

What did you expect to happen? Build processes successfully.

Are you willing to submit a pull request to fix this bug? Yes, if I get to know what's failing

Mar 28 '23 17:03 macoley

I got a similar error:

I reverted back to older versions... Temporary fix:

"next-translate": "2.0.2"
"next-translate-plugin": "2.0.3",

Mar 29 '23 01:03 picardplaisimond

This can happen if you have app folder with pages folder. If you remove the pages folder should work. However we can change this logic inside the plugin to take account the current experimental.appDir instead of looking at the folders.

Mar 29 '23 08:03 aralroca

@aralroca I keep app and pages together, because I use tRPC under pages/api/[trpc].tsx and that approach is way simpler to integrate.

Mar 29 '23 08:03 macoley

Can you try changing the name of pages to another one for a moment, only to verify that is for this?

Mar 29 '23 10:03 aralroca

Can you try changing the name of pages to another one for a moment, only to verify that is for this?

I just tried that solution, and it seems to work for me. But it would have been great if both folder could cohabit.

However, it's clear that the new App directory structure is not stable yet. I wanted to give it a chance, but it's way too soon to migrate.
I'm wondering if there's a easier way to make this package works with the App directory structure. Right now, it seems like there's a lot of workarounds happening in the background, making this package more fragile. I still appreciate all the work behind it !

Mar 30 '23 04:03 picardplaisimond

I am having the same issue

'use client'
import useTranslation from 'next-translate/useTranslation'

export default function Page() {
  const { t } = useTranslation('signin')

  return <div className="flex flex-col lg:flex-row w-full">{t('google')}</div>
}

I dont have pages folder. I just removed it. But still failing.. Very similar sign-up page works quite well

Jun 06 '23 15:06 bbolek

Try next-translate-plugin prerelease 2.3.0-canary.1

Jun 06 '23 16:06 aralroca

Now I am having totally different error:

Also now I get the same error when I run npm run dev

Thanks

Jun 07 '23 03:06 bbolek

@bbolek fixed on 2.3.0-canary.2, can you verify it? Thanks!

Jun 07 '23 09:06 aralroca

Hey @aralroca I got this again:

Thank you.

Jun 07 '23 14:06 bbolek

Small update: If I use Server action in related page, I can get build without any problem on version "next-translate-plugin": "^2.0.3",

But if there is no server action in related page, I get exception

Jun 07 '23 15:06 bbolek

Thanks for the comment, is possible to upload the reproducible failing case in some repo to help to fix It? Thanks!

Jun 07 '23 17:06 aralroca

Hey @aralroca, I shared a repo with you : https://github.com/bbolek/next-translate-issue

Thank you

Jun 08 '23 15:06 bbolek

@bbolek looks fixed in:

next-translate version 2.3.0-canary.3 (you also need to update this one)
next-translate-plugin version 2.3.0-canary.3

Jun 08 '23 18:06 aralroca

@aralroca Still having the issue. updated package.json and pushed to repo

Thanks

Jun 09 '23 09:06 bbolek