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)
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.