sanity-plugin-media Issues uploading images

Hi there

I am using your media tool to load ecommerce images into Sanity but I am occasionally hitting issues and errors:

TypeError: Cannot read properties of undefined (reading 'asset')

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 the componentWillUnmount method.

Great tool though. Very helpful!

Steve

Sep 27 '21 23:09 wicka-aus

Hey Steve – thanks for flagging, I'm genuinely glad you're finding the plugin useful.

Are you able to provide a reproducible test case and/or a stack trace here? If you can provide clear steps I'd be more than happy to investigate further

Sep 27 '21 23:09 robinpyon

Hi

I am just in the media window uploading sets of images (each image approx 500 kb). Using latest Chrome browser.

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 the componentWillUnmount method. in DeskToolPanes (created by DeskTool) in DeskTool (created by withRouter(DeskTool)) in withRouter(DeskTool) (created by DeskToolPaneStateSyncer) in DeskToolPaneStateSyncer (created by DeskTool) in DeskToolFeaturesProvider (created by DeskTool) in DeskTool (created by RenderTool)

Sep 27 '21 23:09 wicka-aus

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 the componentWillUnmount method. in DeskToolPanes (created by DeskTool) in DeskTool (created by withRouter(DeskTool)) in withRouter(DeskTool) (created by DeskToolPaneStateSyncer) in DeskToolPaneStateSyncer (created by DeskTool) in DeskToolFeaturesProvider (created by DeskTool) in DeskTool (created by RenderTool)

printWarning	@	react-dom.development.js:89
error	@	react-dom.development.js:61
warnAboutUpdateOnUnmountedFiberInDEV	@	react-dom.development.js:23162
scheduleUpdateOnFiber	@	react-dom.development.js:21170
enqueueSetState	@	react-dom.development.js:12640
1614.Component.setState	@	react.development.js:365
(anonymous)	@	DeskToolPanes.js:204
SafeSubscriber.__tryOrUnsub	@	Subscriber.js:192
SafeSubscriber.next	@	Subscriber.js:130
Subscriber._next	@	Subscriber.js:76
Subscriber.next	@	Subscriber.js:53
DistinctUntilChangedSubscriber._next	@	distinctUntilChanged.js:55
Subscriber.next	@	Subscriber.js:53
MergeMapSubscriber.notifyNext	@	mergeMap.js:85
SimpleInnerSubscriber._next	@	innerSubscribe.js:14
Subscriber.next	@	Subscriber.js:53
Subject.next	@	Subject.js:47
ReplaySubject.nextInfiniteTimeWindow	@	ReplaySubject.js:41
next	@	shareReplay.js:34
SafeSubscriber.__tryOrUnsub	@	Subscriber.js:192
SafeSubscriber.next	@	Subscriber.js:130
Subscriber._next	@	Subscriber.js:76
Subscriber.next	@	Subscriber.js:53
MapSubscriber._next	@	map.js:41
Subscriber.next	@	Subscriber.js:53
DebounceTimeSubscriber.debouncedNext	@	debounceTime.js:48
dispatchNext	@	debounceTime.js:62
AsyncAction._execute	@	AsyncAction.js:64
AsyncAction.execute	@	AsyncAction.js:52
AsyncScheduler.flush	@	AsyncScheduler.js:43
setInterval (async)
AsyncAction.requestAsyncId	@	AsyncAction.js:35
AsyncAction.schedule	@	AsyncAction.js:28
Scheduler.schedule	@	Scheduler.js:13
AsyncScheduler.schedule	@	AsyncScheduler.js:31
DebounceTimeSubscriber._next	@	debounceTime.js:36
Subscriber.next	@	Subscriber.js:53
MergeMapSubscriber.notifyNext	@	mergeMap.js:85
SimpleInnerSubscriber._next	@	innerSubscribe.js:14
Subscriber.next	@	Subscriber.js:53
handler	@	windowWidth.js:13

Sep 27 '21 23:09 wicka-aus

This issue crashes the media app and all uploads stop:

Uncaught TypeError: Cannot read properties of undefined (reading 'asset') at static/js/app.bundle.js:11332 at Proxy.sort () at sort (static/js/app.bundle.js:11331) at static/js/app.bundle.js:18130 at produce (static/js/app.bundle.js:121362) at static/js/app.bundle.js:18129 at Array.reduce () at static/js/app.bundle.js:18096 at combination (static/js/app.bundle.js:120886) at dispatch (static/js/app.bundle.js:121670)

Sep 27 '21 23:09 wicka-aus

Interesting – I don't believe the source of the issue is the plugin itself. The stack trace seems to indicate that the issue is coming from DeskTool – which is part of the studio itself.

What version of the plugin and sanity are you using? (sanity versions)
Does the crash happen when uploading files when you access the plugin as a tool (e.g. via the 'Media' button in the menu). In this context, DeskTool shouldn't be visible.
Are you using any custom previews that are pointing to media assets?
If you're able to record a video of the steps leading up to the action (including prior to opening the media plugin) that would also be super helpful

If I had to hazard a guess, it could possibly be a custom preview set up which may not be checking for undefined asset values

Sep 28 '21 00:09 robinpyon

I am using the latest Sanity studio. Just updated it this morning.

The crash happens as the images are queued and uploading. I click on the global media tab, open a folder and select the images to upload.

The set up is just as per your installation instructions, nothing unusual.

You should be able to replicate by uploading a series of images.

Sep 28 '21 00:09 wicka-aus

Can I ask a question regarding image management in Sanity?

I have hundreds of images to deal with and I need an efficient way to upload them, and sort them, in their respective product data.

Do you know how I can solve this issue in or around Sanity? I have been spoilt by Magento's image tool and finding Sanity's process very time consuming.

Your tool has my images up quickly but getting them into an array on the product schema well ...

Sep 28 '21 00:09 wicka-aus

Re: this issue, unfortunately I'm at a bit a loss - I'm unable to replicate with the same environment and haven't had any similar reports come through (internally or otherwise) - but will leave this issue up for now.

Do you know how I can solve this issue in or around Sanity? I have been spoilt by Magento's image tool and finding Sanity's process very time consuming [...]

It might be worth bringing this question to the slack community who may have some good ideas on the matter

This custom component by Kevin Green might also be worth investigating further, which addresses a similar problem space (quickly populating arrays via GROQ): https://www.sanity.io/schemas/groq-reference-lookup-add-and-replace-7bc0bca5

Sep 28 '21 00:09 robinpyon

Thanks for your help.

The issue can be overcome by reloading the Sanity Studio in the browser, so there is a work-around. :)

Sep 28 '21 00:09 wicka-aus

sanity-plugin-media sanity-plugin-media copied to clipboard

Issues uploading images

sanity-plugin-media
sanity-plugin-media copied to clipboard