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

user_878877 0
Viewed 469

I'm getting the following error from ESLint:

Component definition is missing display name

On the following code:

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

Specifically, it is the code starting with the arrow function in the loading property on line 3.

I've followed the advice in the docs for this error but have not been able to solve the problem.

Any advice would be welcome (I do not want to disable the rule unless there is no other option)

eslint next.js javascript
1 Answers

After an hour of trying, then posting this question, I found the answer to be something I thought I'd tried:

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

Using a named function instead of an arrow function.

user_8788770
Related