{"id":5556,"date":"2022-03-07T10:38:47","date_gmt":"2022-03-07T10:38:47","guid":{"rendered":"https:\/\/www.folio3.com\/mobile\/?p=5556"},"modified":"2022-03-07T10:38:51","modified_gmt":"2022-03-07T10:38:51","slug":"how-to-patch-npm-packages","status":"publish","type":"post","link":"https:\/\/www.folio3.com\/mobile\/blog\/how-to-patch-npm-packages\/","title":{"rendered":"How to Patch NPM Packages"},"content":{"rendered":"\n<p>Sometimes when we have several packages installed in our applications and we see that one of the packages has a broken functionality out of nowhere. At that point time, we are left with the following options:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>We are in a hurry to ship the build, so we can just fix the method which is malfunctioning and ship the build. This is the most spontaneous solution we can do, but is it a good one? Probably not. The reason is that we can lose this fix when we run yarn for the next time, and this fix is at our local machine, so it won\u2019t work on our fellow developer\u2019s machine.<\/li><li>We are not in a hurry, so we go to the Github of the package and open an issue. When this is fixed in the next release of the package, we can update our package. But who wants to wait?<\/li><li>So what we can do is we can make use of \u201cpatch-package\u201d, to apply a bandage to a broken package and that bandage doesn\u2019t wash away with running yarn for the next time, because this bandage lives with our application\u2019s GitHub repository.<\/li><\/ul>\n\n\n\n<p>With our understanding ready about the patch-package, lets see how to use it:<\/p>\n\n\n\n<p>Make sure you\u2019re at the root of your project, and from there run the following command from terminal:<\/p>\n\n\n\n<p><code>yarn add redux<\/code><\/p>\n\n\n\n<p>Or<\/p>\n\n\n\n<p><code>npm i redux<\/code><\/p>\n\n\n\n<p>Next we install and setup, \u201c<code>patch-package<\/code>\u201d, again from your terminal run:<\/p>\n\n\n\n<p><code>npm i patch-package<\/code><\/p>\n\n\n\n<p>or<\/p>\n\n\n\n<p><code>yarn add patch-package postinstall-postinstall<\/code><\/p>\n\n\n\n<p>Why did we install postinstall-postinstall? Details are at the bottom.<\/p>\n\n\n\n<p>Next we add a script in package.json which will be execute after the yarn or npm installation is completed:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\u201cscripts\u201d : {\n    \u201cpostinstall\u201d: \u201cpatch-package\u201d\n}<\/code><\/pre>\n\n\n\n<p>Now we are all set to make some changes to redux package and let\u2019s assume it isn\u2019t working and we\u2019re going to fix it by:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Going to node_modules\/redux\/src\/index.js&nbsp;<\/li><li>Adding a console.log(\u201cI am working fine by patching redux !!\u201d) right after all the imports.<\/li><\/ul>\n\n\n\n<p>Now we will run the following command from the terminal:<\/p>\n\n\n\n<p><code>yarn patch-package redux<\/code><\/p>\n\n\n\n<p>Or&nbsp;<\/p>\n\n\n\n<p><code>npx patch-package redux<\/code><\/p>\n\n\n\n<p>This will now create a patches directory at your root folder. Inside of it, you will see a redux+4.1.2.patch file. The numbers in the file name represent the currently installed redux version from package.json.<\/p>\n\n\n\n<p>That\u2019s it. We are now free from all the worries. Now when you commit this patch file, it will be stored alongside your other files on your project\u2019s GitHub repository.<\/p>\n\n\n\n<p>There\u2019s one last thing and that is to test our implementation. Let\u2019s remove the redux package by running:<\/p>\n\n\n\n<p><code>yarn remove redux<\/code><\/p>\n\n\n\n<p>Or<\/p>\n\n\n\n<p><code>npm uninstall redux<\/code><\/p>\n\n\n\n<p>Now we don\u2019t have our console.log as a fix in the redux package as we completely removed redux. Let\u2019s re-install redux and see if the <code>patch-package<\/code> applies our changes which are created as a patch in the patches folder.<\/p>\n\n\n\n<p>Run following in the terminal:<\/p>\n\n\n\n<p><code>yarn add redux<\/code><\/p>\n\n\n\n<p>Or<\/p>\n\n\n\n<p><code>npm i redux<\/code><\/p>\n\n\n\n<p>Now if we go to node_modules\/redux\/src\/index.js, we see our console.log living there. Congrats, you\u2019ve bandaged the redux package successfully.<\/p>\n\n\n\n<p>Why did we install \u201c<code>postinstall-postinstall<\/code>\u201d package when installing through yarn?\u00a0<\/p>\n\n\n\n<p>The answer is when we run yarn, yarn add, yarn remove, Yarn actually replaces your current node_modules with a fresh installation.\u00a0 And in the case of running yarn remove, Yarn doesn\u2019t call the post install hook. So the \u201cpostinstall-postinstall\u201d package actually calls the post install hook after every yarn remove call. So if we didn\u2019t install this postinstall-postinstall package, what would\u2019ve happened is that our patch wouldn\u2019t have been executed and our application won&#8217;t work then.<\/p>\n\n\n\n<p>Thanks for reading, Don\u2019t forget to share your thoughts in comment section!<\/p>\n\n\n\n<p>For reference:<\/p>\n\n\n\n<p><a href=\"https:\/\/www.npmjs.com\/package\/patch-package\">https:\/\/www.npmjs.com\/package\/patch-package<\/a><a href=\"\"><\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Sometimes when we have several packages installed in our applications and we see that one of the packages has a broken functionality out of nowhere. At that point time, we are left with the following options: We are in a hurry to ship the build, so we can just fix the method which is malfunctioning &hellip; <a href=\"https:\/\/www.folio3.com\/mobile\/blog\/how-to-patch-npm-packages\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;How to Patch NPM Packages&#8221;<\/span><\/a><\/p>\n","protected":false},"author":37,"featured_media":5558,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[50],"tags":[],"class_list":["post-5556","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-react-native"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v25.6 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>How to Patch NPM Packages - Mobile App Development Services<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.folio3.com\/mobile\/blog\/how-to-patch-npm-packages\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Patch NPM Packages - Mobile App Development Services\" \/>\n<meta property=\"og:description\" content=\"Sometimes when we have several packages installed in our applications and we see that one of the packages has a broken functionality out of nowhere. At that point time, we are left with the following options: We are in a hurry to ship the build, so we can just fix the method which is malfunctioning &hellip; Continue reading &quot;How to Patch NPM Packages&quot;\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.folio3.com\/mobile\/blog\/how-to-patch-npm-packages\/\" \/>\n<meta property=\"og:site_name\" content=\"Mobile App Development Services\" \/>\n<meta property=\"article:published_time\" content=\"2022-03-07T10:38:47+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-03-07T10:38:51+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.folio3.com\/mobile\/wp-content\/uploads\/2022\/03\/Screen-Shot-2022-03-07-at-3.39.12-PM.png\" \/>\n\t<meta property=\"og:image:width\" content=\"2460\" \/>\n\t<meta property=\"og:image:height\" content=\"1376\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Noc Folio3\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Noc Folio3\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.folio3.com\/mobile\/blog\/how-to-patch-npm-packages\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.folio3.com\/mobile\/blog\/how-to-patch-npm-packages\/\"},\"author\":{\"name\":\"Noc Folio3\",\"@id\":\"https:\/\/www.folio3.com\/mobile\/#\/schema\/person\/0b6e4f68efbd12d222ac9422766c61eb\"},\"headline\":\"How to Patch NPM Packages\",\"datePublished\":\"2022-03-07T10:38:47+00:00\",\"dateModified\":\"2022-03-07T10:38:51+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.folio3.com\/mobile\/blog\/how-to-patch-npm-packages\/\"},\"wordCount\":614,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.folio3.com\/mobile\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.folio3.com\/mobile\/blog\/how-to-patch-npm-packages\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.folio3.com\/mobile\/wp-content\/uploads\/2022\/03\/Screen-Shot-2022-03-07-at-3.39.12-PM.png\",\"articleSection\":[\"React Native\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.folio3.com\/mobile\/blog\/how-to-patch-npm-packages\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.folio3.com\/mobile\/blog\/how-to-patch-npm-packages\/\",\"url\":\"https:\/\/www.folio3.com\/mobile\/blog\/how-to-patch-npm-packages\/\",\"name\":\"How to Patch NPM Packages - Mobile App Development Services\",\"isPartOf\":{\"@id\":\"https:\/\/www.folio3.com\/mobile\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.folio3.com\/mobile\/blog\/how-to-patch-npm-packages\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.folio3.com\/mobile\/blog\/how-to-patch-npm-packages\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.folio3.com\/mobile\/wp-content\/uploads\/2022\/03\/Screen-Shot-2022-03-07-at-3.39.12-PM.png\",\"datePublished\":\"2022-03-07T10:38:47+00:00\",\"dateModified\":\"2022-03-07T10:38:51+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/www.folio3.com\/mobile\/blog\/how-to-patch-npm-packages\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.folio3.com\/mobile\/blog\/how-to-patch-npm-packages\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.folio3.com\/mobile\/blog\/how-to-patch-npm-packages\/#primaryimage\",\"url\":\"https:\/\/www.folio3.com\/mobile\/wp-content\/uploads\/2022\/03\/Screen-Shot-2022-03-07-at-3.39.12-PM.png\",\"contentUrl\":\"https:\/\/www.folio3.com\/mobile\/wp-content\/uploads\/2022\/03\/Screen-Shot-2022-03-07-at-3.39.12-PM.png\",\"width\":2460,\"height\":1376},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.folio3.com\/mobile\/blog\/how-to-patch-npm-packages\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.folio3.com\/mobile\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to Patch NPM Packages\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.folio3.com\/mobile\/#website\",\"url\":\"https:\/\/www.folio3.com\/mobile\/\",\"name\":\"Mobile App Development Services\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/www.folio3.com\/mobile\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.folio3.com\/mobile\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.folio3.com\/mobile\/#organization\",\"name\":\"Mobile App Development Services\",\"url\":\"https:\/\/www.folio3.com\/mobile\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.folio3.com\/mobile\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.folio3.com\/mobile\/wp-content\/uploads\/2020\/12\/folio3-mobile.png\",\"contentUrl\":\"https:\/\/www.folio3.com\/mobile\/wp-content\/uploads\/2020\/12\/folio3-mobile.png\",\"width\":210,\"height\":50,\"caption\":\"Mobile App Development Services\"},\"image\":{\"@id\":\"https:\/\/www.folio3.com\/mobile\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.folio3.com\/mobile\/#\/schema\/person\/0b6e4f68efbd12d222ac9422766c61eb\",\"name\":\"Noc Folio3\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.folio3.com\/mobile\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/29f05a21b8db20048e7717694b024bbd?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/29f05a21b8db20048e7717694b024bbd?s=96&d=mm&r=g\",\"caption\":\"Noc Folio3\"},\"url\":\"https:\/\/www.folio3.com\/mobile\/blog\/author\/noc\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to Patch NPM Packages - Mobile App Development Services","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.folio3.com\/mobile\/blog\/how-to-patch-npm-packages\/","og_locale":"en_US","og_type":"article","og_title":"How to Patch NPM Packages - Mobile App Development Services","og_description":"Sometimes when we have several packages installed in our applications and we see that one of the packages has a broken functionality out of nowhere. At that point time, we are left with the following options: We are in a hurry to ship the build, so we can just fix the method which is malfunctioning &hellip; Continue reading \"How to Patch NPM Packages\"","og_url":"https:\/\/www.folio3.com\/mobile\/blog\/how-to-patch-npm-packages\/","og_site_name":"Mobile App Development Services","article_published_time":"2022-03-07T10:38:47+00:00","article_modified_time":"2022-03-07T10:38:51+00:00","og_image":[{"width":2460,"height":1376,"url":"https:\/\/www.folio3.com\/mobile\/wp-content\/uploads\/2022\/03\/Screen-Shot-2022-03-07-at-3.39.12-PM.png","type":"image\/png"}],"author":"Noc Folio3","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Noc Folio3","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.folio3.com\/mobile\/blog\/how-to-patch-npm-packages\/#article","isPartOf":{"@id":"https:\/\/www.folio3.com\/mobile\/blog\/how-to-patch-npm-packages\/"},"author":{"name":"Noc Folio3","@id":"https:\/\/www.folio3.com\/mobile\/#\/schema\/person\/0b6e4f68efbd12d222ac9422766c61eb"},"headline":"How to Patch NPM Packages","datePublished":"2022-03-07T10:38:47+00:00","dateModified":"2022-03-07T10:38:51+00:00","mainEntityOfPage":{"@id":"https:\/\/www.folio3.com\/mobile\/blog\/how-to-patch-npm-packages\/"},"wordCount":614,"commentCount":0,"publisher":{"@id":"https:\/\/www.folio3.com\/mobile\/#organization"},"image":{"@id":"https:\/\/www.folio3.com\/mobile\/blog\/how-to-patch-npm-packages\/#primaryimage"},"thumbnailUrl":"https:\/\/www.folio3.com\/mobile\/wp-content\/uploads\/2022\/03\/Screen-Shot-2022-03-07-at-3.39.12-PM.png","articleSection":["React Native"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.folio3.com\/mobile\/blog\/how-to-patch-npm-packages\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.folio3.com\/mobile\/blog\/how-to-patch-npm-packages\/","url":"https:\/\/www.folio3.com\/mobile\/blog\/how-to-patch-npm-packages\/","name":"How to Patch NPM Packages - Mobile App Development Services","isPartOf":{"@id":"https:\/\/www.folio3.com\/mobile\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.folio3.com\/mobile\/blog\/how-to-patch-npm-packages\/#primaryimage"},"image":{"@id":"https:\/\/www.folio3.com\/mobile\/blog\/how-to-patch-npm-packages\/#primaryimage"},"thumbnailUrl":"https:\/\/www.folio3.com\/mobile\/wp-content\/uploads\/2022\/03\/Screen-Shot-2022-03-07-at-3.39.12-PM.png","datePublished":"2022-03-07T10:38:47+00:00","dateModified":"2022-03-07T10:38:51+00:00","breadcrumb":{"@id":"https:\/\/www.folio3.com\/mobile\/blog\/how-to-patch-npm-packages\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.folio3.com\/mobile\/blog\/how-to-patch-npm-packages\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.folio3.com\/mobile\/blog\/how-to-patch-npm-packages\/#primaryimage","url":"https:\/\/www.folio3.com\/mobile\/wp-content\/uploads\/2022\/03\/Screen-Shot-2022-03-07-at-3.39.12-PM.png","contentUrl":"https:\/\/www.folio3.com\/mobile\/wp-content\/uploads\/2022\/03\/Screen-Shot-2022-03-07-at-3.39.12-PM.png","width":2460,"height":1376},{"@type":"BreadcrumbList","@id":"https:\/\/www.folio3.com\/mobile\/blog\/how-to-patch-npm-packages\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.folio3.com\/mobile\/"},{"@type":"ListItem","position":2,"name":"How to Patch NPM Packages"}]},{"@type":"WebSite","@id":"https:\/\/www.folio3.com\/mobile\/#website","url":"https:\/\/www.folio3.com\/mobile\/","name":"Mobile App Development Services","description":"","publisher":{"@id":"https:\/\/www.folio3.com\/mobile\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.folio3.com\/mobile\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.folio3.com\/mobile\/#organization","name":"Mobile App Development Services","url":"https:\/\/www.folio3.com\/mobile\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.folio3.com\/mobile\/#\/schema\/logo\/image\/","url":"https:\/\/www.folio3.com\/mobile\/wp-content\/uploads\/2020\/12\/folio3-mobile.png","contentUrl":"https:\/\/www.folio3.com\/mobile\/wp-content\/uploads\/2020\/12\/folio3-mobile.png","width":210,"height":50,"caption":"Mobile App Development Services"},"image":{"@id":"https:\/\/www.folio3.com\/mobile\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/www.folio3.com\/mobile\/#\/schema\/person\/0b6e4f68efbd12d222ac9422766c61eb","name":"Noc Folio3","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.folio3.com\/mobile\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/29f05a21b8db20048e7717694b024bbd?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/29f05a21b8db20048e7717694b024bbd?s=96&d=mm&r=g","caption":"Noc Folio3"},"url":"https:\/\/www.folio3.com\/mobile\/blog\/author\/noc\/"}]}},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/www.folio3.com\/mobile\/wp-json\/wp\/v2\/posts\/5556"}],"collection":[{"href":"https:\/\/www.folio3.com\/mobile\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.folio3.com\/mobile\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.folio3.com\/mobile\/wp-json\/wp\/v2\/users\/37"}],"replies":[{"embeddable":true,"href":"https:\/\/www.folio3.com\/mobile\/wp-json\/wp\/v2\/comments?post=5556"}],"version-history":[{"count":1,"href":"https:\/\/www.folio3.com\/mobile\/wp-json\/wp\/v2\/posts\/5556\/revisions"}],"predecessor-version":[{"id":5557,"href":"https:\/\/www.folio3.com\/mobile\/wp-json\/wp\/v2\/posts\/5556\/revisions\/5557"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.folio3.com\/mobile\/wp-json\/wp\/v2\/media\/5558"}],"wp:attachment":[{"href":"https:\/\/www.folio3.com\/mobile\/wp-json\/wp\/v2\/media?parent=5556"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.folio3.com\/mobile\/wp-json\/wp\/v2\/categories?post=5556"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.folio3.com\/mobile\/wp-json\/wp\/v2\/tags?post=5556"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}