React 16从15.x升级后出现Google Places未定义错误求助

嘿，这个问题我之前在升级React版本的时候也碰到过，结合React 16的变化和Google Maps的加载逻辑，咱们来一步步理清楚：

问题原因 #

最可能的核心原因是ESLint检查规则的变化：
React 16发布后，对应的官方构建工具（比如create-react-app）通常会升级ESLint的版本和默认配置，其中no-undef规则会变得更严格——它会把所有未在当前模块内声明的变量标记为“未定义”。而google是通过外部HTML脚本引入的全局变量，ESLint不知道它是合法的全局变量，所以抛出了no-undef错误。

而在React 15时期，要么你的构建配置没有启用这么严格的no-undef检查，要么已经手动配置过忽略google这个全局变量，所以之前没触发这个报错。

另外还有一种次要可能：React 16的渲染初始化速度比15更快，导致你的工具模块在Google Maps脚本还没加载完成时就已经执行了，此时window.google还未存在，也会触发这个错误。

修复建议 #

针对不同的场景，你可以选择以下几种方案：

1. 告诉ESLintgoogle是合法全局变量 #

这是最直接解决ESLint报错的方法：

• 单文件临时处理：在用到google的工具文件顶部添加一行注释，明确声明这是全局变量：

  /* global google */
  const map = new google.maps.Map(document.createElement('div'));
  // 后续代码...
  

• 全局配置（推荐）：在你的ESLint配置文件（比如.eslintrc.js或package.json的eslintConfig字段）中添加全局变量声明，让所有文件都能识别google：
  如果是.eslintrc.js：

  module.exports = {
    // 其他配置项...
    globals: {
      google: 'readonly' // readonly表示这个全局变量不会被修改
    }
  };
  

  如果是package.json：

  "eslintConfig": {
    "globals": {
      "google": "readonly"
    }
  }
  

2. 确保Google Maps脚本先于React代码加载 #

如果是脚本加载时机的问题，你可以调整入口HTML的脚本加载逻辑，保证React应用只有在Google Maps脚本加载完成后才初始化：
修改入口HTML的脚本标签，添加onload回调：

<script 
  type="text/javascript" 
  src="https://maps.googleapis.com/maps/api/js?libraries=places&key=my-api-key"
  async defer
  onload="initReactApp()"
></script>

然后把原来的React入口代码（比如ReactDOM.render）放到initReactApp函数中：

function initReactApp() {
  ReactDOM.render(<App />, document.getElementById('root'));
}

这样就能彻底避免React代码在google变量存在前执行的情况。

3. 动态加载Google Maps脚本（优雅进阶） #

如果不想依赖入口HTML的脚本，或者需要按需加载，你可以在工具模块中动态加载Google Maps脚本，确保使用google前它已经可用：

let googlePlacesAutocomplete;
let googlePlacesService;

// 封装脚本加载逻辑，确保只加载一次
function loadGoogleMapsScript() {
  return new Promise((resolve, reject) => {
    // 如果已经加载过，直接返回
    if (window.google) return resolve(window.google);
    const script = document.createElement('script');
    script.src = 'https://maps.googleapis.com/maps/api/js?libraries=places&key=my-api-key';
    script.onload = () => resolve(window.google);
    script.onerror = (err) => reject(new Error('Failed to load Google Maps script'));
    document.body.appendChild(script);
  });
}

export const googlePlacesAutoComplete = async (keyword, callback) => {
  try {
    const google = await loadGoogleMapsScript();
    // 初始化一次服务实例
    if (!googlePlacesAutocomplete) {
      const map = new google.maps.Map(document.createElement('div'));
      googlePlacesAutocomplete = new google.maps.places.AutocompleteService();
      googlePlacesService = new google.maps.places.PlacesService(map);
    }
    googlePlacesAutocomplete.getQueryPredictions({input: keyword}, (predictions, status) => {
      if(status !== google.maps.places.PlacesServiceStatus.OK) return callback(null);
      return callback(predictions);
    });
  } catch (err) {
    console.error('Google Places service error:', err);
    callback(null);
  }
}

这种方式更灵活，也能避免全局变量依赖的问题。

内容的提问来源于stack exchange，提问作者Sam