Console Errors - Failed prop type and Function components cannot be given refs

ewlarson commented 4 years ago

Hello! I'm running into a two JS console errors attempting to run Mirador with the download plugin. The plugin actually works fine, but the errors are a bit disconcerting.

Error 1 - Chrome 78 / FF 70 / Safari 13 "Failed prop type: Invalid prop infoResponse of type boolean supplied to MiradorDownloadDialog, expected object."

Error 2 - Chrome 78 (Only) "Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?"

Please let me know if you need any additional information. My feature branch is linked above.

mejackreed commented 4 years ago

Could you link the manifest you are using for this?

ewlarson commented 4 years ago

Here's our manifest: https://raw.githubusercontent.com/BTAA-Geospatial-Data-Project/iiif-manifests/master/manifest_e1ec54e6-8bb4-496a-93f9-43ac901bea74.json

Karen and I are new to generating these, so if you see anything peculiar, please let us know.

ewlarson commented 4 years ago

FWIW, the same prop error appears with another IIIF Manifest from PSU via their ContentDM instance: https://digital.libraries.psu.edu/iiif/info/maps1/25535/manifest.json

"Failed prop type: Invalid prop infoResponse of type boolean supplied to MiradorDownloadDialog, expected object."

jkeck commented 4 years ago

I have seen some similar issues elsewhere in some plugins I have written. I believe this is ultimately coming upstream from Mirador. We're using the selectInfoResponse selector from Mirador.

As of this writing:

export const selectInfoResponse = createSelector(
  [
    getCanvas,
    selectInfoResponses,
  ],
  (canvas, infoResponses) => canvas && canvas.getImages()[0]
    && infoResponses[canvas.getImages()[0].getResource().getServices()[0].id]
    && !infoResponses[canvas.getImages()[0].getResource().getServices()[0].id].isFetching
    && infoResponses[canvas.getImages()[0].getResource().getServices()[0].id],
);

When the infoResponse is still being fetched, this will return false if I'm not mistaken (which is what you're seeing).

One thing we could possibly do is update this line https://github.com/ProjectMirador/mirador-dl-plugin/blob/759c952a1e21baa5ca3d5774199eda3aa308d896/src/MiradorDownloadDialog.js#L25

to also add || {} so that in the case that selectInfoResponse returns false we'll still be mapping an object to our prop.

ProjectMirador / mirador-dl-plugin

Console Errors - Failed prop type and Function components cannot be given refs #40