Cannot import async components: Undefined component passed to createElement() #1293

heokhe · 2020-07-06T18:25:52Z

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 />
}

What is the expected behaviour?
Load the component Hello as an async component.

Please mention other relevant information.

Please paste the results of preact info here.

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

The text was updated successfully, but these errors were encountered:

heokhe · 2020-07-08T14:38:29Z

Update: async! prefix doesn't work too.

rschristian · 2020-07-08T17:58:16Z

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>
    )
}

heokhe · 2020-07-08T18:15:34Z

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.

heokhe · 2020-07-08T18:27:31Z

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 · 2020-07-08T18:34:09Z

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

heokhe · 2020-07-08T18:46:12Z

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

reznord · 2020-07-08T18:46:43Z

Awesome, thanks. Will look into it now.

I finally (FINALLY) found a solution for #1293, #1308, etc etc. This doesn't use DOM hacks or anything - it just crawls up the tree of VNodes and performs a Depth-First-Search backwards from the position of AsyncComponent in order to find the most recently hydrated DOM element. Essentially, the first populated `vnode._dom` reference it finds is guaranteed to be the previous sibling of the parent element AsyncComponent is about to get rendered into. As long as AsyncComponent isn't being used load a component that renders a Fragment, the nextSibling of that discovered element is the exact node Preact will try to hydrate. In the case of an AsyncComponent wrapping a Fragment, only the first Fragment child will be hydrated. This means the remaining children will have the flicker effect, but that's pretty reasonable: ```js // app.js import Foo from 'async!./foo'; export default () => <div><Foo /></div> // foo.js export default () => <Fragment> <h1>Hello</h1> <p>world!</p> // will be culled+reinserted during hydration </Fragment> ```

* Fix async-loader for Preact X I finally (FINALLY) found a solution for #1293, #1308, etc etc. This doesn't use DOM hacks or anything - it just crawls up the tree of VNodes and performs a Depth-First-Search backwards from the position of AsyncComponent in order to find the most recently hydrated DOM element. Essentially, the first populated `vnode._dom` reference it finds is guaranteed to be the previous sibling of the parent element AsyncComponent is about to get rendered into. As long as AsyncComponent isn't being used load a component that renders a Fragment, the nextSibling of that discovered element is the exact node Preact will try to hydrate. In the case of an AsyncComponent wrapping a Fragment, only the first Fragment child will be hydrated. This means the remaining children will have the flicker effect, but that's pretty reasonable: ```js // app.js import Foo from 'async!./foo'; export default () => <div><Foo /></div> // foo.js export default () => <Fragment> <h1>Hello</h1> <p>world!</p> // will be culled+reinserted during hydration </Fragment> ``` * Stop searching if we hit an element parent Co-authored-by: Anup <allamsetty.anup@gmail.com>

reznord · 2020-07-09T18:47:09Z

@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 🙂

heokhe · 2020-07-10T12:24:18Z

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

gokatz · 2020-08-20T07:16:36Z

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

FranciscoG · 2020-12-12T00:33:31Z

also facing this issue:

preact@10.5.7
preact-router@3.2.1
preact-cli@3.0.5

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

cyclops26 · 2021-01-17T03:58:19Z

also facing this issue:

preact@10.5.7

preact-router@3.2.1

preact-cli@3.0.5

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.

preact@10.5.10
preact-router@3.2.1
preact-cli@3.0.5

cyclops26 · 2021-01-17T04:19:07Z

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.

hinst · 2024-06-20T21:30:32Z

I am just getting started with Preact and I ran into this error when I tried to use my class component

🐞Uncaught Error: Invalid type passed to createElement(): [object Object]

import { Component, ComponentChild, RenderableProps } from "preact";

interface ParameterTypesProps {
}

interface ParameterTypesState {
}

export class ParameterTypesPanel extends Component<ParameterTypesProps, ParameterTypesState> {
    constructor() {
        super({});
        this.state = {};
    }

    render(props?: RenderableProps<ParameterTypesProps, any>, state?: Readonly<ParameterTypesState>, context?: any): ComponentChild {
        return <div></div>;
    }
}

index.tsx:

export function App() {
	return (
		<LocationProvider>
			<Header />
			<main>
				<Router>
					<Route path='/' component={Home} />
					<Route path='/ParameterTypes' component={new ParameterTypesPanel} />
					<Route default component={NotFound} />
				</Router>
			</main>
		</LocationProvider>
	);
}

Does someone by chance have an idea what is wrong here? And why is there no diagnostics information coming from Preact in the error message. Stack trace is not visible in browser console

rschristian · 2024-06-20T21:33:30Z

@hinst preact-cli is no longer maintained, see the warning at the top of the ReadMe.

Please switch to a supported tool, like a Vite via create-preact.

Edit: Never invoke/create components directly. Switch new ParameterTypesPanel to ParameterTypesPanel

heokhe changed the title ~~Cannot load from src/component/async: Undefined component passed to createElement()~~ Cannot import from src/component/async: Undefined component passed to createElement() Jul 6, 2020

heokhe changed the title ~~Cannot import from src/component/async: Undefined component passed to createElement()~~ Cannot import async components: Undefined component passed to createElement() Jul 8, 2020

reznord mentioned this issue Jul 8, 2020

(async-loader): Use reference in vnode for current node #1308

Closed

developit mentioned this issue Jul 9, 2020

Fix async-loader for Preact X #1309

Merged

reznord closed this as completed Jul 9, 2020

cungminh2710 mentioned this issue Jan 11, 2024

react-intl 6.3.0 breaks react widgets embedded into preact pages formatjs/formatjs#4309

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Cannot import async components: Undefined component passed to createElement() #1293

Cannot import async components: Undefined component passed to createElement() #1293

heokhe commented Jul 6, 2020 •

edited

Loading

heokhe commented Jul 8, 2020

rschristian commented Jul 8, 2020

heokhe commented Jul 8, 2020 •

edited

Loading

heokhe commented Jul 8, 2020

reznord commented Jul 8, 2020

heokhe commented Jul 8, 2020

reznord commented Jul 8, 2020

reznord commented Jul 9, 2020

heokhe commented Jul 10, 2020

gokatz commented Aug 20, 2020

FranciscoG commented Dec 12, 2020 •

edited

Loading

cyclops26 commented Jan 17, 2021

cyclops26 commented Jan 17, 2021

hinst commented Jun 20, 2024 •

edited

Loading

rschristian commented Jun 20, 2024 •

edited

Loading

Cannot import async components: Undefined component passed to createElement() #1293

Cannot import async components: Undefined component passed to createElement() #1293

Comments

heokhe commented Jul 6, 2020 • edited Loading

heokhe commented Jul 8, 2020

rschristian commented Jul 8, 2020

heokhe commented Jul 8, 2020 • edited Loading

heokhe commented Jul 8, 2020

reznord commented Jul 8, 2020

heokhe commented Jul 8, 2020

reznord commented Jul 8, 2020

reznord commented Jul 9, 2020

heokhe commented Jul 10, 2020

gokatz commented Aug 20, 2020

FranciscoG commented Dec 12, 2020 • edited Loading

cyclops26 commented Jan 17, 2021

cyclops26 commented Jan 17, 2021

hinst commented Jun 20, 2024 • edited Loading

rschristian commented Jun 20, 2024 • edited Loading

heokhe commented Jul 6, 2020 •

edited

Loading

heokhe commented Jul 8, 2020 •

edited

Loading

FranciscoG commented Dec 12, 2020 •

edited

Loading

hinst commented Jun 20, 2024 •

edited

Loading

rschristian commented Jun 20, 2024 •

edited

Loading