Repository navigation
[DevTools Bug]: Hook names fail to parse if source file for Component is an html file #22319
Description
When testing our fixture in Safari (./fixtures/devtools/standalone/index.html) with the standalone build if DevTools, I noticed that we were unable to parse hook names because the source file where the components are defined isn't a JavaScript file, and instead an HTML file (as in index.html), which contains HTML code, and some JS inside script tags, so the babel parser fails to parse the file.
Specifically:
// parseSourceAndMetadata.js
const originalSourceAST = withSyncPerfMeasurements(
'[@babel/parser] parse(originalSourceCode)',
() =>
parse(originalSourceCode, {
sourceType: 'unambiguous',
plugins: ['jsx', plugin],
}),
);In the above code, the call to parse fails because originalSourceCode is actually html (with JS inside) like:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>TODO List</title>
<!-- ... -->
<body>
<div id="root"></div>
<script type="text/javascript">
const { useState } = React;
function App() {
const [count, setCount] = useState(0);
return null;
}
ReactDOM.render(React.createElement(App), document.getElementById("root"));
</script>
</body>
And parse expects actual JS code.
DevTools should handle the case when source files aren't JS files, and still be able to extract out the hook names, or fail more gracefully. As of #22320, we log to the console a slightly better error message when this happens, as opposed to an obscure parsing error.
Repro steps
- Run standalone app
- Open fixtures file in safari: ./fixtures/devtools/standalone/index.html
- Try getting hook names, observe that parsing source files fails
Activity
bvaughn commentedon Sep 15, 2021
I think the title of this issue might be misleading. (I might be wrong but) I don't think the cause is an inline
<script type="text/javascript">tag but rather the fact that our demo uses<script type="text/babel">which has non-standard JS syntax (JSX) that requires a special plug-in to parse.We could look into how much weight this additional plug-in would add to the bundle, but initially I lean towards saying that should just explicitly not support JSX syntax.
Again though, I could be wrong and maybe it really is the inline tag part. 😄
[-][DevTools Bug]: Hook names fail to parse if source JS is defined in an htm file with inline script tags[/-][+][DevTools Bug]: Hook names fail to parse if source JS is defined in an html file with inline script tags[/+][-][DevTools Bug]: Hook names fail to parse if source JS is defined in an html file with inline script tags[/-][+][DevTools Bug]: Hook names fail to parse if source file for javascript is an html file[/+]jstejada commentedon Sep 15, 2021
@bvaughn so i tested this by making the index.html file only contain a regular
"text/javascript"script tag, without jsx or anything:and our call to
babel.parse()still fails for parse the file, I presume becauseparse()expects the input to be JS , but we are passing html, so it fails to parse the html outside the script tags.not sure what the best approach would be here, maybe try to extract the JS from script tags if we detect that the source file is an html file?
[-][DevTools Bug]: Hook names fail to parse if source file for javascript is an html file[/-][+][DevTools Bug]: Hook names fail to parse if source file for Component is an html file[/+]bvaughn commentedon Sep 15, 2021
The "HTML" you're referring to above is also JSX :)
jstejada commentedon Sep 15, 2021
we discussed offline and there was confusion about what I was referring to in this issue. I updated the summary to try to clarify the problem.
bvaughn commentedon Nov 4, 2021
For added context, the error I'm seeing in the console is:
This happens before the parsing step. I wonder what has changed since you originally posted this?
Digging in further, that's because
hookSourceis missing a file name, e.g.:Looking at the
error-stack-parsersource, it seems like an undefinedfileNameindicates a stack frame of either"eval"or"<anonymous>". Sure enough, looking at theErrorstack for one of our components defined in an HTML file like this, I see e.g." at ListItem (<anonymous>:135:22)".I'm not sure if there's much we can do about this.
I'm seeing this same behavior (an undefined
fileName) when using both Chrome and Safari.akgupta0777 commentedon Dec 4, 2021
This seems easy to fix, Maybe I can fix this.
@bvaughn or @jstejada
Any other information or guidance you wanna give for a headstart.
Also, I want to know about how hook name parsing is done in react devtools. Any resources for that will be great for me.