Re: Unexpected Server Error Error: shopify.toast can't be used in a server environment.

Solved

Unexpected Server Error Error: shopify.toast can't be used in a server environment.

rahular
Shopify Partner
6 2 4

I am trying the shopify remix app tutorial for embedded apps but I am getting an error

Unexpected Server Error

Error: shopify.toast can't be used in a server environment. You likely need to move this code into an Effect.

 

I haven't done any coding I just did init and then npm run dev

Accepted Solutions (2)

rahular
Shopify Partner
6 2 4

This is an accepted solution.

All those who are facing this issue comment

// useEffect(() => {
// if (productId) {
// // shopify.toast.show("Product created");
// }
// }, [productId, shopify.toast]);
in app._index.jsx in routes
It started working

View solution in original post

shermie
Shopify Partner
5 1 3

This is an accepted solution.

If you have code like this:

 

useEffect(() => {
  if (showMessage) {
    shopify.toast.show('message');
    setShowMessage(false);
  }
}, [setShowMessage, showMessage, shopify.toast]);

 

 

Change it to this:

 

useEffect(() => {
  if (showMessage) {
    shopify.toast.show('message');
    setShowMessage(false);
  }
}, [setShowMessage, showMessage, shopify]);

 

 

It's the `shopify.toast` useEffect dependency that is causing the problem. The solution is to change the dependency to `shopify` (without the `.toast`).

View solution in original post

Replies 11 (11)

doctor3d
Shopify Partner
1 0 2

same issue here . brand new embedded app - 

doctor3d_0-1711204201649.png

 

skorp
Shopify Partner
3 0 3

same here

Trendscopes
Shopify Partner
2 0 2

same problem

sergioserrenho
Shopify Partner
1 0 1

Same problem here

z_solutions
Shopify Partner
2 0 1

z_solutions_0-1711302583286.png

in app/routes/app._index.jsx or tsx 

DigitalSpaces
Shopify Partner
1 0 0

Commenting out that line doesn't work for me.  Even after I killed and re-ran my dev server.

 

edit: comment out the entire useEffect hook and it should run.

rahular
Shopify Partner
6 2 4

This is an accepted solution.

All those who are facing this issue comment

// useEffect(() => {
// if (productId) {
// // shopify.toast.show("Product created");
// }
// }, [productId, shopify.toast]);
in app._index.jsx in routes
It started working
Pabloo
Shopify Partner
2 0 1

Commenting out the code as a temporary workaround. However, this doesn't address the root cause and simply postpones the problem. 

It appears that the useEffect hook itself might not be triggering correctly on mobile devices. Updating state variables from within the useEffect does not work.

 

rahular
Shopify Partner
6 2 4

The toast is not imported properly no issue with hooks since it's boilerplate I think shopify would fix it in next update

shermie
Shopify Partner
5 1 3

This is an accepted solution.

If you have code like this:

 

useEffect(() => {
  if (showMessage) {
    shopify.toast.show('message');
    setShowMessage(false);
  }
}, [setShowMessage, showMessage, shopify.toast]);

 

 

Change it to this:

 

useEffect(() => {
  if (showMessage) {
    shopify.toast.show('message');
    setShowMessage(false);
  }
}, [setShowMessage, showMessage, shopify]);

 

 

It's the `shopify.toast` useEffect dependency that is causing the problem. The solution is to change the dependency to `shopify` (without the `.toast`).

miguel-angel
Shopify Partner
34 3 8

this should be the accepted answer @rahular 

Like & set Accepted Solution if I helped | Donate

.

Miguel Ángel

.

Freelance Shopify Developer
Reach out if you need any Custom Features in your site.