Nguyên nhân và cách khắc phục lỗi "Cannot use import statement outside a module" khi add thư viện mới trong môi trường typescript - Công ty Phát triển Phần mềm Quang Trung

Lỗi “cannot use import statement outside a module” thường xảy ra trong môi trường JavaScript hoặc TypeScript khi bạn cố gắng sử dụng câu lệnh import bên ngoài một tệp module.

Giả sử khi bạn add thư viện antd vào project của mình, có thể gặp phải lỗi này vì phiên bản mới của Antd Design sử dụng module để import các thành phần.

Dưới đây là một số nguyên nhân và giải pháp:

Kiểm tra Phiên bản Ant Design: Đảm bảo bạn đang sử dụng phiên bản Ant Design tương thích với môi trường module. Phiên bản Ant Design sau 4.x thường sử dụng module. Nếu bạn đang sử dụng phiên bản cũ hơn, hãy cập nhật phiên bản Ant Design của bạn.
Kiểm tra Cấu hình TypeScript: Nếu bạn đang sử dụng TypeScript, đảm bảo bạn đã cấu hình TypeScript để hỗ trợ module và cấu hình tệp tsconfig.json của bạn một cách chính xác.
Kiểm tra Cấu hình ESLint: Nếu bạn đang sử dụng ESLint, đảm bảo bạn đã cấu hình nó để hỗ trợ các cú pháp module.
Kiểm tra Dạng Tệp: Đảm bảo rằng tệp JavaScript của bạn có phải là một module bằng cách sử dụng đuôi tệp .js hoặc .mjs, hoặc bằng cách đặt "type": "module" trong tệp package.json của bạn.

Nếu bạn vẫn gặp lỗi sau khi thực hiện các bước trên, hãy xem lại cách bạn đã cài đặt và cấu hình dự án của mình để đảm bảo rằng mọi thứ được cấu hình đúng cách để hỗ trợ module.

Ngoài ra, trong hành trình làm coder của mình, mình đã từng gặp lỗi tương tự với “antd”: “^5.14.2”. Mặc dù, mình đã kiểm tra lại các nguyên nhân bên trên và chúng không hề có vấn đề nào cả. Và cuối cùng mình phát hiện ra rằng chúng ta cần bổ sung thêm phần mở rộng tệp (File Extensions), các gói dịch mã cho antd như sau:

– Trong file nextjs.config.js bạn thêm dòng lệnh này:

transpilePackages: [ “antd”, “@ant-design”, “rc-util”, “rc-pagination”, “rc-picker”, “rc-notification”, “rc-tooltip”, “rc-tree”, “rc-table” ],

Bài viết này là những thông tin mình tìm hiểu và tích góp được đối với typseScript. Vì vậy, bạn không thể áp dụng chúng vào các môi trường khác. Đối với lỗi “cannot use import statement outside a module” nó thường xảy ra do việc sử dụng các cú pháp import cho các module được viết bằng ECMAScript (ES) khi NodeJS đang mong đợi từ khóa “require” được hệ thống CommonJS module sử dụng. Vì vậy, khi gặp lỗi này với những môi trường khác bạn nên tìm hiểu mối liên kết giữa module và môi trường của bạn.