javascript - Next.jsSquare API error: Fetch API cannot load. URL scheme "webpack-internal" is not supported -

admin管理员组

文章数量:1277406

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.

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.

• javascript
• reactjs
• next.js
• square

Share Improve this question Follow edited Sep 18, 2021 at 16:47 juliomalves 50.4k2323 gold badges177177 silver badges168168 bronze badges asked Sep 17, 2021 at 22:46 Peter ChavezPeter Chavez 6311 silver badge77 bronze badges 11

• 1 Does requests.fetchAllStock contain the expected value? – juliomalves Commented Sep 18, 2021 at 16:48
• in my case this was due to a syntax error that webpack couldn’t detect (it was a duplicated variable name). could you please provide more code? what do you pass in headers? what does requests.fetchAllStock return? – Osama Rashid Commented Sep 21, 2021 at 15:18
• @juliomalves it just has the url link to that specific API – Peter Chavez Commented Sep 21, 2021 at 20:13
• @juliomalves I found out that the error was due to me calling getStaticProps at the _app.js file(next.js blocks API calls at that level). I'm still having trouble spreading that data throughout my application though. because I need allStock within every page, just in case a user shares a specific page. At the moment I'm calling the fetchAllStock API on every page but I would like it to be called once at the highest level ponent. – Peter Chavez Commented Sep 21, 2021 at 20:21
• 1 @juliomalves Yeah, sorry I replied to this message before I saw your ment on my other question! I appreciate it! – Peter Chavez Commented Sep 21, 2021 at 20:43

 |  Show 6 more ments

2 Answers 2

Sorted by: Reset to default 7

This issue is caused by React Devtoools, specifically the setting Always parse hook names from source (may be slow) — if you turn this off when not needed it will prevent the error.

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.

本文标签：