本地主机中未捕获的运行时错误：3000

Question

我正在使用地图 JavaScript API（谷歌 API）并在我的 React 应用程序中遇到未捕获的运行时错误。该网站似乎运行良好，因此很难知道这个错误来自哪里。答案可能只是让应用程序忽略此警告，但真正的解决方案将是理想的选择。

我确实使用 create-react-app 来构建这个应用程序。我想在没有 CRA 的情况下重建这个应用程序，所以如果你能引导我到一个简单的起点，那就太好了。

如果我遗漏任何信息，请发表评论，我会尽快回复。 有关错误消息的更多信息：

留言：

未捕获的运行时错误：

 错误

 脚本错误。
    在handleError（http://localhost:3000/static/js/bundle.js:39164:58）
    在http://localhost:3000/static/js/bundle.js:39183:7

另外，我收到了“‘google’未定义 no-undef”错误，但它来自 ESlint，我添加了一个 /global google/ 来摆脱它。

这是 package.json 文件：

这是在 app.js 文件中运行的 React 组件。

/*global google*/ 
import React, { useEffect, useRef } from 'react';


const BUSINESS_LATITUDE = 35.090120;
const BUSINESS_LONGITUDE = -80.684870;

const LawnCareMapComponentTest = () => {
  const inputRef = useRef(null);
  const mapRef = useRef(null);
  const mapInstance = useRef(null);
  const markerInstance = useRef(null);

  useEffect(() => {
    const script = document.createElement('script');
    script.src = `https://maps.googleapis.com/maps/api/js
key=WORKINGAPIKEY&libraries=places&callback=initMap`;
    script.type = 'text/javascript';
    script.async = true;
    script.defer = true;
    document.body.appendChild(script);

    window.initMap = () => {
      const input = inputRef.current;
      const mapContainer = mapRef.current;
      const autocomplete = new google.maps.places.Autocomplete(input);

      
      const defaultCenter = {
        lat: BUSINESS_LATITUDE,
        lng: BUSINESS_LONGITUDE,
      };
      mapInstance.current = new google.maps.Map(mapContainer, {
        center: defaultCenter,
        zoom: 15,
      });

      
      markerInstance.current = new google.maps.Marker({
        position: defaultCenter,
        map: mapInstance.current,
      });

      autocomplete.addListener('place_changed', () => {
        const place = autocomplete.getPlace();
        const destination = {
          lat: place.geometry.location.lat(),
          lng: place.geometry.location.lng(),
        };

        
        mapInstance.current.setCenter(destination);
        markerInstance.current.setPosition(destination);

        new google.maps.Marker({
            position: destination,
            map: mapInstance.current,
          });

        const origin = {
            lat: BUSINESS_LATITUDE,
            lng: BUSINESS_LONGITUDE,
          };
          
          const service = new google.maps.DistanceMatrixService();
          service.getDistanceMatrix(
            {
              origins: [origin],
              destinations: [destination],
              travelMode: google.maps.TravelMode.DRIVING,
            },
            (response, status) => {
              if (status === 'OK') {
                const distanceInMeters =
                  response.rows[0].elements[0].distance.value;
                const distanceInMiles = distanceInMeters / 1609.34;
          
                if (distanceInMiles <= 40) {
                  //  within 40 miles of the business
                  alert('Within 40 miles!');
                } else {
                  // not within 40 miles of the business
                  alert('Not within 40 miles!');
                }
              } else {
                console.error('Error:', status);
              }
            }
          );
          
      });
    };

    return () => {
      document.body.removeChild(script);
    };
  }, []);

  return (
    <div>
      <h1>See if you Qualify</h1>
      <div style={{ display: 'flex' }}>
        <input ref={inputRef} type="text" placeholder="Enter your address" />
        <div
          ref={mapRef}
          style={{ width: '300px', height: '300px', marginLeft: '10px' }}
        />
      </div>
    </div>
  );
};

export default LawnCareMapComponentTest;

网站工作正常，但出现错误。

Answer 1

建议采取的行动： 禁用浏览器扩展：

禁用与数字钱包相关的扩展，例如 MetaMask、Coinbase Wallet 和其他类似扩展。然后，重新运行您的项目并检查错误是否仍然存在。 以隐身模式打开项目：

在浏览器的隐身窗口中打开您的项目。除非手动允许，否则扩展在此模式下通常处于非活动状态。 检查项目中是否添加了资源：

确保没有与钱包相关的资源或库被无意添加到您的项目中。 检查外部脚本：

如果您正在使用任何 CDN 或外部资源，请检查它们以确保您的项目中未包含与钱包相关的脚本。