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

【问题标题】：Next.js/Square API error: Fetch API cannot load. URL scheme "webpack-internal" is not supportedNext.js/Square API 错误：无法加载 Fetch API。不支持 URL 方案“webpack-internal”
【发布时间】：2021-09-17 22:46:51
【问题描述】：

我在尝试从 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。

现在我尝试在 Next.js 后端选项中使用 getServerSideProps 以正确的方式调用 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 的网上不多，所以我希望有人能提供帮助。

【问题讨论】：

requests.fetchAllStock 是否包含预期值？
在我的情况下，这是由于 webpack 无法检测到的语法错误（它是重复的变量名）。你能提供更多代码吗？你在标题中传递了什么？ requests.fetchAllStock 返回什么？
@juliomalves 它只有指向特定 API 的 url 链接
@juliomalves 我发现错误是由于我在 _app.js 文件中调用 getStaticProps 造成的（next.js 在该级别阻止 API 调用）。不过，我仍然无法在整个应用程序中传播这些数据。因为我在每个页面中都需要allStock，以防万一用户共享特定页面。目前我在每个页面上调用fetchAllStock API，但我希望它在最高级别的组件中调用一次。
@juliomalves 是的，抱歉，在看到您对我的其他问题的评论之前，我回复了此消息！我很感激！

标签： javascript reactjs next.js square

【解决方案1】：

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

【讨论】：

您知道如何使此设置生效吗？我希望能够从分析器中查看正在更新哪些钩子，但它只显示“为什么渲染：钩子 1、3 和 6 已更改”
这就像一个老笑话，男人去看医生时说“我这样做会很痛”，而医生说“那就不要那样做”。

【解决方案2】：

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

【讨论】：

这只是因为刷新页面会关闭反应开发者工具中的“解析挂钩”。一旦您再次尝试使用该功能，您仍然会收到错误消息。