next.js 动态导入时出现 ESLint react/display-name 错误

Question

我从 ESLint 收到以下错误：

Component definition is missing display name

关于以下代码：

const Disqus = dynamic(() => import('@/components/blog/disqus'), {
  ssr: false,
  loading: () => (
    <div className="text-center">
      <Loader />
    </div>
  ),
})

具体就是第3行loading属性中箭头函数开头的代码

我已按照文档中的建议解决此错误，但未能解决问题。

欢迎任何建议（除非没有其他选择，否则我不想禁用该规则）

Answer 1

经过一个小时的尝试，然后发布了这个问题，我发现答案是我认为我已经尝试过的：

const Disqus = dynamic(() => import('@/components/blog/disqus'), {
  ssr: false,
  loading: function Disqus() {
    return (
      <div className="text-center">
        <Loader />
      </div>
    )
  },
})

使用命名函数而不是箭头函数。

next.js 动态导入时出现 ESLint react/display-name 错误

ESLint react/display-name error on next.js dynamic import

javascript

eslint

next.js