无法从 Next.JS 中的节点“url”模块导入 URL class

Question

我将 next.js 与 webpack 5 一起使用，突然间我的 URL ZA2F2ED4FDC40 不再工作了。

运行npm run build会出现以下错误：

尝试导入错误：“URL”未从“url”导出（导入为“URL”）。

有问题的代码是：

import { URL } from "url";
import { useEffect, useState } from "react";

const Error404 = () => {
  // Server side url class is undefined on client so choose based on which is available
  const Url = globalThis?.URL || URL;

  const defaultImageUrl = new Url(defaultImage, PUBLIC_URL).href;
...

我正在尝试使用WHATWG URL API因为它应该是"Browser-compatible URL class"

此问题始于 webpack 5 并且在使用 webpack 4 时不存在。如何修复我的导入，以便 webpack 5 不再给我导入错误？

Answer 1

URL构造函数可作为全局 object 上的属性访问，您是否尝试在不导入的情况下使用它？

此外，由于您的Error404组件可能是通用的（应该在服务器端和客户端都可用），那么您不能只使用服务器端模块，它们可能无法为浏览器编译。 幸运的是， URL不是其中之一，它可以双面使用，甚至无需导入。