The error “URL scheme “webpack-internal” is not supported in nextjs” is a common error that can show up in many ways. In this blog, we will go through some of the ways you can fix this issue. Read on.

When Does The Error: “URL scheme “webpack-internal” is not supported in nextjs” Happen?

When running your next.js project, you might get the following error.

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.

How To Solve The Error: “URL scheme “webpack-internal” is not supported in nextjs”?

Approach 1: Remove browser cache

A cache is a designated storage space that gathers temporary data to speed up the loading of browsers, webpages, and applications. You can locate some type of cache on a computer, laptop, phone, online browser, or app. This could be a cache problem. So, you simply need to clear your browser cache and then remove the .next folder from the root of the project before re-running it. 

1. Firstly, remove the .next folder from the root of your project. 
2. Then, simply re-launch your project. 
3. After that, force a browser to reload to clear the cache. Shift+F5 / Cmd+Shift+R / Ctrl+Shift+R is the shortcut. 
4. Now, you have fixed your issue.

Approach 2: Turn this off while not in use

Excepting the approach mentioned above, there is another approach for you to solve the error “URL scheme “webpack-internal” is not supported in nextjs”. 

React Devtools, notably the setting Always parse hook names from source (may be slow), is the reason of this problem. The Chrome DevTools extension for the React JavaScript library is called React Developer Tools. If you work on React.js applications, it is a very helpful tool. The Chrome Developer Capabilities now supply React debugging tools thanks to this addon. You may check the props, state, hooks, etc. for each component and upgrade the React component tree that constructs the page with its assistance.

Therefore, turning this off while not in use would fix the problem. It is a great solution for you. Let’s do it to get your desired results.

Conclusion

We hope you enjoyed our article about the error. With this knowledge, we know that you can fix your error: “URL scheme “webpack-internal” is not supported in nextjs” quickly by following these steps! If you still have any other questions about fixing this syntax error, please leave a comment below. Thank you for reading!

Read more

→ Resolve The Error: ChunkLoadError: Loading chunk node_modules_next_dist_client_dev_noop_js failed in Next.js