title: React Next.js - Multiple Layout yarn build fail
body: <p>At first i restructure layout and page following this <a href="https://alexjohnsuarez.medium.com/next-js-multiple-layouts-patterns-with-typescript-b3b8385a8c4" rel="nofollow noreferrer">Next.JS: Multiple layouts patterns with typescript</a></p>
  <p>when running site at local it work fine with no error.But when build with yarn predeploy(npm run clean &amp;&amp; next build) this error is happen.</p>
  <pre><code>info  - SWC minify release candidate enabled. https://nextjs.link/swcmin
  info  - Linting and checking validity of types  
  info  - Creating an optimized production build  
  info  - Compiled successfully
  info  - Collecting page data  
  [    ] info  - Generating static pages (0/7)Error: Minified React error #31; visit https://reactjs.org/docs/error-decoder.html?invariant=31&amp;args[]=object%20with%20keys%20%7Bchildren%7D for the full message or use the non-minified dev environment for full errors and additional helpful warnings.
      at Z (/Users/blackjack/Documents/Dev Personal/portnext/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:76:490)
      at Zc (/Users/blackjack/Documents/Dev Personal/portnext/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:71:479)
      at Z (/Users/blackjack/Documents/Dev Personal/portnext/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:76:89)
      at Zc (/Users/blackjack/Documents/Dev Personal/portnext/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:70:481)
      at Z (/Users/blackjack/Documents/Dev Personal/portnext/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:76:89)
      at Zc (/Users/blackjack/Documents/Dev Personal/portnext/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:74:209)
      at Z (/Users/blackjack/Documents/Dev Personal/portnext/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:76:89)
      at Zc (/Users/blackjack/Documents/Dev Personal/portnext/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:70:481)
      at Z (/Users/blackjack/Documents/Dev Personal/portnext/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:76:89)
      at Zc (/Users/blackjack/Documents/Dev Personal/portnext/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:70:481)
  
  Error occurred prerendering page &quot;/500&quot;. Read more: https://nextjs.org/docs/messages/prerender-error
  Error: Minified React error #31; visit https://reactjs.org/docs/error-decoder.html?invariant=31&amp;args[]=object%20with%20keys%20%7Bchildren%7D for the full message or use the non-minified dev environment for full errors and additional helpful warnings.
      at Z (/Users/blackjack/Documents/Dev Personal/portnext/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:76:490)
      at Zc (/Users/blackjack/Documents/Dev Personal/portnext/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:71:479)
      at Z (/Users/blackjack/Documents/Dev Personal/portnext/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:76:89)
      at Zc (/Users/blackjack/Documents/Dev Personal/portnext/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:70:481)
      at Z (/Users/blackjack/Documents/Dev Personal/portnext/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:76:89)
      at Zc (/Users/blackjack/Documents/Dev Personal/portnext/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:74:209)
      at Z (/Users/blackjack/Documents/Dev Personal/portnext/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:76:89)
      at Zc (/Users/blackjack/Documents/Dev Personal/portnext/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:70:481)
      at Z (/Users/blackjack/Documents/Dev Personal/portnext/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:76:89)
      at Zc (/Users/blackjack/Documents/Dev Personal/portnext/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:70:481)
  info  - Generating static pages (7/7)
  
  &gt; Build error occurred
  Error: Export encountered errors on following paths:
          /_error: /500
      at /Users/blackjack/Documents/Dev Personal/portnext/node_modules/next/dist/export/index.js:395:19
      at runMicrotasks (&lt;anonymous&gt;)
      at processTicksAndRejections (node:internal/process/task_queues:96:5)
      at async Span.traceAsyncFn (/Users/blackjack/Documents/Dev Personal/portnext/node_modules/next/dist/trace/trace.js:79:20)
      at async /Users/blackjack/Documents/Dev Personal/portnext/node_modules/next/dist/build/index.js:1094:21
      at async Span.traceAsyncFn (/Users/blackjack/Documents/Dev Personal/portnext/node_modules/next/dist/trace/trace.js:79:20)
      at async /Users/blackjack/Documents/Dev Personal/portnext/node_modules/next/dist/build/index.js:971:17
      at async Span.traceAsyncFn (/Users/blackjack/Documents/Dev Personal/portnext/node_modules/next/dist/trace/trace.js:79:20)
      at async Object.build [as default] (/Users/blackjack/Documents/Dev Personal/portnext/node_modules/next/dist/build/index.js:64:29)
  error Command failed with exit code 1.
  info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
  </code></pre>
  <p>what is a problem?</p>
  <p><strong>additionnal info</strong></p>
  <p><strong>_app.tsx</strong></p>
  <pre><code>import React from &quot;react&quot;;
  import { ReactElement} from &quot;react&quot;;
  import type { AppProps } from 'next/app'
  import { ThemeProvider } from &quot;@material-tailwind/react&quot;;
  import PageWithLayoutType from &quot;../pageWithLayouts&quot;;
  import &quot;@/styles/globals.css&quot;;
  
  type AppLayoutProps = AppProps &amp; {
    Component: PageWithLayoutType;
    pageProps: any;
  };
  
  function App({ Component, pageProps }: AppLayoutProps) {
    const Layout =
      Component.layout || ((children: ReactElement) =&gt; &lt;&gt;{children}&lt;/&gt;);
    return (
      &lt;ThemeProvider&gt;
        &lt;Layout&gt;
          &lt;Component {...pageProps} /&gt;
        &lt;/Layout&gt;
      &lt;/ThemeProvider&gt;
    );
  }
  export default App;
  </code></pre>
  <p><strong>pageWithLayouts.tsx</strong></p>
  <pre><code>import { NextPage } from &quot;next&quot;
  import { ReactElement } from &quot;react&quot;
  import MainLayout from &quot;@/src/components/layoutIndex&quot;
  import PortfolioLayout from &quot;@/src/components/layoutPortfolio&quot;
  import AdminLayout from &quot;@/src/components/layoutAdmin&quot;
  import BlogLayout from &quot;@/src/components/layoutBlog&quot;
  import WorkLayout from &quot;@/src/components/layoutWork&quot;
  
  export type PageWithMainLayoutType = NextPage &amp; { layout: typeof MainLayout }
  export type PageWithPortfolioLayoutType = NextPage &amp; { layout: typeof PortfolioLayout }
  export type PageWithBlogLayoutType = NextPage &amp; { layout: typeof BlogLayout }
  export type PageWithWorkLayoutType = NextPage &amp; { layout: typeof WorkLayout }
  export type PageWithAdminLayoutType = NextPage &amp; { layout: typeof AdminLayout }
  
  export type PageWithLayoutType =
   | PageWithMainLayoutType
   | PageWithPortfolioLayoutType 
   | PageWithBlogLayoutType 
   | PageWithWorkLayoutType 
   | PageWithAdminLayoutType
  
  export type LayoutProps = ({
   children,
  }: {
   children: ReactElement
  }) =&gt; ReactElement
  export default PageWithLayoutType
  </code></pre>
  <p><strong>work.tsx</strong></p>
  <pre><code>import WorkLayout from &quot;../components/layoutWork&quot;;
  
  type Props = {};
  
  const Work = (props: Props) =&gt; {
    return (
      &lt;&gt;
        &lt;div&gt;Work&lt;/div&gt;
      &lt;/&gt;
    );
  };
  Work.layout = WorkLayout;
  export default Work;
  </code></pre>
  <p><strong>layoutWork.tsx</strong></p>
  <pre><code>import type { LayoutProps } from &quot;../pageWithLayouts&quot;
  const WorkLayout: LayoutProps = ({ children }) =&gt; {
    return (
      &lt;div&gt;
        {children}
      &lt;/div&gt;
    )
  }
  export default WorkLayout
  </code></pre>
  <p><strong>Current progress ========</strong></p>
  <p>i try change tsconfig.json =&gt; &quot;strict&quot;: false.
  now whenever i run (build or dev). it's show this error.</p>
  <pre><code>info  - SWC minify release candidate enabled. https://nextjs.link/swcmin
  info  - Linting and checking validity of types .Failed to compile.
  
  ./src/pages/_app.tsx:27:6
  Type error: Type '{ children: Element; }' is missing the following properties from type 'ReactElement&lt;any, string | JSXElementConstructor&lt;any&gt;&gt;': type, props, key
  
    25 | return (
    26 |   &lt;ThemeProvider&gt;
  &gt; 27 |     &lt;Layout&gt;
       |      ^
    28 |       &lt;Component {...pageProps} /&gt;
    29 |     &lt;/Layout&gt;
    30 |     &lt;/ThemeProvider&gt;
  
  &gt; Build error occurred
  Error: Call retries were exceeded
      at ChildProcessWorker.initialize (/Users/blackjack/Documents/Dev Personal/portnext/node_modules/next/dist/compiled/jest-worker/index.js:1:11661)
      at ChildProcessWorker._onExit (/Users/blackjack/Documents/Dev Personal/portnext/node_modules/next/dist/compiled/jest-worker/index.js:1:12599)
      at ChildProcess.emit (node:events:527:28)
      at Process.ChildProcess._handle.onexit (node:internal/child_process:291:12) {
    type: 'WorkerError'
  }
  </code></pre>
  <p>I think it missing some &quot;props&quot; or propertie that come with it.
  But i don't know typescipt well enough to fix this.
  Any help or even keyword is Greatly appreciated.</p>