无法从下一步中的节点'url'模块导入 URL 类.JS

Question

我在webpack 5中使用next.js，突然间我的URL类导入无法再工作了。

运行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;
...

我尝试使用WHATWGURLneneneba API，因为它应该是"Browser-compatible URL class"

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

Answer 1

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

此外，由于Error404组件可能是通用的(应该在服务器端和客户端都可用(，因此您不能只使用服务器端模块，它们可能不会为浏览器编译。幸运的是，URL不是其中之一，它可以在两侧使用，甚至不需要导入。