Sketch Widget Unable to Change Active Tool

Question

I've been working with the Sketch Widget in my react app to try notify my app of changes in the activeTool. I was able to get this working locally using "watch" from reactiveUtils :

However, when this gets deployed onto our dev & prod environments, we encounter the following error. I've tried removing all the custom handlers we tack into the props for "new GraphicsLayer(props)" and still encounter this error. Functionally, it prevents changing the active tool to anything other than the default.

This error appears to come from within the Sketch widget component. Can you provide guidance or troubleshooting steps to fix this issue?

Thanks.

AndyGup · Answer

Thanks for Stackblitz. I tried a few things and wasn't able to repro the prod build issue. Since it does runs locally, you'll need to dig deeper. Here are some recommendations.

- Run and compare 'npm list' on both dev and prod. Make sure both builds have the exact same dependency versions. A small difference in versions could be the cause of the problem, of course.

- Run a 'diff' against the main bundle files from both dev and prod. I understand some variable names may change, but try to decipher if there are substantive differences.

- Double check that the prod build is using the same bundler configurations.

FlockSafety · Answer

Hey Andy, I was thinking it may be something in line with our build tooling locally vs when deployed. I'm not aware of any differences since they both use the same build scripts via craco.

I copied over the section of relevant code to the sample repo in Stackblitz that you linked. After getting it ported over, I noticed 2 things:

https://stackblitz.com/edit/github-mj3nqv?file=src%2FCustomApp.jsx,src%2Fmain.jsx,src%2FApp.jsx

* The originally posted error does not occur. This is actually consistent with my experience locally, as I only experienced the issue when the code was deployed on a server. 
* Whenever I toggle a tool, it flickers to "null" for the pointer option. I have a console.log statement in the Stackblitz that writes the current tool. This isn't a big deal, but was a side observation I had while working on this prior to making this post

This is my first time using Stackblitz, so let me know if you have trouble viewing the posted code and I'll update it accordingly.

AndyGup · Answer

@FlockSafety  can you provide a simple repro sample? e.g. github, stackblitz, codesandbox. That error looks like it might be generated by webpack. However, you might also give it a try using our React/Vite sample to create a repro: https://stackblitz.com/github/Esri/jsapi-resources/tree/main/esm-samples/jsapi-react?file=README.md.