Personalized application: uncaughtException: TypeError: Unable to access properties of an empty entity (reading 'prototype')

In my _app.js file, I am utilizing getInitialProps:

import App from "next/app";

function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />;
}

MyApp.getInitialProps = async ({ Component, ctx }) => {
  const appContext = App.getInitialProps(ctx);
  let pageProps = {};
  if (Component.getInitialProps)
    pageProps = await Component.getInitialProps(ctx);

  return { pageProps };
};

export default MyApp;

Despite the successful compilation of the app, an error occurs with the message:

unhandledRejection: TypeError: Cannot read properties of undefined (reading 'prototype')

This error is displayed in the terminal. To experience this issue, simply create a new nextjs app and implement the getInitialProps function.

Answer №1

Instead of following the documentation, I made a mistake with how I was destructuring the data. It's important to receive the entire context object for App.getInitialProps in order to solve the problem.

MyApp.getInitialProps = async (context) => {
...

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Steps for launching a hyperlink in a browser on Vue Native

I'm having trouble finding information on how to properly use the Linking component in react-native. The resources available are limited, and I'm not sure if I am implementing it correctly... Below is what I have in my template: <nb-button :o ...

What causes material-ui to consume excessive amounts of space?

My React project is being bundled using webpack, with a dependency on material-ui for the following components: material-ui/Dialog material-ui/styles/getMuiTheme material-ui/styles/MuiThemeProvider material-ui/FlatButton material-ui/TextField The webpack ...

Implementing a Scroll Bar within a Stack Component in Material UI

I've developed a component and now I'm looking to enable scrolling when it expands beyond the screen width <Stack direction="row"> <Stack gap={1} overflow="auto"> {fields.map((el, i) => ( ...

Change the right border style for the second and third ToggleButtons in the ToggleButtonGroup

I've been working on this for a few hours now and I can't seem to get it right. Currently, I'm using Mui v5 and trying to style the ToggleButtons to look like regular MUI buttons. So far, I was able to achieve this transformation: https:/ ...

Ways to access information stored in localStorage within a Next.js 13 middleware

I'm currently exploring Next.js and looking to incorporate role-based authentication with the help of Next.js middleware. Specifically, upon a successful user login, I aim to fetch their assigned role from the database and save it in localStorage usin ...

How to implement a self-invoking function in React JS like you would in regular JavaScript?

Is it possible to invoke the function good without triggering it from an event? I want it to run as soon as the page loads, similar to a self-invoking JavaScript function. Check out this example import React from 'react'; class App extends Reac ...

In TypeScript, an interface property necessitates another property to be valid

In the scenario where foo is false, how can I designate keys: a, b, c, bar as having an undefined/null/optional type? Put simply, I require these properties to be classified as mandatory only when foo is true. interface ObjectType { foo: boolean; a: nu ...

Created using Node.js version 10, this revolutionary React application is taking the

I inherited a main react application that hosts several other react applications. As new applications continue to be developed, I became concerned about the use of nodejs10 for each new project. Is it possible that issues may arise in the future due to t ...

Navigating with React Router v6 beyond the confines of individual components

When using react-router v5, I would create the history object like this: import { createBrowserHistory } from "history"; export const history = createBrowserHistory(); Then I would pass it to the Router like so: import { Router, Switch, Route, Link } from ...

A guide on exporting a constant in a React functional component

import { StarIcon } from '@heroicons/react/solid' import NumberFormat from 'react-number-format'; import Image from 'next/image' import { useDispatch, useSelector } from 'react-redux'; import { removeFromBasket, sele ...

Is it possible to toggle the status of two components simultaneously by pressing a single button?

I'm looking to create a series of onboarding modals using React and MUI. My goal is to transition from one modal to the next when a button within the modal is clicked. While I have explored some packages, they seem too complex for my needs. Can anyone ...

Is it possible to create a React app (using create-react-app) paired with an Express backend all within a single

I am currently working on a React front-end application with an Express backend setup that is functioning smoothly in my local environment as a proxy API server. During development, the React front-end is hosted on port 3001 while the Express server is ru ...

Facing a challenge with client-side errors upon deploying Next.js to Vercel, unfortunately, the logs aren't offering any helpful clues

After successfully deploying my NextJs application to Vercel, I encountered an issue. While the application runs perfectly when tested locally, I faced an error message upon opening it in the browser on Vercel. The browser console provided a link to the Re ...

How can I best fill the HTML using React?

After attempting to follow various React tutorials, I utilized an API to fetch my data. Unfortunately, the method I used doesn't seem to be very efficient and the code examples I found didn't work for me. I am feeling quite lost on how to proper ...

Displaying a React component within a StencilJS component and connecting the slot to props.children

Is there a way to embed an existing React component into a StencilJS component without the need for multiple wrapper elements and manual element manipulation? I have managed to make it work by using ReactDom.render inside the StencilJS componentDidRender ...

Using Node and Express to navigate to a URL within a React application

My goal is to open a user-provided URL in a reactjs application using node.js and express. I am incorporating material-ui and axios. Below is the code for the UI: This is a Proof of Concept for a UX testing project where the URL of the application to be ...

Acquiring the source or domain name in Next.js

Is there a way to retrieve the origin in Next.js without using window.location.origin? The useRouter().asPath method provides the relative pathname, but how can I access the origin URL like https://www.google.com? The Next.js Router docs do not provide in ...

Looking to disable the back button in the browser using next.js?

How can I prevent the browser's back button from working in next.js? // not blocked... Router.onRouteChangeStart = (url) => { return false; }; Does anyone know of a way to disable the browser's back button in next.js? ...

I encountered an issue with the mui TextField component in React where it would lose focus every time I typed a single character, after adding key props to

I'm encountering an issue with a dynamic component that includes a TextField. Whenever I add the key props to the parent div, the TextField loses focus after typing just one character. However, when I remove the key props, everything works as expected ...

Issue: Unable to locate the 'stream/web' module while attempting to execute 'npm start' for a Next.js application, even though the Node version is correct

When I attempted to set up a new application using npm create next-app --typescript, everything seemed to be going smoothly. However, upon trying to start the project with npm start, an error message popped up stating "Error: Cannot find module 'strea ...