Những vấn đề gặp phải khi nâng cấp React v17 lên v18 (TypeScript)

Đôi lời giới thiệu#

Xin chào mọi người, hôm qua mình có một ngày không vui cũng không buồn lắm. Chả là nghe tin Ông trùm React cho lên version mới v18 (thực ra là 1 tháng rồi do lười chưa có thời gian vọc :v) nên mình quyết định chơi lớn thử. Mọi thứ diễn ra trên cả mong đợi cho đến khi mình phải nâng một dự án đang triển khai của công ty từ React 17 lên 18 😱 . Thật sự rất khủng khiếp (mà chắc cũng không khủng khiếp gì lắm đâu chắc do mình tự làm khó mình thôi :v). Thì bài viết này mình muốn chia sẻ những vấn để mình phải gặp khi nâng lên React 18. Được rồi đi thôi ...

1. Bị lỗi (Converting circular structure to JSON --> starting at object with constructor 'SourceFileObject')#

Khi mình nâng cấp lên React18 trong file package.json của mình có thay đổi như sau:

{
  "dependencies": {
    "react": "18.1.0",
    "react-dom": "18.1.0",
  },
  "devDependencies": {
    "@types/react": "18.0.8",
    "@types/react-dom": "18.0.3"
  }
}

Và mình cũng yarn install như bình thường sau đó là yarn start và Bumm nó ra thế này đây

Ủa.. Gì dọ. Tưởng chừng mọi thứ sẽ tươi sáng chỉ với vài cậu lệnh quen thuộc. Nhưng không thế thì đời lại dễ quá. Rồi thì phải cũng tìm cách xử lý thôi cầm lỗi này lên hỏi ông Google, ông Google lại trả lời một cách vô tình là lỗi này vì cái khác chứ mếu phải do mày nâng cấp (Đại loại là những bài viết về lỗi này không giúp mình xử lý được vấn đề này). Và bế tắc càng trở nên bế tắc mình phải dùng tuyệt chiêu cuối cùng là quay về tạo một project React từ lệnh npx create-react-app react-18 --template typescript xem thử nó có chạy được trên React 18 hay không. À và thì ra là nó chạy được (Dĩ nhiên là nó chạy được rồi :))). Và mình vào xem thử file package.json của nó có gì khác với của mình không thì ùa wow. tìm mờ con mắt (package dự án mình cài khá là nhiều nên lúc so sánh cũng khá là mợt). Thì ra là ngoài nâng cấp react, react-dom, @types/react, @types/react-dom thì chúng ta phải bùa thêm một số thứ nữa, cụ thể là:

// Lúc chưa thay đổi
{
  "dependencies": {
    "typescript": "4.5.4",
  },
  "devDependencies": {
    "@types/node": "14.14.31",
  }
}

// Sau khi thay đổi
{
  "dependencies": {
    "typescript": "4.6.4",
  },
  "devDependencies": {
    "@types/node": "17.0.30",
  }
}

Lại tiếp tục lặp lại câu lệnh cũ yarn install > yarn start và:

Trời ghê chưa. Nhưng 1s sauuuuu....

2. Lỗi Property 'children' does not exist on type {{ComponentType}}#

Đỏ lè cả một bầu trời 😭😭😭. Tránh vỏ dưa ta lại gặp vỏ dừa. Nhưng vỏ nào rồi cũng có cách thôi. Đối với lỗi này bạn chỉ cần vào những component đang có truyền children vào thêm như sau là được:

// Ví dụ một component của mình

// Lúc chưa thay đổi
interface TitleProps extends React.HtmlHTMLAttributes<HTMLHeadingElement> {
  level?: 1 | 2 | 3 | 4 | 5 | 6;
}

export const CustomTitle: React.FC<TitleProps> = props => {
  const { level, children, ...restOf } = props;

  const headEl = useMemo(() => {
    return `h${level}`;
  }, [level]);

  return React.createElement(headEl, restOf, children);
};

// Sau khi thay đổi

interface TitleProps extends React.HtmlHTMLAttributes<HTMLHeadingElement> {
  level?: 1 | 2 | 3 | 4 | 5 | 6;
  children?: React.ReactNode; // Thêm children?: React.ReactNode
}

export const CustomTitle: React.FC<TitleProps> = props => {
  const { level, children, ...restOf } = props;

  const headEl = useMemo(() => {
    return `h${level}`;
  }, [level]);

  return React.createElement(headEl, restOf, children);
};

Kaka đơn giản phải không, nhưng sẽ không đơn giản nếu đang có 10, 20, ... 100 component đang gặp vấn đề như vậy. Phải chạy bằng cơm ư. Câu trả lời là đúng rồi đó trên issue của React Github hiện tại cũng chỉ có chỉ ta chạy bằng cơm thôi. Thôi thì có công mài sắt có ngày nên kim vậy.

À quên còn một số component của thư viện thì sao mình đâu có thể thêm type vào cho nó được. Câu trả lời là nâng nó mới lên cả package và @types/package, mọi thứ sẽ được giải quyết !.

Tổng kết#

Thật ra nói dai nói dài vậy thôi chứ chỉ có 2 vấn đề mình gặp phải khi nâng lên React18 với project viết bằng typescript. Cũng không khó khăn gì lắm chỉ là tốn công lúc thêm type children?: React.ReactNode thôi, nếu quá nhiều component thì cũng khá là oải đấy.

Thì thôi cũng kết thúc bài viết ở đây rồi. Mong nó sẽ giúp được phần nào đối với một số bạn đang gặp vấn đề giống như mình.

Thanks !!!