Error with shopify.saveBar.leaveConfirmation(): Minified React error #301

meditto commented 3 months ago

Describe the bug

I'm encountering an issue with the shopify.saveBar.leaveConfirmation() function after a recent update to the savebar. The error message points to a minified React erro:

render-common-C9p1y-rqQAIQ.js:23  Uncaught Error: Minified React error #301; visit https://reactjs.org/docs/error-decoder.html?invariant=301 for the full message or use the non-minified dev environment for full errors and additional helpful warnings.
    at Mv (render-common-C9p1y-rqQAIQ.js:23:20194)
    at Uv (render-common-C9p1y-rqQAIQ.js:25:3138)
    at sN (render-common-C9p1y-rqQAIQ.js:25:45157)
    at aN (render-common-C9p1y-rqQAIQ.js:25:40069)
    at JK (render-common-C9p1y-rqQAIQ.js:25:39997)
    at Y5 (render-common-C9p1y-rqQAIQ.js:25:39850)
    at J9 (render-common-C9p1y-rqQAIQ.js:25:34883)
    at _ (render-common-C9p1y-rqQAIQ.js:10:1599)
    at O (render-common-C9p1y-rqQAIQ.js:10:1962)
    at Hv.Ii.<computed> (polyfills-_0C5sq0bp6zl.js:2:13226)
Mv @ render-common-C9p1y-rqQAIQ.js:23
Uv @ render-common-C9p1y-rqQAIQ.js:25
sN @ render-common-C9p1y-rqQAIQ.js:25
aN @ render-common-C9p1y-rqQAIQ.js:25
JK @ render-common-C9p1y-rqQAIQ.js:25
Y5 @ render-common-C9p1y-rqQAIQ.js:25
J9 @ render-common-C9p1y-rqQAIQ.js:25
_ @ render-common-C9p1y-rqQAIQ.js:10
O @ render-common-C9p1y-rqQAIQ.js:10
Hv.Ii.<computed> @ polyfills-_0C5sq0bp6zl.js:2
Kv @ polyfills-_0C5sq0bp6zl.js:2
Dw @ polyfills-_0C5sq0bp6zl.js:2

To Reproduce

Steps to reproduce the behaviour:

1- Call the shopify.saveBar.leaveConfirmation() function in your code. 2- Observe the console for the error message.

Expected behaviour

a confirmation modal should appear after calling shopify.saveBar.leaveConfirmation()

Packages and versions

List the relevant packages you’re using, and their versions. For example:

@shopify/app-bridge-react @ ^4.1.2
@shopify/polaris @ ^12.0.0

Platform

OS: Windows
OS Version: 11
App: Chrome

Additional context

The app is created using Shopify App Template - Remix

umutnacak commented 3 months ago

Hi @meditto, is discardConfirmation working in your app? I don't see a popup on discard click and the function just runs. I'm trying to figure out if it's related to this issue or I'm doing something wrong.

Ps. I also see this error when trying to leave the page. Also browser back button does not prevent leaving. I think there is an open issue related to the back button.

muchisx commented 3 months ago

Same here, Using the saveBar.leaveConfirmation() the savebar just shakes and errors are thrown in the console.

Uncaught Error: Minified React error #301; visit https://reactjs.org/docs/error-decoder.html?invariant=301 for the full message or use the non-minified dev environment for full errors and additional helpful warnings.
    at Mv (render-common-DOprh8udKYgJ.js:23:20194)
    at Uv (render-common-DOprh8udKYgJ.js:25:3138)
    at sN (render-common-DOprh8udKYgJ.js:25:45157)
    at aN (render-common-DOprh8udKYgJ.js:25:40069)
    at JK (render-common-DOprh8udKYgJ.js:25:39997)
    at Y5 (render-common-DOprh8udKYgJ.js:25:39850)
    at J9 (render-common-DOprh8udKYgJ.js:25:34883)
    at _ (render-common-DOprh8udKYgJ.js:10:1599)
    at O (render-common-DOprh8udKYgJ.js:10:1962)
    at Hv.Ii.<computed> (polyfills-_0C5sq0bp6zl.js:2:13226)

React Error Too many re-renders. React limits the number of renders to prevent an infinite loop. https://react.dev/errors/301?invariant=301

meditto commented 3 months ago

Yes, I think they removed the discard confirmation modal

Stephnn0 commented 3 months ago

im having a similar issue! After the last update the modal that used to popped up is not working anymore.

await shopify.saveBar.leaveConfirmation();

axis80 commented 2 months ago

Using the saveBar.leaveConfirmation() the savebar just shakes and errors are thrown in the console.

I think this may be intentional (the shaking part, not the console error). If you create a new product in the Shopify admin and try to navigate away with unsaved changes, the savebar shakes exactly as you described. So, I'm thinking it must be a new Shopify-official UI pattern.

Nedomas commented 2 months ago

Are there any official docs how leaveConfirmation should work? Or a changelog on what updates were made?

darrynten commented 2 months ago

Experiencing this issue too while trying to block the closing of a max modal when there are unsaved changes

darrynten commented 2 months ago

Any updates on this?

bithaolee commented 1 month ago

This problem still exists, if you apply for Built for Shopify, Shopify requires that you use SaveBar, but there are so many problems and no one is trying to solve them!

rokulis commented 1 month ago

we need it to be fixed!

Shopify / shopify-app-bridge