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

[paulsmithkc]

Created a new ink app, by using the create-ink-app tool, and installed the ink-text-input package. But am having issues with using this component.

I'm getting the following error, whenever I try to use the TextInput component:

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

       Check the render method of `InputBox`.

Example component:

const React = require("react");
const { Box, Text } = require("ink");
const TextInput = require("ink-text-input");

const InputBox = ({}) => {
  const [value, setValue] = React.useState("");

  return (
    <Box flexDirection="column">
      <Box>
        <Text>Value:</Text>
      </Box>
      <Box>
        <TextInput value={value} onChange={setValue} />
      </Box>
    </Box>
  );
};

module.exports = { InputBox };

[jdeniau]

For the record, I had the same issue (and with ink-spinner too).

I solved it this way (even in TS)

import SpinnerCJS from 'ink-spinner';
import TextInputCJS from 'ink-text-input';

// @ts-expect-error -- issue with ink-text-input and CommonJS definition
const TextInput = TextInputCJS.default as typeof TextInputCJS;

// @ts-expect-error -- issue with ink-text-input and CommonJS definition
const Spinner = SpinnerCJS.default as typeof SpinnerCJS;