search

aralroca / next-translate

Next.js plugin + i18n API for Next.js 🌍 - Load page translations and use them in an easy way!
MIT License
2.65k stars 206 forks source link

TypeError: Cannot read properties of undefined (reading '_context') #1040

Closed martinbrueckenwirt closed 1 year ago

martinbrueckenwirt commented 1 year ago

"dependencies": { "@types/node": "^20.0.0", "@types/react": "^18.2.5", "@types/react-dom": "^18.2.4", "eslint": "^8.39.0", "eslint-config-next": "^13.4.1", "negotiator": "^0.6.3", "next": "^13.4.1", "next-translate": "^2.0.5", "react": "^18.2.0", "react-dom": "^18.2.0", "react-i18next": "^12.2.2", "typescript": "5.0.4" },

npm 8.19.2

Windows 11

I am working on a new site. I upgraded from nextjs13.2.4 ==> nextjs 13.4

This is the error ready started server on 0.0.0.0:3000, url: http://localhost:3000

Baptistemontan commented 1 year ago

I just run into the same error, all I've done was init a nextjs project with npx create-next-app@latest, then npm add next-translate and npm add next-translate-plugin -D.

package.json:

{
  "name": "my-cool-app",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@types/node": "20.1.0",
    "@types/react": "18.2.6",
    "@types/react-dom": "18.2.4",
    "eslint": "8.40.0",
    "eslint-config-next": "13.4.1",
    "next": "13.4.1",
    "next-translate": "^2.0.5",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "typescript": "5.0.4"
  },
  "devDependencies": {
    "next-translate-plugin": "^2.0.5"
  }
}

I then added the i18n.json file: 

// /i18n.json
{
  "locales": ["en", "fr"],
  "defaultLocale": "fr",
  "pages": {
    "*": ["common"],
  }
}

and the locales files:

// /locales/en/common.json
{
    "getting-started": "Get started by editing"
}
// /locales/fr/common.json
{
    "getting-started": "Commencez en éditant"
}

then changed the default nextjs app.tsx:

export default function Home() {
  const { t } = useTranslation('common');        <-- new line
  return (
    <main className={styles.main}>
      <div className={styles.description}>
        <p>
          // Get started by editing&nbsp;         <-- old line
          {t("getting-started")}&nbsp;              <-- new line
          <code className={styles.code}>src/app/page.tsx</code>
        </p>
// ...

Then by running npm run dev I get the following error when accessing the local dev server:

Unhandled Runtime Error
Error: Cannot read properties of undefined (reading '_context')

src\app\page.tsx (6:31) @ Home

  4 | 
  5 | export default function Home() {
> 6 | const { t } = useTranslation('common');
    |                             ^
  7 | return (
  8 |   <main className={styles.main}>
  9 |     <div className={styles.description}>

Hope this can help !

Edit: By switching to next version 13.3.1 things works

bregtemundo commented 1 year ago

As of next 13.4, the app dir is stable and will not be in the next.config.js

For me, adding this line, Fixed the issue. experimental: { appDir: true },

I guess the detection of app dir is dependent on this

aralroca commented 1 year ago

Currently next-translate-plugin is taking account experimental.addDir, so we need to change the detection of this. Good point. BTW; contributions inside next-translate-plugin are very welcome.

aralroca commented 1 year ago

Try next-translate-plugin 2.3.0-canary.2 prerelease please 🙏 It should be fixed

bloomfieldj commented 1 year ago

The canary version works for me, thank you so much!

aralroca commented 1 year ago

Cool! Waiting for more feedback @martinbrueckenwirt @bregtemundo @Baptistemontan

Gyurmatag commented 1 year ago

It works.

"next-translate": "2.3.0-canary.3"
"next-translate-plugin": "2.3.0-canary.3"
aralroca commented 1 year ago

Nice @Gyurmatag , thanks for the feedback! 😊

Baptistemontan commented 1 year ago

Sorry I had a lot of work lately, I'm getting back on the project and when pasting

"next-translate": "2.3.0-canary.3"
"next-translate-plugin": "2.3.0-canary.3"

in the depedencies I get back

# npm resolution error report

While resolving: portfolio-2023@0.1.0
Found: next-translate@2.3.0-canary.3
node_modules/next-translate
  next-translate@"2.3.0-canary.3" from the root project

Could not resolve dependency:
peer next-translate@">= 2.0.0-canary.1" from next-translate-plugin@2.3.0-canary.3
node_modules/next-translate-plugin
  dev next-translate-plugin@"2.3.0-canary.3" from the root project

Fix the upstream dependency conflict, or retry
this command with --force or --legacy-peer-deps
to accept an incorrect (and potentially broken) dependency resolution.
aralroca commented 1 year ago

@Baptistemontan about the dependencies problem is fixed in:

hydRAnger commented 1 year ago 
    "next-translate": "2.4.0-canary.4"
    "next-translate-plugin": "2.4.0-canary.4"

works for me

chtibizoux commented 1 year ago

This error is still there for me, I have tried the example https://github.com/aralroca/next-translate/tree/master/examples/with-app-directory with this package.json:

{
  "name": "-",
  "version": "1.0.0",
  "private": true,
  "license": "MIT",
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "analyze": "ANALYZE=true yarn build"
  },
  "dependencies": {
    "@mdx-js/loader": "2.3.0",
    "@mdx-js/react": "2.3.0",
    "@next/mdx": "13.4.7",
    "next": "13.4.7",
    "next-translate": "^2.4.0-canary.5",
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },
  "devDependencies": {
    "@next/bundle-analyzer": "13.4.6",
    "@types/node": "20.3.1",
    "@types/react": "18.2.12",
    "next-translate-plugin": "^2.4.0-canary.5",
    "typescript": "5.1.3"
  },
  "resolutions": {
    "webpack": "5.11.1"
  }
}

And here is the error:

> -@1.0.0 dev
> next dev

- ready started server on 0.0.0.0:3000, url: http://localhost:3000
- event compiled client and server successfully in 1589 ms (20 modules)
- wait compiling...
- event compiled client and server successfully in 539 ms (20 modules)
- wait compiling /[lang]/page (client and server)...
- event compiled client and server successfully in 5.3s (473 modules)
- error node_modules\next\dist\compiled\react\cjs\react.shared-subset.development.js (1740:16) @ _context
- error TypeError: Cannot read properties of undefined (reading '_context')
    at RootLayout (./src/app/[lang]/layout.tsx:17:98)
    at stringify (<anonymous>)
null
- error node_modules\next\dist\compiled\react\cjs\react.shared-subset.development.js (1740:16) @ _context
- error TypeError: Cannot read properties of undefined (reading '_context')
    at RootLayout (./src/app/[lang]/layout.tsx:17:98)
    at stringify (<anonymous>)
digest: "3362494042"
null
Warning: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.
aralroca commented 1 year ago

@chtibizoux it should work, can you verify that yarn.lock or package-lock.json are updated correctly? BTW; you can try the latest version 2.4.1 (without the canary). If it's already happening please provide a reproducible example. Thanks!

chtibizoux commented 1 year ago

I have downloaded source code .zip file of the repo then extract only examples/with-app-directory and replace the package.json file by this to tweak dependencies, then run npm i and npm run dev and when i go on http://localhost:3000/en i have the same error Error: Cannot read properties of undefined (reading '_context')

package.json:

{
  "name": "-",
  "version": "1.0.0",
  "private": true,
  "license": "MIT",
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "analyze": "ANALYZE=true yarn build"
  },
  "dependencies": {
    "@mdx-js/loader": "2.3.0",
    "@mdx-js/react": "2.3.0",
    "@next/mdx": "13.4.7",
    "next": "13.4.7",
    "next-translate": "^2.4.1",
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },
  "devDependencies": {
    "@next/bundle-analyzer": "13.4.6",
    "@types/node": "20.3.1",
    "@types/react": "18.2.12",
    "next-translate-plugin": "^2.4.1",
    "typescript": "5.1.3"
  },
  "resolutions": {
    "webpack": "5.11.1"
  }
}
aralroca commented 1 year ago

@chtibizoux Just tried but works fine, I can't reproduce it. Would you tell me your node version and check the next-translate version inside the package-lock.json?:

grep "next-translate" package-lock.json && echo "Node version:" && node -v

Thanks 🙏

chtibizoux commented 1 year ago 
    "next-translate": "^2.4.1",
    "next-translate-plugin": "^2.4.1",
"node_modules/next-translate": {
  "resolved": "https://registry.npmjs.org/next-translate/-/next-translate-2.4.1.tgz",
"node_modules/next-translate-plugin": {
  "resolved": "https://registry.npmjs.org/next-translate-plugin/-/next-translate-plugin-2.4.1.tgz",
    "next-translate": ">= 2.4.1"
"node_modules/next-translate-plugin/node_modules/typescript": {

Node version: v18.16.0 And I'm using windows 11

aralroca commented 1 year ago

@chtibizoux thanks, I see that the app dir detection was looking without normalizing the slashes and probably was not detecting correctly in windows, now should work with next-translate-plugin 2.4.2. Can you confirm it? Thanks!

chtibizoux commented 1 year ago

New version 2.4.2 is working, thanks a lot !

aralroca commented 1 year ago

@chtibizoux amazing! Thanks for your feedback and contribution to do next-translate more robust