未捕获的错误：缩小的 React 错误 #425

Question

当我的应用程序转移到生产环境时，出现了这些错误，我不知道它可能是什么。

我在用着：

    // package.json
    "dependencies": {
    "@supabase/supabase-js": "^1.35.6",
    "date-fns": "^2.29.2",
    "duration-fns": "^3.0.1",
    "next": "^12.2.5",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-hook-form": "^7.34.2",
    "react-icons": "^4.4.0",
    "uuid": "^8.3.2"
  },
  "devDependencies": {
    "autoprefixer": "^10.4.8",
    "postcss": "^8.4.16",
    "tailwindcss": "^3.1.8"
  }

Answer 1

我注意到date-fns你的依赖关系。我怀疑您正在渲染中创建一个新日期。

组件中初始渲染时计算和使用的任何不纯值（例如当前日期）都会产生内容不匹配：

Text content does not match server-rendered HTML.

解决方案

解决方案是在 内创建您的日期useEffect。现在只有客户端计算新日期并更新 DOM。

一个例子可能是改变这个：

export default function App() {
  return <div>{format(new Date(), "MM.dd.yyyy")}</div>;
}

对此：

export default function App() {
  const [date, setDate] = useState(null);

  useEffect(() => {
    setDate(format(new Date(), "MM.dd.yyyy"));
  }, []);

  return <div>{date}</div>;
}

现在，仅在安装到客户端后才计算不纯值，并且水合错误中引用的不匹配将得到解决。

Answer 2

目前尚不清楚问题出在哪里，我猜您使用的是自定义捆绑解决方案/手动设置。你认为你会被说服转向像 Create React App 这样的东西吗？