Next.js匿名箭头函数导致Fast Refresh无法保留组件状态如何修复？

你直接导出TVChartContainer未生效的核心原因是next/dynamic生成的组件默认无显式名称，Fast Refresh 会同时校验所有层级导出组件的命名合法性，按照以下两种方案修改均可解决问题：

方案1（推荐，适用于页面有额外逻辑的场景） #

给页面根组件添加显式命名，完整代码如下：

import React from 'react';
import dynamic from 'next/dynamic';

const TVChartContainer = dynamic(
    () =>
        import('../components/TVChartContainer').then(mod => mod.TVChartContainer),
    { ssr: false },
);

const IndexPage = () => <TVChartContainer />;

export default IndexPage;

方案2（适用于页面无额外逻辑，无需包裹组件的场景） #

给动态导入生成的组件显式设置displayName后直接导出，完整代码如下：

import React from 'react';
import dynamic from 'next/dynamic';

const TVChartContainer = dynamic(
    () =>
        import('../components/TVChartContainer').then(mod => mod.TVChartContainer),
    { ssr: false },
);

TVChartContainer.displayName = 'TVChartContainer';

export default TVChartContainer;

原理说明 #

Next.js 的 Fast Refresh 能力依赖组件的静态名称做状态映射，匿名箭头函数、未设置displayName的动态导入组件都会被判定为无合法标识的组件，进而触发状态无法保留的报错。

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