缺少道具验证，反应/道具类型

Question

I am setting up a Next-React app, which I am deploying on Netlify.

I am getting an error on Netlify's deploy log: Netlify deploy log saying "Error: 'Component' is missing in props validation", "Error: 'pageProps' is missing in props validation" on my./pages/_app.js file.

VSC

import '../styles/globals.css';
import React from 'react';

MyApp.propTypes = {

};

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

I have tried to add

import PropTypes from 'prop-types';

which results in an error: 'PropTypes' is declared but its value is never read. 'PropTypes' is defined but never used.

I have tried to resolve this by doing

npm install --save prop-types --force 

("--force" because there were a lot of dependency conflicts with storybook). The issue persists.

Answer 1

The following is what you need:

MyApp.propTypes = {
  Component: PropTypes.elementType.isRequired,
  pageProps: PropTypes.shape({
    // your custom props here
  }),
};

pageProps may change depending of what you are fetching with getServerSideProps , getStaticProps , and so on.

As per the NextJs docs :

pageProps is an object with the initial props that were preloaded for your page by one of our data fetching methods, otherwise it's an empty object.