New Defer API does not work with blues-stack about blues-stack HOT 11 CLOSED

The fix for this is out in 1.15.0-pre.1 if anyone wants to give that a spin. We should have a stable 1.15.0 out soon as well.

from blues-stack.

@machour I would encourage you to reopen – If you look at the repo (and my instructions above), I'm awaiting the data in the loader, so it should be "instantly" available.

I did find the issue – it's the --bundle flag on the build:server script. If you remove it, everything works as expected.

from blues-stack.

🤦🏼‍♂️ sorry @justinwaite, reopened.

from blues-stack.

Any new info regarding this? I'm running into this as well but removing --bundle is not an option for me.

from blues-stack.

This looks to be due to a failing instanceof check across a CJS/ESM boundary when using --bundle. We'll get a fix added for this but in the meantime if you'd like to get past it via patch-package you just need to replace the single check in @remix-run/router:

  // before
  if (result instanceof DeferredData) {

  // after
  if (result &&
      typeof result === "object" &&
      typeof result.data === "object" &&
      typeof result.subscribe === "function" &&
      typeof result.cancel === "function" &&
      typeof result.resolveData === "function") {

You should patch this in all 3 build files to be safe:

• @remix-run/router/dist/router.js
• @remix-run/router/dist/router.cjs.js
• @remix-run/router/dist/router.umd.js

from blues-stack.

Repro repo: https://github.com/justinwaite/blues-stack-defer

from blues-stack.

switching from json to defer is not enough, you have to wrap the deferred data in <Await />

See our guide on streaming: https://remix.run/docs/en/v1/guides/streaming#the-solution

from blues-stack.

If you want, feel free to remove await in the loader and add Suspense and Await in the component. You just don't need to go that far to see the error. The result is the same.

from blues-stack.

@justinwaite @JDouven Does it work with the default Remix template?
https://github.com/remix-run/remix/tree/main/templates/remix

from blues-stack.

@MichaelDeBoey Yes, that works. In my case I serve the app with express instead of remix-serve.

I used the following code:

import { defer } from '@remix-run/node';
import { Await, useLoaderData } from '@remix-run/react';
import { Suspense } from 'react';

export async function loader() {
  const testPromise = new Promise<string>((resolve) => {
    setTimeout(() => {
      resolve('Hello with a delay!');
    }, 3000);
  });

  return defer({
    instantly: 'foo',
    testPromise,
  });
}

export default function Index() {
  const data = useLoaderData<typeof loader>();
  return (
    <div style={{ fontFamily: 'system-ui, sans-serif', lineHeight: '1.4' }}>
      <h1>Welcome to Remix</h1>
      <h2>Instant data:</h2>
      <pre>{data.instantly}</pre>
      <h2>Streamed data:</h2>
      <Suspense fallback={<p>Suspense fallback</p>}>
        <Await
          resolve={data.testPromise}
          errorElement={<p>Await errorElement</p>}
        >
          {(testPromise) => <pre>{testPromise}</pre>}
        </Await>
      </Suspense>
    </div>
  );
}

So I used the express template, and that works too. Then I changed the following to make it more closely match the relevant parts of blues-stack:

• Rename server.js to server.ts and fix the imports (and npm install missing types)
• Update package.json to:

"scripts": {
    "build": "remix build",
    "build:server": "esbuild --platform=node --format=cjs ./server.ts --outdir=build --bundle",
    "dev": "run-p dev:*",
    "dev:remix": "remix watch",
    "dev:build": "cross-env NODE_ENV=development npm run build:server -- --watch",
    "dev:server": "cross-env NODE_ENV=development node --inspect --require ./node_modules/dotenv/config ./build/server.js",
}

(inspired by the blues-stack package.json)

When I now run npm run dev my example stops working. The frontend stops receiving loader data completely. Neither the 'instant' data nor the streamed data is visible.
Also in this small example, removing --bundle from the build:server script is a workaround. However as I said, that is not an option in the larger app I want to use this in.

Let me know if you need more info.

from blues-stack.

@brophdawg11 I tried this and I can confirm this fixes the issue! Thanks!

from blues-stack.