TypeError: Cannot read property 'hash' of null-CodePudding

I'm running into issues deploying to Vercel after making some changes. Running with npm run dev works but after deploying to Vercel (which runs with npm run build) it coughs up an error:

09:53:00.125 TypeError: Cannot read property 'hash' of null 09:53:00.125 at callback (/vercel/path0/node_modules/next/dist/compiled/webpack/bundle5.js:59190:46) 09:53:00.125 at /vercel/path0/node_modules/next/dist/compiled/webpack/bundle5.js:57683:39 09:53:00.125 at /vercel/path0/node_modules/next/dist/compiled/webpack/bundle5.js:135587:5 09:53:00.125 at Hook.eval [as callAsync] (eval at create (/vercel/path0/node_modules/next/dist/compiled/webpack/bundle5.js:33832:10), :6:1) 09:53:00.126 at AsyncQueue._handleResult (/vercel/path0/node_modules/next/dist/compiled/webpack/bundle5.js:135557:21) 09:53:00.126 at /vercel/path0/node_modules/next/dist/compiled/webpack/bundle5.js:135540:11 09:53:00.126 at /vercel/path0/node_modules/next/dist/compiled/webpack/bundle5.js:59794:14 09:53:00.126 at /vercel/path0/node_modules/next/dist/compiled/webpack/bundle5.js:59452:6 09:53:00.126 at done (/vercel/path0/node_modules/next/dist/compiled/neo-async/async.js:1:10308) 09:53:00.126 at /vercel/path0/node_modules/next/dist/compiled/webpack/bundle5.js:59356:13 09:53:00.126 at /vercel/path0/node_modules/next/dist/compiled/webpack/bundle5.js:135587:5 09:53:00.126 at Hook.eval [as callAsync] (eval at create (/vercel/path0/node_modules/next/dist/compiled/webpack/bundle5.js:33832:10), :6:1) 09:53:00.127 at AsyncQueue._handleResult (/vercel/path0/node_modules/next/dist/compiled/webpack/bundle5.js:135557:21) 09:53:00.127 at /vercel/path0/node_modules/next/dist/compiled/webpack/bundle5.js:135540:11 09:53:00.127 at Array. (/vercel/path0/node_modules/next/dist/compiled/webpack/bundle5.js:59296:4) 09:53:00.128 at runCallbacks (/vercel/path0/node_modules/next/dist/compiled/webpack/bundle5.js:20480:15) 09:53:00.155 Error: Command "npm run build" exited with 1

Sorry if the formatting makes it hard to read, I'm not too sure how to copy over the error log without the format running.

All I changed can be boiled down to adding a Layout component which uses NavBar, and Footer components. I then modified the _app.js file to use said layout:

import React from "react";
import App from "next/app";
import "tailwindcss/tailwind.css";
import Layout from "../components/Layout";

class MyApp extends App {
  render() {
    const { Component, pageProps, router } = this.props;

    if (router.pathname.startsWith("/shop/")) { //router path check to include/exclude Layout e.g: paths starting with /shop
      return (
        <Layout>
          <Component {...pageProps}></Component>
        </Layout>
      );
    }

    return <Component {...pageProps}></Component>;
  }
}

export default MyApp;

Any insights regarding this error is much appreciated!

CodePudding user response：

Don't we import Component which is a reserved keyword from react module like below and used for extending a class

import React, { Component } from "react";
class SomeNavComponent extends Component {

Also, it looks like the issue is with the naming of a component, in my opinion

const { Component, pageProps, router } = this.props;

CodePudding user response：

Didn't change anything, after pushing to Vercel again the error didn't pop up, so its "fixed" now I guess.