Next.js/Square API error: Fetch API cannot load. URL scheme "webpack-internal" is not supported

Question

I'm having this error when trying to pull stock from 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.

I'm converting my React.js project into Next.js, so I'm just trying to learn the differences between the two.

Initially, I pulled the data with a proxy in my config file to avoid a CORS Error , but knew that was just a workaround for the time being because I needed to hide the API_KEY .

Now I'm trying to call the API the right way in Next.js backend options with getServerSideProps

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,
    },
  };
}

Here is my export, but I have the exact same export in a Component with a POST request done the same way to the same Square API and it works perfectly fine.

I also check my APILogs on my Square Dashboard and the request never makes it to the API at all.

Not much online on this error or Square API for that matter, so I hope someone could help.

Answer 1

I just ran into a similar issue. For reference I am taking Wes Bos's course on React/ GraphQL. To get past the issue I shut down the frontend and then deleted the .next folder. Then re-ran the frontend so a new .next folder gets generated. I also cleared the browser cache. After that the issue went away for me.

Answer 2

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