Get source maps working

[jbphet]

I've been given some time in the current iteration to do some fixes and improvements for Rosetta. While working on one of the issues, I found that not having working source maps made it more difficult to debug problems and try out potential fixes. I should get source maps working so that future debugging is easier.

[jbphet]

I've discovered that source maps are already enabled in the vite config file vite.config.js with the directive sourcemap: true, and after messing around with the Chrome dev tools for a bit I was able to set breakpoints in a JSX component when it was being rendered and look at the state of the code. So that much is working, which should be helpful. However, when I try to use the "Components" tab of the React Developer Tools, I see this:

The components in this tree all look like minified names. I looked up how to turn off minification in vite, which was to add the option minfiy: false under the build option. When I do that, I see:

This is much nicer for debugging, and this is how I want the component tree to look when debugging, but I don't want to disable minification all the time for performance reasons. However, so far I'm unable to figure out how to tell the React Developer Tools to use the source map for this tree. I guess I'll dig a little more, then maybe see if I can turn off minification for dev builds but not for production builds.

[jbphet]

I've changed some configuration that makes it so that the command npm run dev will no longer minify the code, and this allows me to see full component names in the React Developer Tools "Components" tab. I don't know if this is the optimal way to do this, but it was the best I could do in a limited time frame.

The next thing to try is hot module reloading.

[jbphet]

I changed some more things in the configuration files such that npm run dev initiates a watch process for vite. This is working for hot module reload (basically an automatic restart) of the server, and is working in the client when a reload is done. Here is what we can do now that wasn't possible before:

• Set breakpoints in client-side JS and JSX code, then hit them and see non-minified code.
• See non-minified component names in the React Dev Tools.
• Do hot-module replacement, and thus fast turnaround for debugging code changes.

I think this is probably enough to call this task complete and close the issue, but I think I'll leave it open as I start to delve into specific fixes for Rosetta and actually use these capabilities in case I decide they need some further refinement.