opened 10:08AM - 04 Dec 24 UTC
# Issue summary
Before opening this issue, I have:
- [x] Upgraded to the lates… t version of the `@shopify` packages
- Affected package and version:
```
{
"react-dom": "^18.3.1",
"react-hook-form": "^7.53.2",
"express": "^4.21.1",
"@shopify/admin-api-client": "^1.0.4",
"@shopify/app-bridge-react": "^4.1.5",
"@shopify/polaris": "^13.9.1",
"@shopify/polaris-icons": "^9.3.0",
"@shopify/shopify-api": "^11.6.0",
"@shopify/shopify-app-remix": "^3.4.0",
"@remix-run/dev": "^2.15.0",
"@remix-run/express": "^2.15.0",
"@remix-run/node": "^2.15.0",
"@remix-run/react": "^2.15.0",
"vite": "^5.4.11"
}
```
- Node version: 22.11.0
- Package manager: pnpm@9.14.2
- Operating system: Linux Ubuntu
- Browsers tested: Chrome,Firefox
- Tested both with no tunnel used for development but express server running in as https on port 443 and with ngrok that is not know to have any issues with streaming
- No future flags have been enabled for remix
- [x] Set `{ logger: { level: LogSeverity.Debug } }` in my configuration
- [x] Found a reliable way to reproduce the problem that indicates it's a problem with the package
- [x] Looked for similar issues in this repository
- [x] Checked that this isn't an issue with a Shopify API
- If it is, please create a post in the [Shopify community forums](https://community.shopify.com/c/partners-and-developers/ct-p/appdev) or report it to [Shopify Partner Support](https://help.shopify.com/en/support/partners/org-select)
Streaming (defer with Suspense/Await) as described in Remix dev docs is not working on initial page load inside the iframe, while working outside the iframe and on consecutive navigation between pages.
## Expected behavior
Page should load with initial page date from loader during the SSR phase, with suspense displaying the fallback message until the promise resolves and streamed data appear on the page as well.
## Actual behavior
Page remains blank during initial load waiting for the promise to resolve. Once the promise resolves both ssr and stream data display.
## Steps to reproduce the problem
```
import { defer } from '@remix-run/node';
import { Await, useLoaderData } from '@remix-run/react';
import { Suspense } from 'react';
export const loader = async () => {
return defer({
ssr: 'I should display on initial SSR',
stream: new Promise((res) =>
setTimeout(() => res('I should be displayed only after promise resolves'), 3000),
) as Promise<string>,
});
};
export default function Tutorial() {
const { ssr, stream } = useLoaderData<typeof loader>();
return (
<div>
<p>SSR Data: {ssr}</p>
<Suspense fallback="Loading stream data...">
<Await resolve={stream} errorElement={<p>Failed to load stream data</p>}>
{(data) => <p>Stream Data: {data}</p>}
</Await>
</Suspense>
</div>
);
}
```
Hi all, there is an issue regarding defer/await with Remix not working inside Iframes. There is an open issue on GitHub yet there is no response for weeks. I’d appreciate any insights or help to get this resolved. Thanks!
1 Like
Hey Marco,
I’ve connected with our internal product team on this and they are still investigating this issue. Will update here when I learn more.
Hey - We are having this issue too and it’s really impacting our LCP score. Any update on timelines from the team @Liam-Shopify ?
