3 Minutes with Kent

Using patch-package to workaround a create-react-app issue

03.18.2021 - By Kent C. DoddsPlay

Download our free app to listen on your phone

Download on the App StoreGet it on Google Play

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 and

it'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 under

the 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 moving

everything over to TypeScript and I want to be able to have two different

versions of TypeScript or of texture configuration for the exercises versus

the 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 to

have 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 have

strict 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 config

set 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 references

other 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 if

you'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 references

stuff. 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 future

unless 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 your

dependencies 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 you

and 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.

More episodes from 3 Minutes with Kent