Header Ads

Tổng hợp các lỗi và cách fix trên React Native

Tổng hợp các lỗi và cách fix trên React Native


fix error react native



Chào các tín đồ của React Native nói tiêng cũng như các bạn đang chuẩn bị nhập môn

RN và đang chuẩn bị bỏ cuộc chỉ vì cái màn hình này.





fix error react native

Màn hình lỗi thần thánh của React Native


Màn hình này thật tế nó cũng đáng sợ như cái màn hình xanh lè của bên Windows nhưng đượccái là nó “tử tế” hơn vì có chỉ dẫn cách fix. Dù là có fix cũng như không !!! Mình làm bài note này để tổng hợp các thể loại “đèn đỏ”, lỗi thường thấy trong RN và cáchđể fix chúng. Mục đích chính là để thông đường cho các anh em đang còn bị kẹt lại. Bài này để tiện mình chỉ show bên máy ảo iOS (đa số bị bên này):

Lỗi syntax: Nhìn vào thấy ngay



fix error react native
Lỗi syntax tại file App.js line thứ 10

Lỗi này nhìn vào là thấy được ngay như hình mô tả, rất dễ. Đôi khi cái backtrack
(các dòng show lỗi bên dưới) nó dài tới nỗi phải scroll mấy mét mới thấy được.

Thiếu Module: Install nhớ có “--save” nhé





fix error react native
Module redux không tìm thấy

Lỗi này thường bị khi chúng ta import sai. Có 3 nguyên nhân chính:
  1. Gõ sai chính tả tên package, hoặc hàm trong package.
  2. Module chưa được install vào node_modules: khi install thư viện các bạn nhớ
  3. dùng “--save” ở cuối để nó add vào file package.json. Rất có khả năng chúng ta phải xoá node_modules rồi `npm install` lại. Nếu không có `--save` là nó không kéo lib/package về.
  4. Module đã install, check trong thư mục node_modules thấy nhưng vẫn báo lỗi: tới đây hỏi
  5. tội thằng `watchman`, nó “watch” kiểu gì mà không detect được mình đã install.
  6. Trường hợp này các bạn follow theo các bước của màn hình đỏ là ok. Ngoài ra mình
  7. tặng các bạn thêm 1 số câu lệnh để clear cache nữa:
watchman watch-del-allrm -rf ./node_modulesnpm cache cleanyarn cache cleanrm -rf $TMPDIR/react-*yarn installnpm cache cleanyarn cache cleanyarn add uuidnpm start -- --reset-cache

Lỗi chưa chạy package server hoặc server đã ngủm





fix error react native

Nhiều bạn mới học RN không để ý là khi react native nó run vào máy ảo thì nó cần 1 con
server chạy lên trước (package server). Con server này sẽ đóng gói cho mình cái file bundle js
đẩy vào máy ảo. Ngoài ra nó cũng phải sống để mình reload máy ảo (ko cần build lại) nó sẽ
làm lại thao tác trên. Mọi ma thuật đều có cơ chế của nó, cơ chế hỏng thì ma thuật hết phép.
Cách fix: chạy lại với lệnh `npm start` hoặc `npm start -- --reset-cache`.
Chỗ này các bạn lưu nếu bị lỗi như hình sau:




fix error react native

Port 8081 đang bị chiếm dụng, các bạn tiếp tục sửa theo hướng dẫn là OK. Ví dụ như

sau:





fix error react native
Kill 2 process chiếm port là ok

Trường hợp OK là thế này:




fix error react native

Lỗi CFBundleIdentifer: người vô tội phải hứng hết tội lỗi. Tương tự lỗi trên RN >= 0.45





fix error react native
CFBundleIdentifer nó có tội gì đâu

Mình khẳng định CFBundleIdentifer vô tội trong vụ này. Ai đi mở cái CFBundleIdentifer trong XCode sửa là tới mùa quýt không fix được . Lỗi này hay bị khi app build không thành công
là nó đè đầu CFBundleIdentifer ra báo.
Chỗ này có rất nhiều trường hợp bị lỗi, đa phần là ở các lib native import sai header.
Hoặc gần đây RN >= 0.45 đã đưa lỗi này lên 1 tầm cao mới.
Cách fix: các bạn cứ bình tĩnh mở XCode lên và bấm build, sau đó mở vào mục debug sẽ
thấy chi tiết lỗi:




fix error react native
Lỗi sai đường dẫn tới SCROOT

Hình trên là mình lấy trong 1 project RN 0.46.1 lỗi build iOS. Mình có track lại quá trình build
thì thấy khi nó export biến SCROOT, đường dẫn nó đã bị lỗi syntax. Lỗi này thường bị khi
folder path tới project của các bạn có khoảng trắng. VD như sau, các bạn dùng pwd để check
nhé:




fix error react native
Chỗ React Native có khoảng trắng

Cái vụ này chuối vãi nồi @@. Chỉ có cách là dời cái project ra chỗ không có khoảng trắng nào
hết. Hồi trước mình có comment cách fix trên Github như sau:




fix error react native
Đây là lý do tại sao cái SCROOT nó không chạy

Ngoài ra nếu các bạn vẫn còn lỗi với RN >= 0.45 thì nguyên nhân là do cache.
Những bạn cũ thì sẽ hay bị tại hơn vì mấy bạn đang dùng 0.44.x, cache nó còn ở version này.
Cách nhận biết là ở cái hình XCode, các bạn sẽ thấy nó báo lỗi thư viện dolly hoặc double conversion .
Lúc này chúng ta phải đảm bảo là đã clear hết cache. Ai dùng Yarn thì nhớ clean cache
của Yarn luôn. Mình có 1 cách cho các bạn mới học RN là nên cài cái CleanMyMac,
dùng thằng này để clear hết cache luôn. Nghe hơi chuối nhưng mà hiệu quả hơn là ngồi
delete tay vì nó ở khá nhiều nơi.
Các bạn lưu ý hiện tại cho tới thời điểm bài note này thì cái lỗi quái đản này team RN
chưa fix chính thức. Đa số họ chỉ cách đưa RN xuống 0.44 chạy đỡ,
đó là né lỗi không phải fix lỗi.
Cuối cùng mình chúc các bạn sớm quay lại màn hình bình yên này:




fix error react native
Màn hình khỏi đầu của Reac Native trên iOS

Ôi cái giá của bình yên sao mà đắt đến thế !!!
Bài viết copy từ nguồn việt trần !!

No comments