Search code examples
javascriptnode.jsreactjswebpackvercel

TypeError: Cannot read property 'hash' of null

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!

Solution

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