tldr; How do I configure my CRA project so that the yarn start yields a build compatible with an older browser?
Not sure what I'm doing wrong, but I'm essentially using TypeScript with CRA, and would like to run the development version on an older Chrome. To be precise, it's Chrome 53 running on a Smart TV. As I'm developing an app to run on a TV, and would like to test on the one I have available, running a build compatible with that TV is crucial.
When I run the current development version on the TV, the browser complains about a syntax error. Probably because of the advanced JS features contained in the build (arrow functions, const, ...).
So the first thing I did was to update tsconfig.json to target es3 instead of what it currently sits at: es5. I was not expecting this to make a difference as ES5 should clearly run well on Chrome 53.
Then, I tried customising the browserlist in package.json to include that version of Chrome, or even copying the production setting to the development ones, but to no avail. When I inspect the JavaScript generated on my desktop, it still contains ES6 features.
Clearly, I'm very unfamiliar as to how TypeScript and CRA (hear Babel) work together. I tried to inspect CRA's source code, and to eject the application to guess why my attempts do not work, but I'm lost.
(Noting that the project was created from the CRA's TypeScript template a few days ago, so it's really up to date.)
Well, it turns out that the problem is easier than it appeared. The NPM cache needs to be cleared after modifying package.json. I'll admit that I did not notice the mention of this in the documentation.
When editing the
browserslistconfig, you may notice that your changes don't get picked up right away. This is due to an issue inbabel-loadernot detecting the change in yourpackage.json. A quick solution is to delete thenode_modules/.cachefolder and try again.