Using patch-package to workaround a create-react-app issue - a podcast by Kent C. Dodds

from 2021-03-18T03:42:13

:: ::

Hey friends. So today I was working on a little problem that I had with
Create React app. So if you don't know Epic React is a combination of a
bunch of React workshops that I have given many times in a life setting andit's a recorded version of kind of a live workshop that's kind of the feel.
Anyway, all of the workshops there are powered by create react app underthe hood and I've got a abstraction on top of that to share a bunch of code
between all these different workshops.So I am in the process of movingeverything over to TypeScript and I want to be able to have two different
versions of TypeScript or of texture configuration for the exercises versusthe final version.
So I want to make sure that as we're moving everything over to TypeScript
if you don't want to do TypeScript, it's as like easy as possible or if
you've got very limited experience or no experience with TypeScript, you
should still be able to get a lot of out of the workshops without having tohave a bunch of red squigglies all over the place with their messages that
you don't understand.
And so,I don't want to have strict mode on of course for the those
exercises because that would be against that goal. But I do want to havestrict mode on for the final version of all the the exercises so I you
know, because there's good reason to have strict mode and and it kind of
helps me as I'm working on it to make sure that I'm doing everything the
way that you probably should in a real application.And so, unfortunately with Korea react app if you don't have the TS configset up proper well here let me back up so.You can do this by having using
project references and so you have just your main TS config that referencesother TS configs and then those can include an exclude different files.
So I can get that set up but the problem is that in create react app ifyou're root TS config isn't doesn't have all the right properties then it
will fill those in automatically for you and that messes up the referencesstuff. So, it just doesn't support references which is a big bummer.
I made an issue about this. But what I did for,The foreseeable futureunless create react to app ad support for references is I used this package
on NPM called Patch Package and it allows you to install all of yourdependencies and then you make a change to one of the files in your node
modules and then you run the script and it will generate a patch for youand then you just set a post-install script in your package JSON and it
will after your people install it it will apply that patch.And so, I was able to make a small change to create react app to support
this. So give patch package a look it's pretty cool. It's kind of
interesting. IHope that was interesting to you and I'll talk to you later.

Further episodes of 3 Minutes with Kent

Further podcasts by Kent C. Dodds

Website of Kent C. Dodds