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

martinbrueckenwirt · 2023-05-06T06:56:22Z

"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

event compiled client and server successfully in 820 ms (312 modules)
wait compiling...
event compiled client and server successfully in 161 ms (312 modules)
wait compiling /page (client and server)...
event compiled client and server successfully in 1445 ms (604 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 Home (./src/app/page.tsx:23:100)
at stringify ()
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 Home (./src/app/page.tsx:23:100)
at stringify ()
digest: "2075757740"
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 Home (./src/app/page.tsx:23:100)
at stringify ()
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 Home (./src/app/page.tsx:23:100)
at stringify ()
digest: "2075757740"
null

Baptistemontan · 2023-05-06T15:59:17Z

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 · 2023-05-10T11:19:51Z

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 · 2023-05-11T12:56:05Z

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 · 2023-06-05T21:51:08Z

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

bloomfieldj · 2023-06-06T02:26:59Z

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

aralroca · 2023-06-06T18:20:54Z

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

Gyurmatag · 2023-06-10T16:22:53Z

It works.

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

aralroca · 2023-06-10T17:44:36Z

Nice @Gyurmatag , thanks for the feedback! 😊

Baptistemontan · 2023-06-13T18:26:42Z

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: [email protected]
Found: [email protected]
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 [email protected]
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 · 2023-06-16T14:55:00Z

@Baptistemontan about the dependencies problem is fixed in:

next-translate - version 2.3.0-canary.3
next-translate-plugin - version 2.3.0-canary.6

hydRAnger · 2023-06-23T05:57:21Z

    "next-translate": "2.4.0-canary.4"
    "next-translate-plugin": "2.4.0-canary.4"

works for me

chtibizoux · 2023-06-24T15:51:33Z

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:

> [email protected] 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 · 2023-06-25T00:21:04Z

@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 · 2023-06-25T06:41:32Z

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 · 2023-06-25T10:27:06Z

@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 · 2023-06-25T11:32:24Z

    "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 · 2023-06-25T14:44:21Z

@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 · 2023-06-25T16:02:07Z

New version 2.4.2 is working, thanks a lot !

aralroca · 2023-06-25T17:59:07Z

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

aralroca closed this as completed Jun 16, 2023

aralroca mentioned this issue Jun 25, 2023

fix: normalize app dir slashes to be posix/unix-like forward slashes aralroca/next-translate-plugin#48

Merged

aralroca reopened this Jun 25, 2023

aralroca closed this as completed Jun 25, 2023

lluiscab mentioned this issue Dec 17, 2023

fix(utils): Load typescript files relative to process current working directory aralroca/next-translate-plugin#79

Merged

4 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

martinbrueckenwirt commented May 6, 2023

Baptistemontan commented May 6, 2023 •

edited

Loading

bregtemundo commented May 10, 2023

aralroca commented May 11, 2023

aralroca commented Jun 5, 2023 •

edited

Loading

bloomfieldj commented Jun 6, 2023

aralroca commented Jun 6, 2023

Gyurmatag commented Jun 10, 2023 •

edited

Loading

aralroca commented Jun 10, 2023

Baptistemontan commented Jun 13, 2023 •

edited

Loading

aralroca commented Jun 16, 2023

hydRAnger commented Jun 23, 2023

chtibizoux commented Jun 24, 2023 •

edited

Loading

aralroca commented Jun 25, 2023

chtibizoux commented Jun 25, 2023 •

edited

Loading

aralroca commented Jun 25, 2023 •

edited

Loading

chtibizoux commented Jun 25, 2023

aralroca commented Jun 25, 2023 •

edited

Loading

chtibizoux commented Jun 25, 2023

aralroca commented Jun 25, 2023

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

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

Comments

martinbrueckenwirt commented May 6, 2023

Baptistemontan commented May 6, 2023 • edited Loading

bregtemundo commented May 10, 2023

aralroca commented May 11, 2023

aralroca commented Jun 5, 2023 • edited Loading

bloomfieldj commented Jun 6, 2023

aralroca commented Jun 6, 2023

Gyurmatag commented Jun 10, 2023 • edited Loading

aralroca commented Jun 10, 2023

Baptistemontan commented Jun 13, 2023 • edited Loading

aralroca commented Jun 16, 2023

hydRAnger commented Jun 23, 2023

chtibizoux commented Jun 24, 2023 • edited Loading

aralroca commented Jun 25, 2023

chtibizoux commented Jun 25, 2023 • edited Loading

aralroca commented Jun 25, 2023 • edited Loading

chtibizoux commented Jun 25, 2023

aralroca commented Jun 25, 2023 • edited Loading

chtibizoux commented Jun 25, 2023

aralroca commented Jun 25, 2023

Baptistemontan commented May 6, 2023 •

edited

Loading

aralroca commented Jun 5, 2023 •

edited

Loading

Gyurmatag commented Jun 10, 2023 •

edited

Loading

Baptistemontan commented Jun 13, 2023 •

edited

Loading

chtibizoux commented Jun 24, 2023 •

edited

Loading

chtibizoux commented Jun 25, 2023 •

edited

Loading

aralroca commented Jun 25, 2023 •

edited

Loading

aralroca commented Jun 25, 2023 •

edited

Loading