时间戳

首页 > 解决方案 > next.js 动态导入时的 ESLint react/display-name 错误

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

问题描述

我从 ESLint 收到以下错误：

Component definition is missing display name

在以下代码上：

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

loading具体来说，就是第3 行属性中以箭头函数开头的代码。

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

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

标签： javascriptnext.jseslint

解决方案

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

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

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

推荐阅读