- vừa được xem lúc

Thư viện rách quá, tôi đã vá thế nào

0 0 42

Người đăng: Nguyễn Thành

Theo Viblo Asia

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

Bình luận

Bài viết tương tự

- vừa được xem lúc

Giới thiệu Typescript - Sự khác nhau giữa Typescript và Javascript

Typescript là gì. TypeScript là một ngôn ngữ giúp cung cấp quy mô lớn hơn so với JavaScript.

0 0 525

- vừa được xem lúc

Bạn đã biết các tips này khi làm việc với chuỗi trong JavaScript chưa ?

Hi xin chào các bạn, tiếp tục chuỗi chủ đề về cái thằng JavaScript này, hôm nay mình sẽ giới thiệu cho các bạn một số thủ thuật hay ho khi làm việc với chuỗi trong JavaScript có thể bạn đã hoặc chưa từng dùng. Cụ thể như nào thì hãy cùng mình tìm hiểu trong bài viết này nhé (go).

0 0 433

- vừa được xem lúc

Một số phương thức với object trong Javascript

Trong Javascript có hỗ trợ các loại dữ liệu cơ bản là giống với hầu hết những ngôn ngữ lập trình khác. Bài viết này mình sẽ giới thiệu về Object và một số phương thức thường dùng với nó.

0 0 153

- vừa được xem lúc

Tìm hiểu về thư viện axios

Giới thiệu. Axios là gì? Axios là một thư viện HTTP Client dựa trên Promise.

0 0 145

- vừa được xem lúc

Imports và Exports trong JavaScript ES6

. Giới thiệu. ES6 cung cấp cho chúng ta import (nhập), export (xuất) các functions, biến từ module này sang module khác và sử dụng nó trong các file khác.

0 0 110

- vừa được xem lúc

Bài toán đọc số thành chữ (phần 2) - Hoàn chỉnh chương trình dưới 100 dòng code

Tiếp tục bài viết còn dang dở ở phần trước Phân tích bài toán đọc số thành chữ (phần 1) - Phân tích đề và những mảnh ghép đầu tiên. Bạn nào chưa đọc thì có thể xem ở link trên trước nhé.

0 0 245