I don't usually like to pat myself on the back but today I did something I'm kinda proud of and I think it really has value to get an insight on how you could debug a difficult issue. I'm using Next.js and I had to implement a rich text editor. Given it's just a POC I went with an all ready solution with react-quill.
During development it all went down great, I rapidly setupped the RTF editor and pushed the code. The pr preview however had a problem: some commands of the toolbar stopped working. That's strange! So how do I approached this debug? First thing first I've tried to build locally and used npm start instead of npm dev. The bug was there. So it was a problem during the build. I hopped into stackblitz , created a new next project and tried a minimal reproduction there. THE BUG WASN'T THERE! I've then tried to add small pieces of my larger application one at the time to see if that was the culprit. Nothing seemed to break it. I downloaded the project and tried to do the same locally. Same story. Time to get serious: I've looked at the api of quill and saw that the command that the toolbar is probably running in the back is quill.format(). I've dived into the minified code, searching for "format" and manually added a debugger in the minified code to trying to understand what was happening. The function effectively was called but there was a strange piece of code that transformed the value that I was trying to set into a boolean. I've tried to modify the minified code and it worked! Cool...now: why it does this only in prod and how do I fix it? I've started to compare the minified code of the project where it was working with the one where it was not. That piece of code was effectively different 😱 I've tried to update the dependencies but nothing seemed to work. And then I finally realized what it was missing: there was no next.config.js in the working project. It was the swc minifier that changed the logic of the correctly minified code from react-quill! And that's the story of the craziest bug I've encountered and how I've fixed it! I've filed an issue for next.js with reproduction if you want to take a look.
For further actions, you may consider blocking this person and/or reporting abuse
Top comments (0)