CODEWITHSUNDEEP
javascriptnext.jseslint
michaelward82
michaelward82

Reputation: 4736

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

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)

Upvotes: 1

Views: 723

Answers (1)

michaelward82
michaelward82

Reputation: 4736

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.

Upvotes: 2

Related Questions