same problem
Topic summary
Fresh Remix embedded Shopify apps are failing at startup with “shopify.toast can’t be used in a server environment,” even on a clean init followed by npm run dev. Multiple users reproduced it; screenshots show the same server error.
Workarounds reported:
- Commenting out only the toast line often doesn’t help; commenting out the entire useEffect hook lets the app run.
Likely cause and fix:
- The issue stems from including “shopify.toast” in the useEffect dependency array, which triggers server-side evaluation of a client-only API (toast = notification UI).
- Change the dependency array to use “shopify” (not “shopify.toast”). Example: depend on setShowMessage, showMessage, and shopify. This resolves the error for users.
Notes and open points:
- One user suggested it might be a toast import/boilerplate issue and expects a Shopify template update.
- Another observed potential mobile-specific behavior where useEffect/state updates didn’t trigger, but this wasn’t confirmed.
Status: A practical client-side fix (adjusting the useEffect dependencies) is identified and endorsed by participants; awaiting any official boilerplate update from Shopify. Images were shared but are not required to understand the issue.
2 Likes