nextjs + remote-mdx báo lỗi: Gọi hook không hợp lệ

Nội dung báo lỗi

Cảnh báo: Gọi hook không hợp lệ. Các hook chỉ có thể được gọi bên trong thân của một thành phần hàm. Điều này có thể xảy ra vì một trong những lý do sau:
1. Bạn có thể có các phiên bản React và trình kết xuất không khớp (chẳng hạn như React DOM)
2. Bạn có thể đang vi phạm Quy tắc của các hook
3. Bạn có thể có nhiều bản sao của React trong cùng một ứng dụng
Xem https://reactjs.org/link/invalid-hook-call để biết mẹo về cách gỡ lỗi và khắc phục vấn đề này.

Giải pháp của tôi

Thêm cấu hình: transpilePackages

// ...
const nextConfig = {
    pageExtensions: ['js', 'jsx', 'md', 'mdx', 'ts', 'tsx'],
    transpilePackages: ['next-mdx-remote']
};
// ...