Lazy import of react-konva named components fails

[RajeshKumarS]

I am developing an app using Gatsby and react-konva. The following code works (an empty screen without any error):

import React from "react"
import { Stage } from "react-konva"

const App = () => {
    return (
        <>
            <React.Suspense fallback={<div />}>
                <Stage></Stage>
            </React.Suspense>
        </>
    )
}

export default App

But the following code fails with an error message "Element type is invalid. Received a promise that resolves to: undefined. Lazy element type must resolve to a class or function.":

import React from "react"

const Stage = React.lazy(() =>
    import("react-konva").then((module) => module.Stage))

const App = () => {
    return (
        <>
            <React.Suspense fallback={<div />}>
                <Stage></Stage>
            </React.Suspense>
        </>
    )
}

export default App

I am not sure if I am making a mistake or if it is not feasible to dynamically import react-konva using React.lazy() as of now.

[lavrton]

Can you make a small repository to reproduce?

Personally, I don't think it makes sense to load react-konva components in a lazy way. Instead, load them usually. Define your canvas component. And then load that canvas component in a lazy way.

[RajeshKumarS]

Thanks @lavrton for your prompt response. "...I don't think it makes sense to load react-konva components in a lazy way" made me dig deeper for alternatives.

My current issue is addressed with the help of solution provided by @Steven24k in issue #592.

[RajeshKumarS]

Here is a working repository with Gatsby adaptation of examples available at https://konvajs.org/docs/react/: https://github.com/RajeshKumarS/gatsby-react-konva-examples.

Your suggestions/feedback are welcome!