TypeError：无法读取 null 的属性“哈希”答案

【问题标题】：TypeError: Cannot read property 'hash' of nullTypeError：无法读取 null 的属性“哈希”
【发布时间】：2021-12-08 17:32:49
【问题描述】：

在进行一些更改后，我在部署到 Vercel 时遇到了问题。使用 npm run dev 运行可以，但在部署到 Vercel（使用 npm run build 运行）后会出现错误：

09:53:00.125 TypeError: 无法读取 null 的属性“哈希” 09:53:00.125 回调 (/vercel/path0/node_modules/next/dist/compiled/webpack/bundle5.js:59190:46) 09:53:00.125 在 /vercel/path0/node_modules/next/dist/compiled/webpack/bundle5.js:57683:39 09:53:00.125 在 /vercel/path0/node_modules/next/dist/compiled/webpack/bundle5.js:135587:5 09:53:00.125 在 Hook.eval [as callAsync] (创建时的 eval (/vercel/path0/node_modules/next/dist/compiled/webpack/bundle5.js:33832:10), :6:1) 09:53:00.126 在 AsyncQueue._handleResult (/vercel/path0/node_modules/next/dist/compiled/webpack/bundle5.js:135557:21) 09:53:00.126 在 /vercel/path0/node_modules/next/dist/compiled/webpack/bundle5.js:135540:11 09:53:00.126 在 /vercel/path0/node_modules/next/dist/compiled/webpack/bundle5.js:59794:14 09:53:00.126 在 /vercel/path0/node_modules/next/dist/compiled/webpack/bundle5.js:59452:6 09:53:00.126 完成（/vercel/path0/node_modules/next/dist/compiled/neo-async/async.js:1:10308） 09:53:00.126 在 /vercel/path0/node_modules/next/dist/compiled/webpack/bundle5.js:59356:13 09:53:00.126 在 /vercel/path0/node_modules/next/dist/compiled/webpack/bundle5.js:135587:5 09:53:00.126 在 Hook.eval [as callAsync]（创建时的 eval (/vercel/path0/node_modules/next/dist/compiled/webpack/bundle5.js:33832:10), :6:1) 09:53:00.127 在 AsyncQueue._handleResult (/vercel/path0/node_modules/next/dist/compiled/webpack/bundle5.js:135557:21) 09:53:00.127 在 /vercel/path0/node_modules/next/dist/compiled/webpack/bundle5.js:135540:11 09:53:00.127 在阵列。 (/vercel/path0/node_modules/next/dist/compiled/webpack/bundle5.js:59296:4) 09:53:00.128 在 runCallbacks (/vercel/path0/node_modules/next/dist/compiled/webpack/bundle5.js:20480:15) 09:53:00.155 错误：命令“npm run build”以 1 退出

抱歉，如果格式难以阅读，我不太清楚如何在不运行格式的情况下复制错误日志。

我所做的所有更改都可以归结为添加一个使用NavBar, and Footer 组件的Layout 组件。然后我修改了_app.js 文件以使用上述布局：

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;

非常感谢有关此错误的任何见解！

【问题讨论】：

标签： javascript node.js reactjs webpack vercel

【解决方案1】：

我们不要像下面这样从 React 模块中导入 Component，它是一个保留关键字，用于扩展一个类

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

另外，我认为问题在于组件的命名

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

【讨论】：

感谢您的回复，但无需更改任何内容即可自行修复。我只好再次推到vercel。很奇怪，但我猜就是这样。

【解决方案2】：

没有改变任何东西，再次推送到 Vercel 后错误没有弹出，所以我猜现在它“已修复”。

【讨论】：