Next.js/Square API 错误：Fetch API 无法加载。 不支持 URL 方案“webpack-internal”

Question

尝试从 Square API 提取库存时出现此错误。

injectGlobalHook.js:1648 Fetch API cannot load webpack-internal:///./node_modules/@next/react-dev-overlay/lib/internal/ReactDevOverlay.js. URL scheme "webpack-internal" is not supported.

我正在将我的 React.js 项目转换为 Next.js，所以我只是想了解两者之间的差异。

最初，我使用config文件中的proxy提取数据以避免CORS Error ，但我知道这只是暂时的解决方法，因为我需要隐藏API_KEY 。

现在我正在尝试使用getServerSideProps在 Next.js 后端选项中以正确的方式调用 API

export async function getStaticProps() {
  const allStockObjects = await fetch(requests.fetchAllStock, {
    method: "GET",
    headers: headers,
  })
    .then((res) => res.json)
    .catch((err) => console.log(err));

  return {
    props: {
      allStockObjects,
    },
  };
}

这是我的导出，但我在一个组件中有完全相同的导出， POST请求以相同的方式完成到相同的 Square API，它工作得非常好。

我还在 Square Dashboard 上检查了我的APILogs ，但请求根本没有发送到 API。

关于此错误或 Square API 的在线信息并不多，所以我希望有人能提供帮助。

Answer 1

我刚刚遇到了类似的问题。 作为参考，我正在学习 Wes Bos 的 React/GraphQL 课程。 为了解决这个问题，我关闭了前端，然后删除了 .next 文件夹。 然后重新运行前端，以便生成一个新的 .next 文件夹。 我还清除了浏览器缓存。 在那之后，这个问题对我来说就消失了。

Answer 2

这个问题是由 React Devtoools 引起的，特别是设置Always parse hook names from source (may be slow) ——如果你在不需要时关闭它，它将防止错误。