[DevTools Bug]: Hook parsing failed for default Next.js configuration

[rossng]

Website or app

https://github.com/vercel/next.js/tree/canary/examples/blog-starter

Repro steps

1. Create an instance of the official Next.js blog starter template, e.g. yarn create next-app --example blog-starter blog-starter
2. Run yarn dev (or equivalent) inside the created project.
3. Go to the webpage (normally http://localhost:3000) and open the React devtools
4. Enable 'Always parse hook names from source' in the devtool options
5. Observe the error 'Hook parsing failed':

Note: Next.js does not allow you to change the source map format (devtool) setting so it's rather difficult to work around this issue.

How often does this bug happen?

Every time

DevTools package (automated)

No response

DevTools version (automated)

No response

Error message (automated)

No response

Error call stack (automated)

No response

Error component stack (automated)

No response

GitHub query string (automated)

No response

[primerch]

same issue

[diogovalada]

I get the same. Any idea on how to fix this?

[shynsky]

same story

[alextaymx]

I get the same issue on NExt js 12 and dev tools

[jacknight]

Does there exist any workaround for this?

[AngelMTR]

same issue nextjs 13

[sasa97972]

Same issue

[kjmph]

I got pretty frustrated not being able to debug Next.js. I didn't resolve it entirely, sorry all. However, I did notice that I can install a protocol handler for webpack-internal and could get further along in parsing Hooks. For instance, adding this to react-devtools causes errors that were captured in a screenshot.

diff --git a/packages/react-devtools/app.js b/packages/react-devtools/app.js
index 4b4f22ab3..31a2c7f9f 100644
--- a/packages/react-devtools/app.js
+++ b/packages/react-devtools/app.js
@@ -5,8 +5,9 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-const {app, BrowserWindow} = require('electron'); // Module to create native browser window.
+const {app, BrowserWindow, protocol} = require('electron'); // Module to create native browser window.
 const {join} = require('path');
+const url = require('url');
 const os = require('os');
 
 const argv = require('minimist')(process.argv.slice(2));
@@ -14,6 +15,8 @@ const projectRoots = argv._;
 
 let mainWindow = null;
 
+protocol.registerSchemesAsPrivileged([ { scheme: 'webpack-internal', privileges: { secure: true, standard: true, supportFetchAPI: true } } ]);
+
 app.on('window-all-closed', function () {
   app.quit();
 });
@@ -57,4 +60,9 @@ app.on('ready', function () {
   mainWindow.on('closed', function () {
     mainWindow = null;
   });
+
+  protocol.registerFileProtocol('webpack-internal', (request, callback) => {
+    const filePath = url.fileURLToPath('file:///Users/kjmph/test_repo/' + request.url.slice('webpack-internal://'.length));
+    callback(filePath);
+  });
 });

In short, perhaps if webpack-internal was recognized as a protocol and react-devtools searched the CWD for files, maybe we would get a little further along. Note, Next.js has a similar issue vercel/next.js#32432 around this.

I do notice that Next.js has multiple sourceURLs and sourceMappingUrls in its compiled output, so perhaps that is why there are errors? I haven't looked into this in sometime, so could use a second set of eyes.

[kjmph]

Oh hey, look at that, it was just because I had Sentry loaded and it causes duplicate source maps? Anyway, I removed Sentry (in fact, went back to a new Next.js starter project) and the error went away (it sees a sample custom hook name):

I'll raise this in the sister issue in vercel/next.js#32432

[kjmph]

I think after quite a bit of head scratching, I put all my ruminating in that next.js issue, that I came to the conclusion that React Devtools could close this issue, as if I create a blog-starter I can still see the Hook names even though parsing fails:

Ultimately, I wanted to see the state variable name in React Devtools, which I thought the error message was pointing to. However, perhaps the real fix is to not throw errors when the source url cannot be found yet the Hook name can still be parsed from the source map? (as I believe Next.js/webpack puts the source in the JSON encoding, which is how Devtools can read this?)