破解 Next.js 包含 mdx 在 Cloudflare Pages 上的部署难题：解决 EvalError 错误的终极指南

Authors

引言

在使用 Cloudflare Pages 部署 Next.js 项目时，您可能会遇到一个令人头疼的错误：“EvalError: Code generation from strings disallowed for this context”。这个错误通常出现在您使用 Edge Runtime 部署应用时，特别是在项目中依赖了一些 Node.js 的 API。本文将深入探讨这个问题的根源，并提供解决方案，帮助您顺利将应用迁移到 Cloudflare Pages。

Edge Runtime 的特点与限制

在讨论解决方案之前，我们需要先了解 Edge Runtime 的一些基本特点。Edge Runtime 是 Cloudflare 提供的一种运行环境，它允许您在其全球边缘网络上执行代码，从而实现更快的响应时间和更好的用户体验。然而，这种高性能的代价是，Edge Runtime 只支持基于 Web 标准的 API，而不支持许多常见的 Node.js API，比如 fs 和 path。

支持的 Web 标准 API 示例：

  • fetch()
  • Request 和 Response 对象
  • URL 和 URLSearchParams

不支持的 Node.js API 示例：

  • fs/promises 中的 readdir()
  • path.join()

了解 "EvalError: Code generation from strings disallowed for this context"

当您在 Edge Runtime 中使用 Next.js 并尝试调用某些不受支持的 Node.js API 时，就会触发“EvalError: Code generation from strings disallowed for this context”错误。这通常是因为您的代码或其依赖项试图使用 eval() 或 new Function() 之类的代码生成技术，而这些技术在安全性方面存在问题，因此在 Edge 环境中被禁用。

例如，许多使用 fs 或 path 模块的包在内部使用了 eval() 或者 new Function()，这直接导致了上述错误。由于 Edge Runtime 的限制，这些代码生成操作是不允许的。

如何解决该问题

要解决这个错误，可以使用 react-markdown 代替 contentlayer/contentlayer2 支持 markdown，比如将原来定义的 mdx 组件改成如下代码：

import ReactMarkdown from "react-markdown";

// ...

export function Mdx({ code, images }: MdxProps) {
  return <ReactMarkdown components={components}>{code}</ReactMarkdown>;
}

这样部署到 Cloudflare Pages 的时候就不会再报 EvalError 的错误。

结论

部署 Next.js 到 Cloudflare Pages 时，可能会遇到“EvalError: Code generation from strings disallowed for this context”错误。通过理解 Edge Runtime 的特点并采取适当的措施，如避免使用不兼容的 Node.js API 和动态代码生成，您可以有效地解决这个问题，确保应用在全球范围内快速稳定地运行。

如果您正计划将 Next.js 部署到 Cloudflare Pages，请确保您的代码兼容 Edge Runtime，并遵循本文的建议，这样可以让您的迁移过程更加顺畅。

希望这篇博客对您有所帮助！如果还有其他问题或需要进一步的指导，请随时告知我。

Share this content