Chắc hẳn đối với các lập trinh viên js thì ai cũng đã từng dùng các thư viện trên npm rồi

Nhưng khi các thư viện xảy ra lỗi thì ta sẽ phải báo cáo lỗi và chờ tác giả cập nhật thư viện

Tuy nhiên đối với những thư viện cũ, vài tháng hoặc thậm chí cả năm không được cập nhât thì phải làm thế nào?

Cách thường thấy là chúng ta sẽ phải fork thư viện về git của mình, và clone về sửa

Sau đó thì ta sẽ sửa phiên bản của dependency trong package.json bằng đường dẫn của repository mà ta đã sửa bằng:

+git<link-repo>

Vậy là đã giải quyết được vấn đề, phương pháp trên cũng là 1 giải pháp hiệu quả

Nhưng trong bài này mình sẽ giới thiệu 1 phương pháp khác với tên gọi là patch-package

Vấn đề

Thư viện mình đang sử dụng là react-smooth-dnd dùng để kéo thả

Mọi thứ không có vấn đề gì nhưng từ phiên bản react 18 trở đi, khi dùng thư viện này với typescript thì ta sẽ bắt gặp lỗi

Property 'children' does not exist on type 'IntrinsicAttributes'

Các phương án được nghĩ đến đầu tiên là là giảm phiên bản React xuống 17 hoặc là sẽ phải sửa thư viện để khai báo thêm type PropsWithChildren cho các component

Tạo bản vá bằng patch-package

Những thứ trong node_modules là thứ mà không một ai muốn đụng vào

Nhưng lần này chúng ta tìm những phần bị lỗi của thư viên trong folder node-modules rồi sửa nó

Sau khi sửa xong thì ta dùng câu lệnh

npx patch-package <package name> 

package name là tên thư viện chúng ta cần vá, ở đây react-smooth-dnd

npx patch-package react-smooth-dnd

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

Xong, nó đã tạo cho chúng ta 1 folder patches chứa bản vá bên trong

patches
 └──react-smooth-dnd+0.11.1.patch

Nội dung bên trong bản vá là nhưng thay đổi chúng ta đã chỉnh sửa, nó sẽ giúp chúng ta giữ lại code mình sửa kể cả khi xóa node_modules

// react-smooth-dnd+0.11.1.patch

diff --git a/node_modules/react-smooth-dnd/dist/src/Container.d.ts b/node_modules/react-smooth-dnd/dist/src/Container.d.ts
index cdd0c03..211eb1c 100644
--- a/node_modules/react-smooth-dnd/dist/src/Container.d.ts
+++ b/node_modules/react-smooth-dnd/dist/src/Container.d.ts
@@ -1,11 +1,11 @@
-import React, { Component, CSSProperties } from 'react';
+import React, { Component, CSSProperties, PropsWithChildren } from 'react';
 import PropTypes from 'prop-types';
 import { ContainerOptions, SmoothDnD } from 'smooth-dnd';
 interface ContainerProps extends ContainerOptions {
     render?: (rootRef: React.RefObject<any>) => React.ReactElement;
     style?: CSSProperties;
 }
-declare class Container extends Component<ContainerProps> {
+declare class Container extends Component<PropsWithChildren<ContainerProps>> {
     static propTypes: {
         behaviour: PropTypes.Requireable<string>;
         groupName: PropTypes.Requireable<string>;

Cuối cùng chỉ cần chạy project lại là đã giải quyết xong vấn đề lỗi của thư viện

Và cũng không quên chạy thêm câu lệnh

npx patch-package react-smooth-dnd --create-issue

Để tạo issue giúp cho những ai gặp phải biết cách giải quyết và để tác giả sớm fix lỗi này

Nếu có tâm hơn nữa thì tạo cả pull request luôn