4

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.

juliomalves
  • 42,130
  • 20
  • 150
  • 146
Peter Chavez
  • 53
  • 1
  • 7
  • 1
    Does `requests.fetchAllStock` contain the expected value? – juliomalves Sep 18 '21 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 Sep 21 '21 at 15:18
  • @juliomalves it just has the url link to that specific API – Peter Chavez Sep 21 '21 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 component. – Peter Chavez Sep 21 '21 at 20:21
  • @OsamaRashid this is the issue I'm facing^^^ – Peter Chavez Sep 21 '21 at 20:22
  • You can use [`getInitialProps`](https://nextjs.org/docs/api-reference/data-fetching/getInitialProps) in `_app` instead. – juliomalves Sep 21 '21 at 20:36
  • 1
    @juliomalves Yeah, sorry I replied to this message before I saw your comment on my other question! I appreciate it! – Peter Chavez Sep 21 '21 at 20:43
  • Does this help answer your question: [Persistent navigation in a NextJs \_app](https://stackoverflow.com/questions/65619238/persistent-navigation-in-a-nextjs-app/65628271#65628271)? – juliomalves Sep 21 '21 at 21:01
  • @juliomalves I just read your reply in that answer, and I'm now wondering if I should do that because my API headers will have my API key within it. You mentioned that once the user redirects to another page it will be client-side rendered, at this point would it expose my API key? – Peter Chavez Sep 21 '21 at 21:31
  • Yes, it would. You could use an [API route](https://nextjs.org/docs/api-routes/introduction#use-cases) where the request will be made against, and make the API request from there to hide the environment variable from the client-side. – juliomalves Sep 21 '21 at 21:34
  • @juliomalves ok great, I'll try that! Thanks again. – Peter Chavez Sep 21 '21 at 21:38

2 Answers2

6

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.

Ivan
  • 1,090
  • 1
  • 11
  • 17
  • 1
    Do you have any idea how to get this setting working? I want to be able to see what hooks are being updated from the profiler but it only shows "Why did this render: hooks 1, 3 and 6 changed" – Lucas Rahn Feb 15 '22 at 17:55
  • 6
    This is like the old joke where the man goes to a doctor and says "It hurts when I do this" and the doctor says "then don't do that." – Matt Korostoff Feb 17 '22 at 22:11
3

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.

amcnutt
  • 59
  • 2
  • 1
    this only works because refreshing the page turns off "Parse hooks" in react developer tools. Once you attempt to use the feature again, you will still get the error. – Matt Korostoff Feb 17 '22 at 22:14