BRIEFS logo BRIEFS

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

03/18/2021 , 2m, 57s

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.