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) ——如果你在不需要時關閉它，它將防止錯誤。