Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

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

See original GitHub issue

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

Issue Analytics

State:
Created 3 years ago
Reactions:2
Comments:13 (4 by maintainers)

Top GitHub Comments

1reaction

heokhecommented, Jul 10, 2020

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

1reaction

reznordcommented, Jul 9, 2020

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

Top Results From Across the Web

React.createElement: type is invalid -- expected a string

I think the most important thing to realize when troubleshooting this bug is that it manifests when you attempt to instantiate a component...

ReactDOM – React

render() controls the contents of the container node you pass in. Any existing DOM elements inside are replaced when first called.

Async components

An async component can render its state in a meaningful way like any other component, or be logic-only. In that case it doesn't...

Render Functions & JSX - Vue.js

Passing Attributes and Events to Child Elements/Components. On normal components, attributes not defined as props are automatically added to the root element of ......

babel/plugin-transform-react-jsx

If you do not want (or cannot use) auto importing, you can use the classic runtime, which is the default behavior for v7...