google không được xác định trong ứng dụng phản ứng bằng cách sử dụng create-react-app

Question

Tôi tạo ứng dụng phản hồi bằng cách sử dụng cli có tên là create-react-app. Có vẻ như Facebook đã làm rất nhiều thứ bên dưới, chẳng hạn như webpack vv Tuy nhiên, tôi đoán nó cũng có thể có một số hạn chế. Tôi cố gắng theo dõi this tutorial để tải api bản đồ google. Và khi tôi gỡ lỗi mã của mình, tôi có thể thấy bản đồ google đã được tham chiếu thành công. .

Nhưng sau đó tôi nhấp vào phát và cho phép ứng dụng hoàn tất chạy. Tôi nhận được google không được xác định lỗi từ webpackHotDevClient.js và ứng dụng của tôi bị treo.

Kể từ webpack biên dịch các tập tin một cách nhanh chóng, tôi giả sử nó có khó khăn để tải bản đồ google qua https?

Mọi suy nghĩ?

Answer 1

Như đã đề cập trong user guide, bạn cần đọc rõ ràng mọi biến toàn cầu từ window. Đặt này ở phía trên cùng của tập tin và nó sẽ làm việc:

const google = window.google; 

Lý do chúng tôi thực hiện điều này là bởi vì mọi người thường hiểu lầm sự khác biệt giữa các biến địa phương, mô-đun nhập khẩu, và các biến toàn cầu, và vì vậy chúng tôi muốn luôn luôn làm nó rõ ràng trong mã khi bạn sử dụng một biến toàn cục.

Nhân tiện, điều này không liên quan đến Webpack hoặc HTTPS. Bạn thấy điều này bởi vì chúng tôi sử dụng quy tắc linting cấm các biến toàn cầu không xác định.

Answer 2

Tôi nghĩ biến google đã có sẵn khi bạn nhập bản đồ google từ tập lệnh bằng html. Lỗi này do Eslint gây ra, bạn có thể thử và thêm dòng dưới đây vào đầu tệp của mình để tắt ESlint

/*global google*/