在本地没问题（已知警告并且 CSS 渲染良好），但在 Vercel 上我的 Remix 应用程序收到此错误：
Hydration 失败，因为初始 UI 与服务器上呈现的内容不匹配。
业务逻辑运行良好，但 CSS 完全损坏。
我从头开始一个新项目，并逐一添加依赖项，并在每一步中部署到 Vercel。没有错误。样式化的组件渲染良好。所以依赖关系不是问题。
然后，我开始通过加载器从数据库中逐段获取数据，并将它们一一呈现在样式组件中。始终破坏 CSS 并产生错误的一件事是在渲染之前将日期时间对象转换为字符串：
const DateTimeSpan = styled.span`
font-size: 1rem;
`;
const hr = now.getHours();
const min = now.getMinutes();
<DateTimeSpan>
{`${hr}:${min}`}
</DateTimeSpan>
奇怪的是，只有当我将其格式化为仅渲染时间时，它才会中断。有了日期，就可以了：
const yr = now.getFullYear();
const mth = now.getMonth();
const dd = now.getDate();
<DateTimeSpan>
{`${yr}-${mth}-${dd}`}
<DateTimeSpan>
我无法解释这一点。
使用上面相同的最简单的项目，我和朋友已经确定，当我们尝试渲染hours时，具有样式组件的 CSS 会中断，即：
const hr = now.getHours();
<DateTimeSpan> …感觉这个问题已经被问了一百遍了。所以，这可能是一个很难回答的问题。我将为我的案例提供更多细节。也许会有帮助。
\n我正在使用 Next.js ^10.0.9 和next-seo ^4.22.0。我可以在 devtools 中看到元标记，但 FB 和 Twitter 以及许多其他元标记验证器无法获取它们。
\n从这里和其他地方的其他几个问题来看，似乎存在一些共识，只要它不在源代码中，即，如果我们“检查源代码”并且看不到它，那么它就不可用到刮刀。据我了解，这是因为这些机器人不运行渲染元标记所需的 JavaScript。
\n此页面源应该包含用于描述、标题、图像和其他一些内容的 opengraph 元标记，但它没有：
\n<!DOCTYPE html>\n<html lang="en">\n <head>\n <style data-next-hide-fouc="true">\n body{display:none}\n </style>\n <noscript data-next-hide-fouc="true">\n <style>\n body{display:block}\n </style>\n</noscript>\n\n<meta charSet="utf-8"/>\n<meta name="viewport" content="minimum-scale=1, initial-scale=1, width=device-width"/>\n<meta name="next-head-count" content="2"/>\n\n<noscript data-n-css=""></noscript>\n\n<link rel="preload" href="/_next/static/chunks/main.js?ts=1616232654196" as="script"/>\n<link rel="preload" href="/_next/static/chunks/webpack.js?ts=1616232654196" as="script"/>\n<link rel="preload" href="/_next/static/chunks/pages/_app.js?ts=1616232654196" as="script"/>\n<link rel="preload" href="/_next/static/chunks/pages/index.js?ts=1616232654196" as="script"/>\n\n<noscript id="__next_css__DO_NOT_USE__"></noscript>\n\n<style id="jss-server-side">html {\n box-sizing: border-box;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n}\n*, *::before, *::after {\n box-sizing: inherit;\n}\nstrong, b {\n font-weight: 700;\n}\nbody {\n color: rgba(0, 0, 0, …我上线了：
我正在关注 Gatsby 教程“7. 以编程方式从数据创建页面”。我无法解决此错误：
This dependency was not found:
?
* fs in ./node_modules/electron/index.js,
?
To install it, you can run: npm install --save fs
我已经跑npm install --save fs了，然后又试了一次。但是会出现同样的错误。目录的权限设置为a+rwx，到目前为止一切都安装得很好。
当我将此代码添加到 gatsby-node.js 时会发生此错误，如教程所述：
const { createFilePath } = require(`gatsby-source-filesystem`)
exports.onCreateNode = ({ node, getNode }) => {
if (node.internal.type === `MarkdownRemark`) {
console.log(createFilePath({ node, getNode, basePath: `pages` }))
}
}
我运行时的完整事件流程gatsby develop -p …
在 Remix 中action，我使用动态require来检索不同的 JSON 文件：
export async function action({ request }: { request: Request }) {
const body = await request.formData();
const country = body.get("country");
const cities = require(`~/cities_by_country/${country}.json`);
return cities;
}
这会产生“应用程序错误”：Error: Cannot find module '~/cities_by_country/Afghanistan.json'
事实证明，动态require才是问题所在。像这样对国家进行硬编码是有效的：
const cities = require(`~/cities_by_country/Afghanistan.json`);
我读到，添加"module": esnext（或 es2020 或 es2022）到 tsconfig.json 将启用动态导入，至少对于 React 来说是这样。我尝试过但得到了相同的结果。
我也阅读了这些文档但无济于事：
我缺少什么？
作为实践，我尝试在 DigitalOcean Ubuntu 16.04.4 上使用 Django Channels 2.1.1部署 Andrew Godwin 的多聊天示例。但是，我不知道如何在不停止 Channels 的 Daphne 服务器的情况下退出 Ubuntu 服务器。
现在，几乎我对部署的全部熟悉都来自本教程，这就是我部署站点的方式。但是根据 Channels 的文档，我必须在生产中运行这三个中的一个才能启动 Daphne：
因此，除了遵循 DigitalOcean 教程之外，我还运行了这些教程。第三个对我有用，网站运行良好。但是，如果我在 Ubuntu 上退出 shell，Daphne 也会停止。
本教程让 gunicorn 访问 sock 文件 ( --bind unix:/home/sammy/myproject/myproject.sock)，到目前为止，在我的研究中，我在 2018 年之前发布的几个网站上看到，以某种方式生成了 daphne.sock 文件。所以，我猜 Channels 部署类似？但我还没有看到有关如何完成的任何细节。
如何部署多聊天示例，以便我可以在不让 Daphne 停止的情况下退出 Ubuntu Web 服务器？
更新 2018 年 5 月 6 日，欧洲中部时间晚上 8 点：
我在下面尝试了 kagronick 的解决方案，并在 …
我建立了一个简单的GraphQL API，与gqlgen的“ 入门 ”教程极为相似。我可以使用curl成功查询它。但是我无法正确获取有关突变的curl请求。
schema.graphql：
type Screenshot {
id: ID!
url: String!
filename: String!
username: String!
description: String
}
input NewScreenshot {
id: ID!
url: String!
filename: String!
username: String!
description: String
}
type Mutation {
createScreenshot(input: NewScreenshot!): Screenshot!
deleteScreenshot(id: ID!): String!
}
type Query {
screenShots(username: String!): [Screenshot!]!
}
models_gen.go：
type NewScreenshot struct {
ID string `json:"id"`
URL string `json:"url"`
Filename string `json:"filename"`
Username string `json:"username"`
Description *string `json:"description"`
}
type Screenshot struct {
ID string `json:"id"`
URL string …