Preact-cli: Cannot import async components: Undefined component passed to createElement()

[hkh12]

Do you want to request a _feature_ or report a _bug_?
It's a bug.

What is the current behaviour?
I'm trying to load a component from src/components/async directory, and get this error:

Uncaught Error: Undefined component passed to createElement()

You likely forgot to export your component or might have mixed up default and named imports<#text dangerouslySetInnerHTML="[object Object]" />

  in #text
  in AsyncComponent
  in App

If the current behaviour is a bug, please provide the steps to reproduce.

// src/components/async/Hello.js
export default function Hello() {
  return <h1>hello</h1>
}

// src/index.js
import Hello from './components/async/Hello'
export default function App() {
  return <Hello />
}



md5-954a105de833964486ac21f8f128a8c4



Environment Info:
  System:
    OS: Linux 5.4 Ubuntu 20.04 LTS (Focal Fossa)
    CPU: (2) x64 AMD A9-9410 RADEON R5, 5 COMPUTE CORES 2C+3G
  Binaries:
    Node: 14.2.0 - /usr/local/bin/node
    Yarn: 1.7.0 - ~/.npm-global/bin/yarn
    npm: 6.14.4 - /usr/local/bin/npm
  Browsers:
    Chrome: 83.0.4103.116
    Firefox: 77.0.1
  npmPackages:
    preact: ^10.3.2 => 10.3.3 
    preact-cli: ^3.0.0-rc.16 => 3.0.0-rc.16 
  npmGlobalPackages:
    preact-cli: 3.0.0-rc.16

[hkh12]

Update: async! prefix doesn't work too.

[rschristian]

I assume that, while this warning shows up in your console, the component does render? As that is what I can reproduce.

One solution could be to use Lazy & Suspense. While marked as experimental, it does seem to suppress that warning.

import { Suspense, lazy } from 'preact/compat';
const Hello = lazy(() => import('./components/async/Hello'));

export default function App() {
    return (
        <Suspense fallback={<div>loading...</div>}>
            <Hello />
        </Suspense>
    )
}

[hkh12]

It actually prevents other things from rendering. I can't reproduce it now but it tried it in a bigger application.

I've also noticed that downgrading to 3.0.0-rc.14 solves the problem.

[hkh12]

Found a better way to reproduce this:

// src/index.js
import Hello from './components/async/Hello'
export default function App() {
  return <>
    <Hello />
    <div>This won't be rendered.</div>
  </>
}

But if you use an element instead of fragments the error will be gone.

[reznord]

@hkh12 can you just reproduce this in a repo and share if possible?

[hkh12]

@reznord https://github.com/hkh12/preact-cli-bug-1293

[reznord]

Awesome, thanks. Will look into it now.

[reznord]

@hkh12 this is resolved in the latest rc (3.0.0-rc.17) today.

Feel free to re-open if you are still facing the issue 🙂

[hkh12]

Still facing the issue. I committed the updates to https://github.com/hkh12/preact-cli-bug-1293

[gokatz]

facing this issue in preact:10.4.7, preact-cli: 3.0.1. downgrading preact CLI helped.

[FranciscoG]

also facing this issue:

• [email protected]
• [email protected]
• [email protected]

trying to replicate it in a codesandbox but can't seem to
https://codesandbox.io/s/hopeful-aryabhata-1ynnj?file=/src/app.js

[cyclops26]

also facing this issue:

• [email protected]
• [email protected]
• [email protected]

trying to replicate it in a codesandbox but can't seem to
https://codesandbox.io/s/hopeful-aryabhata-1ynnj?file=/src/app.js

@FranciscoG did you find a resolution/or the issue? I'm running into this with the following packages, but like you in a sandbox it works. I've tried multiple node versions and started with a clean package-lock file and clean node_modules direction to no avail.

• [email protected]
• [email protected]
• [email protected]

[cyclops26]

I found that the resolution for me was to not use a second component declared within the same file and only to use imported components.... not sure why this was an issue though.