Next.js-匿名箭头函数导致"快速刷新"不保留本地组件状态(警告)

Question

我当前遇到此警告，指向配置文件中的一个未命名对象，命名它并不能解决此警告。以下是详细的警告和示例。

警告：

Anonymous arrow functions cause Fast Refresh to not preserve local component state.
Please add a name to your function, for example:
Before
export default () => <div />;
After
const Named = () => <div />;
export default Named;

之前：

export const = {
apiUrl: process.env.NEXT_PUBLIC_API_URL as string,
commitRef: process.env.NEXT_PUBLIC_VERCEL_GIT_COMMIT_REF as string,
ldSdkKey: process.env.NEXT_PUBLIC_LD_SDK_KEY as string,
imgixBaseUrl: process.env.NEXT_PUBLIC_IMGIX_BASE_URL as string,
imgixApiKey: process.env.NEXT_PUBLIC_IMGIX_API_KEY as string,
imgixResourceID: process.env.NEXT_PUBLIC_IMGIX_RESOURCE_ID as string,
};

尝试解决/src/config.ts:

const AppConfig = {
apiUrl: process.env.NEXT_PUBLIC_API_URL as string,
commitRef: process.env.NEXT_PUBLIC_VERCEL_GIT_COMMIT_REF as string,
ldSdkKey: process.env.NEXT_PUBLIC_LD_SDK_KEY as string,
imgixBaseUrl: process.env.NEXT_PUBLIC_IMGIX_BASE_URL as string,
imgixApiKey: process.env.NEXT_PUBLIC_IMGIX_API_KEY as string,
imgixResourceID: process.env.NEXT_PUBLIC_IMGIX_RESOURCE_ID as string,
};
export default AppConfig;

希望其他人也经历过这种情况，并找到了解决方案。

Answer 1

原来问题是我们的旧版本Next.js没有指出警告的正确原因，但仍然发出了警告。接下来的更新引导我找到了问题代码，我能够解决它。