OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

Next.js - no warning/error by ESLint when no width/height/fill is provided as props

  • Thread starter Thread starter ERTY
  • Start date Start date
E

ERTY

Guest
To start with, I encountered a run time error when using Next.js Image Component. MyComponent.tsx

Code:
import Image from "next/image";
...
        <Image
          src={"/assets/live_view.jpg"}
          alt={"Live-View-Image"}
        />

Error Message

Code:
Warning: Cannot update a component (`HotReload`) while rendering a different component (`ForwardRef`). To locate the bad setState() call inside `ForwardRef`, follow the stack trace as described in ...

After providing a fill prop, the error is gone. That makes me thinking why VSCode/ESLint doesn't show an error on compiled time. I remember Next.js/ESLint will shows the error in the IDE when no such props provided from my experience on my other Next.js projects.

package.json

Code:
"next": "14.2.3",
"eslint": "8.27.0",
"eslint-config-next": "^14.2.3",

.eslintrc.json

Code:
{
  "extends": ["next/core-web-vitals"],
  "env": {
    "es6": true,
    "browser": true,
    "node": true,
    "jest": true
  }
}

Verified ESLint works. Also tried to restart VSCode but still no luck.

How to turn on/enable the ESLint warning/errors for Next.js Image component?

<p>To start with, I encountered a run time error when using Next.js Image Component.
MyComponent.tsx</p>
<pre><code>import Image from "next/image";
...
<Image
src={"/assets/live_view.jpg"}
alt={"Live-View-Image"}
/>
</code></pre>
<p>Error Message</p>
<pre><code>Warning: Cannot update a component (`HotReload`) while rendering a different component (`ForwardRef`). To locate the bad setState() call inside `ForwardRef`, follow the stack trace as described in ...
</code></pre>
<p>After providing a <code>fill</code> prop, the error is gone. That makes me thinking why VSCode/ESLint doesn't show an error on compiled time. I remember Next.js/ESLint will shows the error in the IDE when no such props provided from my experience on my other Next.js projects.</p>
<p>package.json</p>
<pre><code>"next": "14.2.3",
"eslint": "8.27.0",
"eslint-config-next": "^14.2.3",
</code></pre>
<p>.eslintrc.json</p>
<pre><code>{
"extends": ["next/core-web-vitals"],
"env": {
"es6": true,
"browser": true,
"node": true,
"jest": true
}
}

</code></pre>
<p>Verified ESLint works. Also tried to restart VSCode but still no luck.</p>
<p>How to turn on/enable the ESLint warning/errors for Next.js Image component?</p>
 
Top