Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined.

[HermanVulkers]

Hello everyone,

I am trying to use this checkbox in a NextJS + React Native Web app, but am receiving the following error when I try to insert the CheckBox code:

Server Error
Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Source code:

pages/_document.tsx (19:23) @ Function.getInitialProps

  17 | AppRegistry.registerComponent(config.name, () => Main);
  18 | const { getStyleElement } = AppRegistry.getApplication(config.name);
> 19 | const page = await renderPage();
     |                   ^
  20 | const styles = [
  21 |   <style dangerouslySetInnerHTML={{ __html: normalizeNextElements }} />,
  22 |   getStyleElement(),

I have checked several things, such as my import:

import CheckBox from "@react-native-community/checkbox";

But this should be OK.

Does anyone have an idea what could be going wrong?

Thanks in advance!

[nicholaslee119]

Thanks for using this component. : )

I am wondering how did you know this issue was caused by the checkbox. Is there any possibility that another lib caused this issue? Because I can not reproduce this issue in my environment just only with the checkbox.

[AndreLPD]

@nicholaslee119
I have the same error:

Server Error:

Uncaught Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports

This is my import:
import CheckBox from "@react-native-community/checkbox";

I used the State and HandleChange to receive the data:
state = { fluxo : false } handleChange = (event) => { console.log(event); }
<CheckBox disabled={false} value={this.state.fluxo} onValueChange={this.handleChange} />

[Itoukee]

Hi, I have the exact same error. I checked my package, yarn lock and podfile but I don't have any possible conflicts with another checkbox. I know the checkbox is the issue because since I've installed it it crashes even without importing it !

React native version 0.67.4

[esien525]

@nicholaslee119 I have the same error.. it is working fine in Android emulator, however, no luck in RNW

[danielyaa5]

same

[Gobelin-Nounours]

same here. and i have verfiied, it's not another lib. i precise, it's in expo on web emulation, i will try in android view. and it's the same

[capic]

same

[professorplumb]

Also have this same error on v0.5.12, react-native v0.69.6. Verified it's the imported CheckBox causing this error.

import CheckBox from '@react-native-community/checkbox';
...
<CheckBox />

If I console.log(CheckBox) in my function body (even if I just import the checkbox and don't actually use it) it comes back as undefined.

[apexskier]

It appears this package just isn't supported outside of ios, android, or windows. The primary source file (https://github.com/react-native-checkbox/react-native-checkbox/blob/develop/src/js/CheckBox.ts) on a web platform will circularly reference itself, as you can see in the final dist when you install the package.

[c9s]

same here for the Web version