Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

gatsby-plugin-image onStartLoad throws warning react dev tools

See original GitHub issue

Preliminary Checks

This issue is not a duplicate. Before opening a new issue, please search existing issues: https://github.com/gatsbyjs/gatsby/issues
This issue is not a question, feature request, RFC, or anything other than a bug report directly related to Gatsby. Please post those things in GitHub Discussions: https://github.com/gatsbyjs/gatsby/discussions

Description

Using onStartLoad causing React Dev Tools throwing the following message:

Warning: Unknown event handler property `onStartLoad`. It will be ignored.

It happens no matter you use StaticImage or GatsbyImage component.

Reproduction Link

https://github.com/pixel-point/gatsby-image-on-load-bug

Steps to Reproduce

Go to https://github.com/pixel-point/gatsby-image-on-load-bug , clone repository, npm install && npm start
Open http://localhost:8000/page-2
Open Console with Installed React Dev Tools

Expected Result

There should not be a warning.

Actual Result

Warning appears in the console while running on local machine.

https://user-images.githubusercontent.com/2697570/139597637-b92adf05-8175-4204-823b-0d2bcbf9769d.mp4

Environment

System:
    OS: macOS 12.0.1
    CPU: (8) arm64 Apple M1
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 16.9.1 - /usr/local/bin/node
    npm: 7.21.1 - /usr/local/bin/npm
  Languages:
    Python: 2.7.18 - /usr/bin/python
  Browsers:
    Chrome: 95.0.4638.69
    Safari: 15.1
  npmPackages:
    gatsby: ^3.12.0 => 3.14.5
    gatsby-alias-imports: ^1.0.6 => 1.0.6
    gatsby-plugin-image: ^1.14.0 => 1.14.1
    gatsby-plugin-manifest: ^3.12.0 => 3.14.0
    gatsby-plugin-offline: ^4.12.0 => 4.14.0
    gatsby-plugin-postcss: ^4.12.0 => 4.14.0
    gatsby-plugin-react-helmet: ^4.12.0 => 4.14.0
    gatsby-plugin-sass: ^4.12.0 => 4.14.0
    gatsby-plugin-sharp: ^3.14.0 => 3.14.2
    gatsby-plugin-sitemap: ^4.8.0 => 4.10.0
    gatsby-plugin-svgr-svgo: ^1.2.2 => 1.2.2
    gatsby-source-filesystem: ^3.12.0 => 3.14.0
    gatsby-transformer-sharp: ^3.14.0 => 3.14.0



### Config Flags

_No response_

Issue Analytics

State:
Created 2 years ago
Reactions:1
Comments:7 (1 by maintainers)

Top GitHub Comments

2reactions

mosesoakcommented, Nov 5, 2021

Thanks for filing, it affects our app and we will be tracking this issue for a fix. Stuff like this is important despite being innocuous, since we don’t like to have console errors showing in our production sites.

BTW this should not be changed to a warning, it can be fixed by not adding the non-DOM prop to a dom node, so it will entirely go away once patched. Thanks!

1reaction

mosesoakcommented, Nov 4, 2021

This is probably caused by spreading the wrapperProps onto the img element here without deleting special Gatsby props like onStartLoad first.

Top Results From Across the Web

window.onload settimeout Code Example

Error: Requiring module "node_modules\react-native-reanimated\src\Animated.js", which threw an exception: Error: Reanimated 2 failed to create a worklet, maybe ...

sitemap-questions-36.xml - Stack Overflow

... https://stackoverflow.com/questions/1451045/image-alignment-in-text ... /8708256/charset-iso-8859-1-with-doctype-html-is-throwing-a-warning 2022-03-09 ...

Profile for GitHub - Linknovate

The loading time drops from almost 2 minutes on a 3G internet connection down to seconds. The gatsby-plugin-image plugin also takes advantage of...

Fresh – Next-gen web framework - Hacker News

Sounds dorky but it dramatically speeds up load times and such by serving flat HTML and injecting JS afterward, like the old days,...