defer: This Suspense boundary received an update before it finished hydrating

[scraper095]

Issue summary

• @shopify/shopify-app-* package and version: 2.0.2
• Node version: latest
• Operating system: mac

Expected behavior

Lazy loading without errors in the console

Actual behavior

Data loads, but console throws the error

Steps to reproduce the problem

Using shopify cli remix template project, and ngrok as tunneling service inside the embedded app interface,
This is the code that reproduces the problem:

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

const sleep = () => {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve()
    }, 1000);
  });
}

async function someFn() {
  await sleep();
  return "test";
}

export const loader = async () => {
  const resp = someFn();
  return defer({
    someText: resp
  })
};

const MyComponent = () => {
  const someText = useAsyncValue();
  return <div>{someText}</div>;
}

export default function AdditionalPage() {
  const {someText} = useLoaderData();

  return (
    <div>
      <Suspense fallback="Loading...">
        <Await resolve={someText}>
          <MyComponent />
        </Await>
      </Suspense>
    </div>
  );
}

[matteodepalo]

Hi @scraper095, may I ask which kind of error you're seeing in the console?

[scraper095]

Hi @scraper095, may I ask which kind of error you're seeing in the console?

Uncaught Error: This Suspense boundary received an update before it finished hydrating. This caused the boundary to switch to client rendering. The usual way to fix this is to wrap the original update in startTransition.
    at updateDehydratedSuspenseComponent (react-dom.development.js:20702:48)
    at updateSuspenseComponent (react-dom.development.js:20362:16)
    at beginWork (react-dom.development.js:21624:14)
    at beginWork$1 (react-dom.development.js:27426:14)
    at performUnitOfWork (react-dom.development.js:26557:12)
    at workLoopSync (react-dom.development.js:26466:5)
    at renderRootSync (react-dom.development.js:26434:7)
    at performConcurrentWorkOnRoot (react-dom.development.js:25738:74)
    at workLoop (scheduler.development.js:266:34)
    at flushWork (scheduler.development.js:239:14)

[scraper095]

Hi @scraper095, may I ask which kind of error you're seeing in the console?

Uncaught Error: This Suspense boundary received an update before it finished hydrating. This caused the boundary to switch to client rendering. The usual way to fix this is to wrap the original update in startTransition. at updateDehydratedSuspenseComponent (react-dom.development.js:20702:48) at updateSuspenseComponent (react-dom.development.js:20362:16) at beginWork (react-dom.development.js:21624:14) at beginWork$1 (react-dom.development.js:27426:14) at performUnitOfWork (react-dom.development.js:26557:12) at workLoopSync (react-dom.development.js:26466:5) at renderRootSync (react-dom.development.js:26434:7) at performConcurrentWorkOnRoot (react-dom.development.js:25738:74) at workLoop (scheduler.development.js:266:34) at flushWork (scheduler.development.js:239:14)

I forgot to mention, with the intention of having startTransition and trying to fix the error I added entry.client.jsx to no avail:

import { RemixBrowser } from "@remix-run/react";
import { startTransition, StrictMode } from "react";
import { hydrateRoot } from "react-dom/client";

startTransition(() => {
  hydrateRoot(
    document,
    <StrictMode>
      <RemixBrowser />
    </StrictMode>
  );
});

[matteodepalo]

Could this be due to a Chrome extension interfering with the dom? Can you reproduce this with an incognito window with no extensions? remix-run/remix#4822

[scraper095]

Could this be due to a Chrome extension interfering with the dom? Can you reproduce this with an incognito window with no extensions? remix-run/remix#4822

I'm not using extensions. The same happens in incognito

[matteodepalo]

This could be related to this other issue. Could you try to use the canary version of react? 18.3.0-canary-546178f91-20231005.

[scraper095]

This could be related to this other issue. Could you try to use the canary version of react? 18.3.0-canary-546178f91-20231005.

Unfortunately the app doesn't run with canary versions.

  ERROR  Cannot read properties of null (reading 'useContext')

 node_modules/@shopify/app/node_modules/react/cjs/react.development.js:1618:21

 1615:     }
 1616:   }
 1617:
 1618:   return dispatcher.useContext(Context);
 1619: }
 1620: function useState(initialState) {
 1621:   var dispatcher = resolveDispatcher();

 - useContext (node_modules/@shopify/app/node_modules/react/cjs/react.development.js:1618:21)
 - useStdin (node_modules/@shopify/app/node_modules/ink/build/hooks/use-stdin.js:6:24)
 - Dev (node_modules/@shopify/app/dist/cli/services/dev/ui/components/Dev.js:13:53)
 - renderWithHooks (node_modules/@shopify/cli-kit/node_modules/react-reconciler/cjs/react-reconciler.development.js:7478:18)
 - mountIndeterminateComponent (node_modules/@shopify/cli-kit/node_modules/react-reconciler/cjs/react-reconciler.development.js:11247:13)
 - beginWork (node_modules/@shopify/cli-kit/node_modules/react-reconciler/cjs/react-reconciler.development.js:12760:16)
 - beginWork$1 (node_modules/@shopify/cli-kit/node_modules/react-reconciler/cjs/react-reconciler.development.js:19569:14)
 - performUnitOfWork (node_modules/@shopify/cli-kit/node_modules/react-reconciler/cjs/react-reconciler.development.js:18703:12)
 - workLoopSync (node_modules/@shopify/cli-kit/node_modules/react-reconciler/cjs/react-reconciler.development.js:18609:5)
 - renderRootSync (node_modules/@shopify/cli-kit/node_modules/react-reconciler/cjs/react-reconciler.development.js:18577:7)

[tylerscave]

I was able to solve for this in our project by using a canary version of react and then overriding some of the shopify related dependencies.

In the package.json, change your react and react-dom versions to the following (this is what worked for me):

    "react": "18.3.0-canary-2bc7d336a-20240205",
    "react-dom": "18.3.0-canary-2bc7d336a-20240205",

Then add this overrides section below your dependencies:

  "overrides": {
    "@shopify/cli": {
      "@shopify/cli-kit": {
        "react": "18.3.0-canary-2bc7d336a-20240205",
        "react-dom": "18.3.0-canary-2bc7d336a-20240205"
      }
    },
    "@shopify/cli-hydrogen": {
      "@shopify/cli-kit": {
        "react": "18.3.0-canary-2bc7d336a-20240205",
        "react-dom": "18.3.0-canary-2bc7d336a-20240205"
      },
      "use-resize-observer": {
        "react": "18.3.0-canary-2bc7d336a-20240205",
        "react-dom": "18.3.0-canary-2bc7d336a-20240205"
      }
    }
  },

As mentioned in other threads, you'll need to force install...

In my package.json I added a small script to handle this. It also removes the warnings from the console logging, so omit that flag if you want those to be visible
"install:canary": "npm install --force --loglevel error",

[alexanderhupfer]

@matteodepalo I found that the error only occurs inside the iFrame as described here: #694

[nick-potts]

I submitted a pull request to fix this issue Shopify/polaris#12291