gatsby-plugin-image onStartLoad throws warning react dev tools

[lnikell]

Preliminary Checks

• [X] This issue is not a duplicate. Before opening a new issue, please search existing issues: https://github.com/gatsbyjs/gatsby/issues
• [X] 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

1. Go to https://github.com/pixel-point/gatsby-image-on-load-bug , clone repository, npm install && npm start
2. Open http://localhost:8000/page-2
3. 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_

[mosesoak]

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

[mosesoak]

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!

[pranav0281999]

Hi @LekoArts , can I be assigned to this issue? Will be trying to create a PR within the next few days.

[pranav0281999]

The issue is with this line. Just converting the type of props isn't removing the extra properties that come with the object, like onStartLoad. It won't be possible to remove these properties while converting the type.

The ways extra props can be removed are -

• either explicitly mention which properties we want to delete in the code and delete those. But this is not optimal IMO.
• use a module like ts-transformer-keys which would be very easy to use but would require configuration changes.

@LekoArts @mosesoak or anyone else, what do you think can be done?

[daryazata]

@wardpeet @iChenLei im looking for a 'good first issue'. Here there are some issues open even if there is a PR that solves it?

[mosesoak]

This might be fixed now according to Ward's comment https://github.com/gatsbyjs/gatsby/pull/34224#issuecomment-1127628449

[LekoArts]

This was indeed fixed, if you check out https://github.com/gatsbyjs/gatsby/blob/9ea3129e371cf7844bec2750885c2e2a18b18ca4/packages/gatsby-plugin-image/src/components/gatsby-image.browser.tsx you'll see that onStartLoad isn't placed onto the element anymore.

[brysongilbert]

I believe this is still an issue specifically when rendering the img fallback inside of picture elements, possibly here: https://github.com/gatsbyjs/gatsby/blob/d46c81585e40bc093bdd71389581a6d86f1587c1/packages/gatsby-plugin-image/src/components/picture.tsx#L46C17-L46C17

On gatsby 5.11 and gatsby-plugin-image 3.11 we see this show up in tests:

console.error
      Warning: Unknown event handler property `onStartLoad`. It will be ignored.
          at img
          at createElement (/<redacted-path-to-project>/node_modules/gatsby-plugin-image/src/components/picture.tsx:45:5)
          at picture
          at fallback (/<redacted-path-to-project>/node_modules/gatsby-plugin-image/src/components/picture.tsx:64:32)
          at MainImage
          at React (/<redacted-path-to-project>/node_modules/gatsby-plugin-image/src/components/layout-wrapper.tsx:107:17)
          at div
          at imgClassName (/<redacted-path-to-project>/node_modules/gatsby-plugin-image/src/components/gatsby-image.server.tsx:20:5)
          at div
          at // <our internal component which renders a GatsbyImage>
          ...