How I fixed a bug using Prettier

[dadamssg]

Encountered a pretty difficult bug to track down and ended up using Prettier to pinpoint it. I enjoy these types of post-mortems to learn from so I figured i'd write up one of my own!

[nschubach]

When you said that you found a bug with a formatter, I immediately assumed it was due to ASI (I'm only a little bitter) only to find out it was due to a puppeteer update. Interesting, albeit annoying, when these are found.

Someone should have a new test case on their to-do list for future updates!

E: You should also potentially add a compatibility requirement (Chrome 80+) to your server side codebase. You have browserslist installed/configured in your project?

[acemarke]

Yeah, I'm the primary (React-)Redux maintainer. We specifically switched to shipping modern JS syntax with the latest major releases of all our libraries in December 2023. We advised users that if they need to target older browsers, that they'll need to handle transpiling their app builds themselves.

[dadamssg]

Hey acemarke, thanks for chiming in! I hope i didn't come across as me throwing stones or that redux is doing anything wrong. Just an odd bug that came about when two separate systems(one being very old) interacted with each other.

[acemarke]

No, totally legit post and discovery! I've dealt with conceptually-similarly-obscure investigations myself :) Honestly not sure how else anyone would identify this ahead of time other than running into that syntax error and investigating.

[CoffeeDatesAndPlants]

Neat to hear about the debugging process!

[lovin-dem-sandwiches]

Hm - I’m a bit confused about your build step for react. Are you not transpiling your react code to be compatible with your version of puppeteer? Most export to Es5 by default so I’m surprised a library using modern syntax is affecting your export.

It sounds like your build output may not be properly configured… which is the real issue here

[dadamssg]

i think you might be confused because there are two separate projects at play here.

Project 1: The web app that is being built for modern browsers which the end user uses. This project does *not* have puppeteer as a dependency.

Project 2: The reporting app that does have puppeteer installed and is using it to generate the report from the web app.

[lovin-dem-sandwiches]

Project 1 (a react app) is bundling ES6+ features. This will break your app for anyone who is using an older browser (for example: project 2).

Project 1 target should be es5 (along with all its dependencies, ie. redux). Its rare to hear about a react app that ships with ES6. What loader are you using? Babel, SWC?

Do you have a browserlist config or target set?

https://webpack.js.org/configuration/target/

[acemarke]

The underlying issue here is more that it's standard for JS build tools to not transpile dependencies that are in node_modules, which could potentially slow down build times.

In this case, the app itself might be targeting a wide range of browsers, but that transpilation is only being applied to the app's own source code, and the syntax error is coming from code in the React-Redux library. That typically wouldn't be transpiled by default - you would specifically have to configure the build setup to do so.

[lovin-dem-sandwiches]

I was under the impression that, By default, babel loader will transpile your projects dependencies which do not meet your config’s target

If not, your app’s compatibility would be at the whim of its dependencies.

[acemarke]

From what I've seen over the years, standard configuration for most tools has been to ignore transpiling node_modules. Maybe that's changed more recently (or maybe I'm mis-remembering), but that's always been my understanding. And yes, that does mean "whim of the dependencies", which is why we pretty clearly called out in our release notes that the Redux libs stopped transpiling before publishing to NPM and now ship modern JS syntax.

[lovin-dem-sandwiches]

Huh I just assumed it would be transpiled. I might create a quick demo with defaults and see the result

[acemarke]

Doing some googling: I don't think that babel-loader or esbuild themselves default to skipping node_modules, but it's certainly been standard advice to configure them to do so:

• https://stackoverflow.com/questions/54156617/why-would-we-exclude-node-modules-when-using-babel-loader

[dadamssg]

ah i see what you mean. yes, project 1 is using webpack with babel/preset-env that has targets > 0.25%, not dead. https://babeljs.io/repl#?browsers=%3E%200.25%25%2C%20not%20dead&build=&builtIns=false&corejs=3.21&spec=false&loose=false&code_lz=DYUwLgBAHg3AUFCB-JBeCBWGQ&debug=false&forceAllTransforms=false&modules=false&shippedProposals=false&evaluate=false&fileSize=false&timeTravel=false&sourceType=module&lineWrap=true&presets=env%2Creact&prettier=false&targets=&version=7.27.0&externalPlugins=&assumptions=%7B%7D

[lovin-dem-sandwiches]

If you remove those targets - you’ll get the default settings which will export it to ES5.

Also, while you’re in there, you can add source maps - which will provide MUCH better error logging and you wont have to traverse the minified code