Failing `npm run build` during server page prerender at `useTranslation`

macoley commented 1 year ago

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

picardplaisimond commented 1 year ago

I got a similar error:

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

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

aralroca commented 1 year ago

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.

macoley commented 1 year ago

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

aralroca commented 1 year ago

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

picardplaisimond commented 1 year ago

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 !

bbolek commented 1 year ago

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

aralroca commented 1 year ago

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

bbolek commented 1 year ago

Now I am having totally different error:

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

Thanks

aralroca commented 1 year ago

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

bbolek commented 1 year ago

Hey @aralroca I got this again:

Thank you.

bbolek commented 1 year ago

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

aralroca commented 1 year ago

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

bbolek commented 1 year ago

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

Thank you

aralroca commented 1 year ago

@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

bbolek commented 1 year ago

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

Thanks

aralroca / next-translate-plugin

Failing `npm run build` during server page prerender at `useTranslation` #15