Surely for js programmers, everyone has used libraries on npm already
But when the library has an error, we will have to report the error and wait for the author to update the library
However, what should be done for old libraries that have not been updated for several months or even years?
The usual way is that we will have to fork our git library, and clone to fix it
Then we will fix the version of the dependency in package.json with the path of the repository that we modified with:
1 2 | +git<link-repo> |
So the problem has been solved, the above method is also an effective solution
But in this article I will introduce another method called patch-package
Problem
The library I’m using is react-smooth-dnd for drag and drop
Everything is no problem but from react 18 version onwards, when using this library with typescript, we will get error
1 2 | Property 'children' does not exist on type 'IntrinsicAttributes' |
The first options that come to mind are to reduce the React version to 17 or change the library to declare the PropsWithChildren type for the component .
Create a patch using patch-package
The stuff in node_modules is something no one wants to touch
But this time we find the broken parts of the library in the node-modules folder and fix it
After editing, we use the command
1 2 | npx patch-package <package name> |
package name is the name of the library we need to patch, here react-smooth-dnd
1 2 | npx patch-package react-smooth-dnd |
1 2 3 4 5 6 7 8 9 10 | patch-package 6.4.7 • Creating temporary folder • Installing react-smooth-dnd@0.11.1 with yarn • Diffing your files with clean files ✔ Created file patches/react-smooth-dnd+0.11.1.patch 💡 react-smooth-dnd is on GitHub! To draft an issue based on your patch run npx patch-package react-smooth-dnd --create-issue |
Done, it created us a patch folder patches the patch inside
1 2 3 | patches └──react-smooth-dnd+0.11.1.patch |
The content inside the patch is the changes we have edited, it will help us keep the code we edited even if we delete node_modules
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | <span class="token comment">// react-smooth-dnd+0.11.1.patch</span> diff <span class="token operator">--</span> git a <span class="token operator">/</span> node_modules <span class="token operator">/</span> react <span class="token operator">-</span> smooth <span class="token operator">-</span> dnd <span class="token operator">/</span> dist <span class="token operator">/</span> src <span class="token operator">/</span> Container <span class="token punctuation">.</span> d <span class="token punctuation">.</span> ts b <span class="token operator">/</span> node_modules <span class="token operator">/</span> react <span class="token operator">-</span> smooth <span class="token operator">-</span> dnd <span class="token operator">/</span> dist <span class="token operator">/</span> src <span class="token operator">/</span> Container <span class="token punctuation">.</span> d <span class="token punctuation">.</span> ts index cdd0c03 <span class="token punctuation">.</span> <span class="token number">.211</span> eb1c <span class="token number">100644</span> <span class="token operator">--</span> <span class="token operator">-</span> a <span class="token operator">/</span> node_modules <span class="token operator">/</span> react <span class="token operator">-</span> smooth <span class="token operator">-</span> dnd <span class="token operator">/</span> dist <span class="token operator">/</span> src <span class="token operator">/</span> Container <span class="token punctuation">.</span> d <span class="token punctuation">.</span> ts <span class="token operator">++</span> <span class="token operator">+</span> b <span class="token operator">/</span> node_modules <span class="token operator">/</span> react <span class="token operator">-</span> smooth <span class="token operator">-</span> dnd <span class="token operator">/</span> dist <span class="token operator">/</span> src <span class="token operator">/</span> Container <span class="token punctuation">.</span> d <span class="token punctuation">.</span> ts @@ <span class="token operator">-</span> <span class="token number">1</span> <span class="token punctuation">,</span> <span class="token number">11</span> <span class="token operator">+</span> <span class="token number">1</span> <span class="token punctuation">,</span> <span class="token number">11</span> @@ <span class="token operator">-</span> <span class="token keyword">import</span> React <span class="token punctuation">,</span> <span class="token punctuation">{</span> Component <span class="token punctuation">,</span> CSSProperties <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react'</span> <span class="token punctuation">;</span> <span class="token operator">+</span> <span class="token keyword">import</span> React <span class="token punctuation">,</span> <span class="token punctuation">{</span> Component <span class="token punctuation">,</span> CSSProperties <span class="token punctuation">,</span> PropsWithChildren <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react'</span> <span class="token punctuation">;</span> <span class="token keyword">import</span> PropTypes <span class="token keyword">from</span> <span class="token string">'prop-types'</span> <span class="token punctuation">;</span> <span class="token keyword">import</span> <span class="token punctuation">{</span> ContainerOptions <span class="token punctuation">,</span> SmoothDnD <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'smooth-dnd'</span> <span class="token punctuation">;</span> <span class="token keyword">interface</span> <span class="token class-name">ContainerProps</span> <span class="token keyword">extends</span> <span class="token class-name">ContainerOptions</span> <span class="token punctuation">{</span> render <span class="token operator">?</span> <span class="token operator">:</span> <span class="token punctuation">(</span> <span class="token parameter">rootRef <span class="token operator">:</span> React <span class="token punctuation">.</span> RefObject <span class="token operator"><</span> any <span class="token operator">></span></span> <span class="token punctuation">)</span> <span class="token operator">=></span> React <span class="token punctuation">.</span> ReactElement <span class="token punctuation">;</span> style <span class="token operator">?</span> <span class="token operator">:</span> CSSProperties <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token operator">-</span> declare <span class="token keyword">class</span> <span class="token class-name">Container</span> <span class="token keyword">extends</span> <span class="token class-name">Component</span> <span class="token operator"><</span> ContainerProps <span class="token operator">></span> <span class="token punctuation">{</span> <span class="token operator">+</span> declare <span class="token keyword">class</span> <span class="token class-name">Container</span> <span class="token keyword">extends</span> <span class="token class-name">Component</span> <span class="token operator"><</span> PropsWithChildren <span class="token operator"><</span> ContainerProps <span class="token operator">>></span> <span class="token punctuation">{</span> <span class="token keyword">static</span> propTypes <span class="token operator">:</span> <span class="token punctuation">{</span> behaviour <span class="token operator">:</span> PropTypes <span class="token punctuation">.</span> Requireable <span class="token operator"><</span> string <span class="token operator">></span> <span class="token punctuation">;</span> groupName <span class="token operator">:</span> PropTypes <span class="token punctuation">.</span> Requireable <span class="token operator"><</span> string <span class="token operator">></span> <span class="token punctuation">;</span> |
Finally, just running the project again solved the problem of the library’s error
And don’t forget to run the command
1 2 | npx patch-package react-smooth-dnd --create-issue |
To create an issue to help those who encounter it know how to solve it and let the author fix this error soon
If you are interested, make a pull request too