lazy component is not working because TypeError: Cannot convert object to primitive value

[mecaota]

detail

I tried using lazy components using preact/compat, but it didn't work. The repro repository listed below displays the following message in the console:

preact_debug.js?v=4ec0a80b:127 Uncaught (in promise) TypeError: Cannot convert object to primitive value
    at l.__b (preact_debug.js?v=4ec0a80b:127:66)
    at e.__b (preact_compat.js?v=4ec0a80b:139:18)
    at l.__b (preact_compat.js?v=4ec0a80b:234:79)
    at O (chunk-3U3QL4QG.js?v=4ec0a80b:175:88)
    at $ (chunk-3U3QL4QG.js?v=4ec0a80b:80:143)
    at O (chunk-3U3QL4QG.js?v=4ec0a80b:202:188)
    at $ (chunk-3U3QL4QG.js?v=4ec0a80b:80:143)
    at O (chunk-3U3QL4QG.js?v=4ec0a80b:202:188)
    at $ (chunk-3U3QL4QG.js?v=4ec0a80b:80:143)
    at O (chunk-3U3QL4QG.js?v=4ec0a80b:202:188)

And, editor displays this

'Empty' を JSX コンポーネントとして使用することはできません。
  Its type 'typeof import("{repojitory root}/src/components/empty/index")' is not a valid JSX element type.

Is not preact/compats lazy supported typescript?

reproduction

https://github.com/mecaota/bugged-preact/tree/issue/lazy-component-is-not-work

In this repository, I wish show "This is lazy Component", but not.

yarn install
yarn dev

install packages versions

paste from package.json

dependencies

• "preact": "10.20.2"

devDependencies

• "@preact/preset-vite": "2.8.2",
• "@stylelint/postcss-css-in-js": "0.38.0",
• "@types/node": "20.12.7",
• "@typescript-eslint/eslint-plugin": "7.7.0",
• "@typescript-eslint/parser": "7.7.0",
• "eslint": "8.57.0",
• "eslint-config-prettier": "9.1.0",
• "eslint-import-resolver-typescript": "3.6.1",
• "eslint-plugin-import": "2.29.1",
• "eslint-plugin-react": "7.34.1",
• "eslint-plugin-react-hooks": "4.6.0",
• "preact-render-to-string": "6.4.2",
• "prettier": "3.2.5",
• "rollup-plugin-visualizer": "5.12.0",
• "typescript": "5.4.5",
• "vite": "5.2.9",
• "vite-tsconfig-paths": "4.3.2"

[JoviDeCroock]

This is not a bug in Preact, what you are doing is const Empty = lazy(() => import('@components/empty')); but @components/empty has no default export so what you should do is const Empty = lazy(() => import('@components/empty').then(x => x.Empty);

One caveat in Preact is that Suspense needs a parent node, so wrapping it with a <div helps 😅 we should fix that though

[mecaota]

Thank you very much for your very quick reply. After making the changes as you pointed out, it is now displayed without any problems!

[SahiraMamedova]

Thank you , I could not find a solution for an hour , so it saved my life !