Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Integrating Sentry returns a Type Error: Cannot read properties of undefined (reading 'pageProps') #1218

Open
guillermo-avalos opened this issue Jun 7, 2024 · 0 comments

Comments

@guillermo-avalos
Copy link

guillermo-avalos commented Jun 7, 2024

What version of this package are you using?
next-translate v2.6.2

What operating system, Node.js, and npm version?
Node 22.2.0, npm v10.8.1

What happened?
After implementing Sentry (https://docs.sentry.io/platforms/javascript/guides/nextjs/), upon first running npm run dev, the following error is captured:

TypeError
Cannot read properties of undefined (reading 'pageProps')

This is happening on line 65 of appWithI18n.js.
Thanks to Sentry, I can check for the the code causing this error:

react_1.default.createElement(I18nProvider_1.default, { lang: ((_a = props.pageProps) === null || _a === void 0 ? void 0 : _a.__lang) || props.__lang || defaultLocale })

My next.config.js module exports is as follows:

module.exports =  nextTranslate(
        withSentryConfig(nextConfig, {
          org: 'my-sentry-org',
          project: 'my-project',
          authToken: process.env.SENTRY_AUTH_TOKEN,
          silent: false,
        })
      )

I had to wrap the export with the nextTranslate function otherwise I'd get translatios missing errors in the console (although they were there). Wrapping it like this fixed this error..

Sentry has an OpenAI assistant which provided the following possible fix:

To fix this, we need to make sure that the 'pageProps' property is defined before trying to access it. One way to do this is by adding a nullish coalescing operator (??) to the code. We can modify the line with the error like this:

react_1.default.createElement(I18nProvider_1.default, { lang: ((_a = props.pageProps) === null || _a === void 0 ? void 0 : _a.__lang) ?? props.__lang || defaultLocale })
This will check if 'props.pageProps' is null or undefined and use the value of 'props.__lang' or 'defaultLocale' as a fallback. Ta-da! Problem solved! 🎉

What did you expect to happen?
Nothing, there were absolutely no errors before implementing Sentry.

Are you willing to submit a pull request to fix this bug?
Maybe, if the above AI suggestion is valid.

EDIT: Typos.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant