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

Shopify Apps
1

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

1 Like
2

same issue here . brand new embedded app -

doctor3d_0-1711204201649.png
doctor3d_0-1711204201649.png824×116 3.67 KB

2 Likes
3

same here

1 Like
4

same problem

2 Likes
5

Same problem here

1 Like
6

z_solutions_0-1711302583286.png
z_solutions_0-1711302583286.png1382×440 36.8 KB

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

1 Like
7

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.

8

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

1 Like
9

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.

1 Like
10

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

1 Like
11

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).

1 Like
12

this should be the accepted answer @rahular

2 Likes