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