Skip to content

Cannot handle Lazy and suspense #193

@Reytar

Description

@Reytar

Hey,
I'm trying to use the wizard, where one of the steps is lazy load and I get this error:
"Cannot convert object to primitive value".

Code:

const Step2Lazy = lazy(() => delayForDemo(import("./Step2Lazy.tsx")));

const delayForDemo = (promise: Promise<any>) => {
  return new Promise((resolve) => {
    setTimeout(resolve, 2000);
  }).then(() => promise);
};

export const Widget: React.FC = () => {
  const [selectedCountry, setSelectedCountry] = useState<string>("");

  const handleSelectCountry = (value: string) => {
    setSelectedCountry(value);
  };

  return (
    <div>
      <Wizard footer={<Footer selectedCountry={selectedCountry} />}>
        <Step1 />
        <Suspense fallback={<p>Loading...</p>}>
          <Step2Lazy
            handleSelectCountry={handleSelectCountry}
            selectedCountry={selectedCountry}
          />
        </Suspense>
      </Wizard>
    </div>
  );
};

Error:

Uncaught TypeError: Cannot convert object to primitive value
at String ()
at chunk-QI53LHDY.js?v=9fde6873:155:22
at Array.map ()
at printWarning (chunk-QI53LHDY.js?v=9fde6873:154:39)
at error (chunk-QI53LHDY.js?v=9fde6873:142:15)
at lazyInitializer (chunk-QI53LHDY.js?v=9fde6873:920:17)
at mountLazyComponent (react-dom_client.js?v=9fde6873:14840:27)
at beginWork (react-dom_client.js?v=9fde6873:15936:22)
at HTMLUnknownElement.callCallback2 (react-dom_client.js?v=9fde6873:3672:22)
at Object.invokeGuardedCallbackDev (react-dom_client.js?v=9fde6873:3697:24)

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions