Next.js升级至10.0.8+后getConfig返回undefined报错如何解决

项目启动运行后抛出如下错误：
Cannot destructure property 'publicRuntimeConfig' of '(0 , config_1.default)(...)' as it is undefined

对应触发报错的代码片段：

import getConfig from 'next/config';
  
const { publicRuntimeConfig } = getConfig();

异常复现规律：

• Next.js版本为10.0.7及更低版本时，上述代码可正常运行，能正确读取到publicRuntimeConfig下的配置项
• 升级Next.js到10.0.8及更高版本后，getConfig()调用始终返回undefined，解构逻辑直接触发上述报错

Next.js 10.0.8版本调整了next/config模块的初始化时机：配置对象的挂载依赖Next.js运行时上下文的完成，而文件顶层作用域的代码执行时机早于运行时上下文初始化，因此顶层直接调用getConfig()无法拿到配置对象，会返回undefined。
10.0.7及更早版本不存在这个时序问题，配置在模块加载阶段就已完成挂载，所以顶层调用可以正常取值。

禁止在模块顶层作用域直接调用getConfig()，将调用逻辑移动到运行时上下文已就绪的执行位置即可，包括但不限于函数组件内部、类组件生命周期方法、事件回调、业务工具函数内部。

参考写法 #

函数组件内使用 #

import getConfig from 'next/config';

export default function SiteFooter() {
  // 组件渲染时运行时已完成初始化，可正常获取配置
  const { publicRuntimeConfig } = getConfig();
  return <footer>备案号：{publicRuntimeConfig.icp}</footer>
}

接口请求工具中使用 #

import getConfig from 'next/config';

export function fetchApi(path, params) {
  // 接口请求触发时应用早已完成初始化，可正常读取配置
  const { publicRuntimeConfig } = getConfig();
  return fetch(`${publicRuntimeConfig.apiDomain}${path}`, {
    ...params,
    headers: {
      'Content-Type': 'application/json',
      ...params?.headers
    }
  })
}

如果需要全局统一读取配置，可以封装惰性加载的配置工具：

// src/utils/app-config.js
import getConfig from 'next/config';

let cachedConfig = null;
export function getAppRuntimeConfig() {
  if (!cachedConfig) {
    cachedConfig = getConfig();
  }
  return cachedConfig.publicRuntimeConfig;
}

其他业务文件引入getAppRuntimeConfig方法使用即可，注意不要在文件顶层直接调用该方法，需在业务逻辑执行阶段调用。

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