Image preview out of step with what displays on page

Hi again! So sorry running into another issue with image preview.

When I upload a new file the image on the page updates, but the preview stays the previous image/state. When I refresh the browser both load to the correct state.

I’m also getting the following error in the console, not sure if they are related?

Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function.

Here’s a link to my test repo:

Here’s my dependencies:

β”œβ”€β”¬ gatsby-plugin-tinacms@0.2.2
β”‚ └─┬ tinacms@0.21.2
β”‚   β”œβ”€β”€ @tinacms/alerts@0.1.4
β”‚   β”œβ”€β”€ @tinacms/core@0.9.0
β”‚   β”œβ”€β”¬ @tinacms/fields@0.12.0
β”‚   β”œβ”€β”¬ @tinacms/form-builder@0.3.5
β”‚   β”œβ”€β”¬ @tinacms/forms@0.6.0
β”‚   β”œβ”€β”€ @tinacms/icons@0.14.0
β”‚   β”œβ”€β”€ @tinacms/media@0.1.0
β”‚   β”œβ”€β”€ @tinacms/react-alerts@0.1.9
β”‚   β”œβ”€β”¬ @tinacms/react-core@0.3.0
β”‚   β”œβ”€β”¬ @tinacms/react-forms@0.2.0
β”‚   β”œβ”€β”€ @tinacms/react-modals@0.1.9
β”‚   β”œβ”€β”€ @tinacms/react-screens@0.1.8
β”‚   β”œβ”€β”¬ @tinacms/react-sidebar@0.2.0
β”‚   β”œβ”€β”¬ @tinacms/react-toolbar@0.2.0
β”‚   β”œβ”€β”¬ @tinacms/styles@0.5.1
β”œβ”€β”¬ gatsby-tinacms-git@0.5.4
β”‚ β”œβ”€β”¬ @tinacms/api-git@0.7.0
β”‚ └── @tinacms/git-client@0.6.7
β”œβ”€β”¬ gatsby-tinacms-json@0.8.28
β”œβ”€β”¬ gatsby-tinacms-remark@0.8.3
β”‚ β”œβ”€β”¬ react-tinacms-editor@0.8.1
β”‚ β”œβ”€β”¬ react-tinacms-inline@0.8.0

Thanks so much for your help!

Hi! just checking back to see if anyone had any tips to potentially fix this or is experiencing something similar? Here’s my previewSrc set up (example repo with all my files above):

previewSrc: (formValues, fieldProps) => {
          const pathName = fieldProps.input.name.replace("rawJson", "jsonNode")
          const imageNode = get(formValues, pathName)
          if (!imageNode || !imageNode.childImageSharp) return ""
          return imageNode.childImageSharp.fluid.src
        },

Steps to reproduce:

  1. Click on image preview in sidebar to upload new image
  2. Image in main content area will update to the new image (json source file points to correct file as well), but the image preview in the sidebar will stay the same.
  3. Click on image preview in sidebar to upload another image
  4. Image in main content area will update to this new image, but the image preview in the sidebar will now show the image from step 2.
  5. Reload page, image preview in sidebar will now matches image content area.

Thanks so much again for your help!

@ncphi any suggestions on how I might be able to fix?

I can reproduce this behavior in demo-gatsby. This may be a bug. @Alex do you want to create an issue in the repo?

Sure thing! TYSM for taking a look @kendall

Ok got it up there now.

1 Like