Hôm nay tôi đang cố gắng nhập thành phần tùy chỉnh của mình nhưng không thành công với lỗi sau Lỗi chưa tìm thấy: Vi phạm bất biến: Loại phần tử không hợp lệ: mong đợi một chuỗi (đối với các thành phần tích hợp sẵn) hoặc một lớp / hàm (đối với các thành phần hỗn hợp) nhưng có: đối tượng Trong ReactJS. Chúng ta sẽ tìm hiểu về Tất cả các giải pháp khả thi Vì vậy, Hãy bắt đầu với bài viết này.

Làm thế nào không có lỗi: Vi phạm bất biến: Loại phần tử không hợp lệ: mong đợi một chuỗi (cho các thành phần tích hợp sẵn) hoặc một lớp / hàm (cho các thành phần hỗn hợp) nhưng có: đối tượng Lỗi xảy ra?

Tôi đang cố gắng nhập thành phần tùy chỉnh của mình nhưng không thành công với lỗi sau.

Uncaught Error: Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object

Vì vậy, ở đây tôi viết tất cả các giải pháp khả thi mà tôi đã cố gắng giải quyết lỗi này.

Cách giải quyết lỗi chưa xảy ra: Vi phạm bất biến: Loại phần tử không hợp lệ: mong đợi là một chuỗi (đối với các thành phần tích hợp sẵn) hoặc một lớp / hàm (đối với các thành phần hỗn hợp) nhưng mắc phải: đối tượng Lỗi?

  1. Cách giải quyết lỗi chưa xảy ra: Vi phạm bất biến: Loại phần tử không hợp lệ: mong đợi là một chuỗi (đối với các thành phần tích hợp sẵn) hoặc một lớp / hàm (đối với các thành phần hỗn hợp) nhưng mắc phải: đối tượng Lỗi?

    Để giải quyết lỗi chưa xảy ra: Vi phạm bất biến: Loại phần tử không hợp lệ: dự kiến ​​là một chuỗi (đối với các thành phần tích hợp sẵn) hoặc một lớp / hàm (đối với các thành phần hỗn hợp) nhưng mắc phải: Lỗi đối tượng Bạn cần sử dụng request (đường dẫn) .default Đây là ví dụ của tôi: var YourComponent = request (‘./ components / YourComponent’). default Và bây giờ, lỗi của bạn phải được giải quyết.

  2. Lỗi chưa tìm thấy: Vi phạm bất biến: Loại phần tử không hợp lệ: mong đợi một chuỗi (đối với các thành phần tích hợp sẵn) hoặc một lớp / hàm (đối với các thành phần hỗn hợp) nhưng có: đối tượng

    Để giải quyết lỗi không cần thiết: Vi phạm bất biến: Loại phần tử không hợp lệ: dự kiến ​​là một chuỗi (đối với các thành phần tích hợp sẵn) hoặc một lớp / hàm (đối với các thành phần hỗn hợp) nhưng mắc phải: Lỗi đối tượng Nếu bạn đang sử dụng webpack thì bạn nên nhập thành phần của mình mà không có {} và điều đó đã làm việc cho tôi. Đây là ví dụ của tôi: nhập YourComponent từ ‘../components/your_component.js’; Và lỗi của tôi đã được giải quyết hy vọng lỗi của bạn cũng được giải quyết.

Giải pháp 1: dành cho webpack

Nếu bạn đang sử dụng webpack thì bạn nên nhập thành phần của mình mà không cần {} và điều đó đã làm việc cho tôi. Đây là ví dụ của tôi.

import YourComponent from '../components/your_component.js';

Và lỗi của tôi đã được giải quyết hy vọng lỗi của bạn cũng được giải quyết.

Giải pháp 2: Sử dụng request (đường dẫn) .default

Bạn cần sử dụng request (đường dẫn) .default Đây là ví dụ của tôi.

var YourComponent = require('./components/YourComponent').default

Và bây giờ, lỗi của bạn phải được giải quyết.

Giải pháp 3: Sử dụng react-router-dom

Sử dụng react-router-dom thay vì bộ định tuyến phản ứng Cũng giống như mã dưới đây.

import { Link } from 'react-router-dom'

Bây giờ, lỗi của bạn sẽ được sửa.

Bản tóm tắt

Đó là tất cả về lỗi này. Hy vọng chúng tôi đã giải quyết được lỗi của bạn. Bình luận bên dưới Suy nghĩ của bạn và thắc mắc của bạn. Ngoài ra, hãy Comment bên dưới giải pháp nào phù hợp với bạn?