I am following the steps at https://reactjs.org/docs/add-react-to-a-website.html to add React to an existing website. The process involves adding the scripts:

<script src="https://unpkg.com/react@17/umd/react.production.min.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js" crossorigin></script>

Then, enabling JSX by installing Babel:

npm init -y
npm install babel-cli@6 babel-preset-react-app@3

Finally, running Babel:

npx babel --watch src --out-dir . --presets react-app/prod

These steps work great, but if there is a syntax error in any of the JSX files in src, then Babel will fail to transpile the JSX file, and the transpiled JS file will never be written, so I am unable to debug the issue. Additionally, if there is a runtime error in the transpiled JS file, Google Chrome Developer Console will show the errors from the resulting transpiled JS file, and not the original JSX file. What is the simplest way to get the JSX syntax/runtime errors showing up in Google Chrome Developer Console?