patch-package | Fix broken node modules instantly

Поделиться
HTML-код
  • Опубликовано: 27 ноя 2024
  • patch-package is a tool that has saved me a couple of times when I found a bug in an npm package and needed to fix it ASAP.
    Code: github.com/ben...
    Links from video:
    github.com/ds3... ​

    ----
    Follow me online: voidpet.com/be...
    #benawad

Комментарии • 74

  • @MrREALball
    @MrREALball 4 года назад +36

    Wow, i was looking for something like this since forever. Thank you Ben for recommending this tool.

  • @joefads5040
    @joefads5040 4 года назад +12

    I've been using this for a while now in our design system, it's super awesome. Although, be careful of using ^ version installs as the patch doesn't get correctly applied if you get a few patch bumps, happened to me today and app teams had a broken version of a menu drop down... 😬

  • @nguyennguyenluong8116
    @nguyennguyenluong8116 Год назад +1

    Thank you, i've been looking for this the whole time, straight to the point!

  • @katywings
    @katywings 4 года назад +3

    Yeah patch-package is amazing! I needed it for Typescript conflicts between dependencies 😍

  • @gosnooky
    @gosnooky 10 месяцев назад

    Incredibly useful package for larger NPM packages, especially some with bad coding practices. I needed to use this for MedusaJS (among the worst coding practices I've ever seen) to stop verbose logging of EVERY request made to the API that isn't disabled, even in production.

  • @Parmigiano1
    @Parmigiano1 4 года назад +6

    Yup ... I even used it for my own package recently because it's so much faster :D

  • @waynevanson277
    @waynevanson277 4 года назад +1

    Thanks for recommending this tool. I remember watching this video near release data and it's only now I need it. TY.

    • @ProgrammingWithOsku
      @ProgrammingWithOsku 2 года назад

      Dose this help when i want to fix some package per deep version to be compatible to react 18

  • @ChrisGeirman
    @ChrisGeirman 4 года назад

    I've known about this for some time, but haven't used it. Actually, I forgot about it (thanks for the reminder). Love the walk through...super helpful and now it's more likely I'll remember this when I need it. Thanks!

  • @DavidSmith-ef4eh
    @DavidSmith-ef4eh 4 года назад +2

    I think yarn 2 will have a "patch" protocol, which you can use to modify files in node modules. But on the other hand, this seems much easier and cleaner than doing it using "yarn patch"..

  • @momolojo
    @momolojo 3 года назад

    A helpful VSCode plugin is 'Format Toggler' which enables toggling 'format on save' via single click on the status bar.

  • @acollierr17
    @acollierr17 4 года назад

    I haven't found a use for this until today due to firebase and reactfire. It's doing "import * as firebase from 'firebase/app'" instead of "import firebase from 'firebase/app'". Thanks for this!

  • @abdulbasir8740
    @abdulbasir8740 2 года назад

    Thank you, "postinstall" was what I was missing

  • @bantinggamer4962
    @bantinggamer4962 4 года назад +2

    this is awesome! thank you for making a tutorial on it. your a rock star!

  • @armantaheri9325
    @armantaheri9325 Год назад

    Thank you Ben. I really enjoyed the way you explained it.

  • @suzannevogt2018
    @suzannevogt2018 Год назад

    This is a lifesaver. Great video.

  • @KimhunX
    @KimhunX 4 года назад

    Used to replace them with node fs in postinstall pretty similar but patch-package really neat.

  • @francisaguilar21
    @francisaguilar21 4 года назад

    Thanks man! I've been thinking of a package like this a month ago!

  • @ZehnGen
    @ZehnGen 4 года назад +1

    My god... This is so helpful!! Thank you!!!

  • @zhitomirnedyalkow1666
    @zhitomirnedyalkow1666 4 года назад

    Thank you, Ben! Very informative

  • @KoltPenny
    @KoltPenny 2 года назад

    dev: "cool! what happens if I try to fix node?"
    *runs patch-package npm*
    *npm removes itself*
    dev: it worked!

  • @kipsta1993
    @kipsta1993 3 года назад

    Thanks I had to do the same and was looking for some experience!

  • @BetuUuUu
    @BetuUuUu 4 года назад

    I've used this library before, it's great for fix things fast! But you can also use the fork from the PR if there's any

    • @brandon.duffany
      @brandon.duffany 4 года назад

      True, you can just link directly to the github repo in package.json. I did this recently; worked well. Only issue I ran into was that I had to go into the module under the node_modules dir and run `yarn install`, in addition to the `yarn install` at the top-level.

    • @rhyann3486
      @rhyann3486 Месяц назад

      I tried here and it didn't work, I'll try this way. Thanks guys!

  • @vaasudhand3200
    @vaasudhand3200 3 года назад

    You just made my day!

  • @Whacks
    @Whacks 2 года назад

    Very useful, thank you!

  • @othnielagera
    @othnielagera Год назад

    Thank you very much for this 👌🏽

  • @hernanbeatle
    @hernanbeatle 4 года назад

    Super useful man. Thank you!

  • @ProgrammingWithOsku
    @ProgrammingWithOsku 2 года назад

    Dose this help when i want to fix some package per deep version to be compatible to react 18

  • @zindev
    @zindev 3 года назад

    Thank you Ben!

  • @thevinmalaka
    @thevinmalaka 3 года назад

    Thank you. Very helpful.

  • @jasonhetherington9639
    @jasonhetherington9639 4 года назад

    Hmmm, not sure this is the easiest way to use patch-package. You can just edit the package directly in node_modules and run patch-package name-of-package and it creates a diff file for you without having to search or console log anything.

    • @bawad
      @bawad  4 года назад +1

      Yeah that's what I did, but sometimes you don't know which JavaScript file to change in the package

  • @mukeshnegi9720
    @mukeshnegi9720 4 года назад

    It's good to see such a package. But is it the only use case of this package.

  • @FaysalBDev
    @FaysalBDev 6 месяцев назад

    amazzzzing. thank you so much

  • @boblitex
    @boblitex 2 года назад

    great video, noticed a peculiar case, if you want to patch a package by installing another package for that specific package. looks like that can't be patched. anyone know how to go around something like that?

  • @JosePablo24
    @JosePablo24 4 года назад

    alternatively, fork library, apply fix, use git url

  • @TsunaSawada26
    @TsunaSawada26 4 года назад +1

    What is the autocomplete I just saw on your terminal?

    • @bawad
      @bawad  4 года назад +1

      default for fish shell benawad.com/fish

    • @TsunaSawada26
      @TsunaSawada26 4 года назад

      Ben Awad thanks

  • @alfredfx0
    @alfredfx0 4 года назад

    thanks a lot Ben!

  • @VeeWebCode
    @VeeWebCode 4 года назад

    Helpful Video.. Thank You

  • @walex996
    @walex996 2 года назад

    Much thanks man

  • @tajpouria
    @tajpouria 4 года назад

    Great really handy !
    why u removed vim extension bro ?

    • @bawad
      @bawad  4 года назад +2

      hehe nice catch, vim plugin dies on large files so I disabled it for this video

    • @tajpouria
      @tajpouria 4 года назад

      I'm wonder if u gonna share your thought about NextJS SSG here on youtube! according to your former interesting contents about JAMStack.

    • @bawad
      @bawad  4 года назад +1

      yes, that's coming soon!

  • @giovannilepanto2580
    @giovannilepanto2580 Год назад

    THANK YOU!!!!

  • @wisdomeispower
    @wisdomeispower 3 года назад

    Ty very nice tool.

  •  5 месяцев назад

    thanks!

  • @shahidullahmuffakir668
    @shahidullahmuffakir668 2 дня назад

  • @elie2222
    @elie2222 4 года назад

    Great video as always. Add a link to it in an article of mine covering multiple techniques to fix broken packages: medium.com/p/d8f808657d8e/
    If patch-package somehow worked with TypeScript and build systems that would be even better. Seems like an easier solution in this case is to use the forked repo in your package.json, or it breaks due to build steps?

  • @naookii333
    @naookii333 4 года назад

    Hi Ben, what is your ohmyzsh theme?

    • @bawad
      @bawad  4 года назад

      gruvbox

  • @sumanmandal4356
    @sumanmandal4356 2 года назад

    1000 like brother

  • @_vicary
    @_vicary 4 года назад

    Can’t you just use the git URL as the version in package.json?

    • @bawad
      @bawad  4 года назад

      yeah if the project is simple, that can sometimes work

    • @_vicary
      @_vicary 4 года назад +2

      Ben Awad Since you decided to patch a known version, knowing that version in package.json is by no means telling the truth anyways.
      Instead of spinning off your own fork and publish an npm package, or keeping a local patch, I suggest using the SHA URL of the PR source branch directly in your package.json. That’s less lying and less artefacts to maintain.

    • @Xiel89
      @Xiel89 4 года назад +1

      Vicary A that will not work when the source is compiled (like typescript).

    • @_vicary
      @_vicary 4 года назад

      Felix Leupold Please enlighten me, I am honestly not sure if you can correctly patch a bundled script though.

  • @saadsheikh9395
    @saadsheikh9395 4 года назад

    Please create series of redux in react native with navigation and axios in that

  • @asadumar6880
    @asadumar6880 4 года назад

    isn't it better to just fork the repo?

  • @aeonthread7970
    @aeonthread7970 4 года назад

    Idk man this doean't seems to be viable solution.in my case react spring had really nasty memoryleak so people asked them for fix and they made beta version for that till next LTS release .for other packages shouldn't be diffrent if maintainer is active

    • @bawad
      @bawad  4 года назад +1

      this is for when the maintainer is slower

  • @dixitk13
    @dixitk13 4 года назад

    Have you tried using Yalc (github.com/whitecolor/yalc)? I've been using Yalc for this particular use-case but will try using patch-package to see if it's faster. Nice videos - keep them coming :)

    • @bawad
      @bawad  4 года назад

      I haven't, looks nice though

  • @evans8245
    @evans8245 4 года назад

    yeiit

  • @senecamanu6515
    @senecamanu6515 4 года назад

    im early af