vadimdemedes/ink-text-input

Example not working with hooks

0xhjohnson opened this issue · 2 comments

0xhjohnson commented

Issue

The example does not work with react hooks.

Output

Warning: React.createElement: 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 `UserInfo`.
    in UserInfo (created by Layout)
    in div (created by Box)
    in Box (created by Layout)
    in Layout
    in App
The above error occurred in the <div> component:
    in div (created by Box)
    in Box (created by UserInfo)
    in UserInfo (created by Layout)
    in div (created by Box)
    in Box (created by Layout)
    in Layout
    in App

React will try to recreate this component tree from scratch using the error boundary you provided, App.
Warning: App: Error boundaries should implement getDerivedStateFromError(). In that method, return a state update to display an error message or fallback UI.
(node:9107) UnhandledPromiseRejectionWarning: Invariant Violation: 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 `UserInfo`.
    at invariant (/Users/hunter/preme-o/node_modules/react-reconciler/cjs/react-reconciler.development.js:53:15)
    at createFiberFromTypeAndProps (/Users/hunter/preme-o/node_modules/react-reconciler/cjs/react-reconciler.development.js:1913:11)
    at createFiberFromElement (/Users/hunter/preme-o/node_modules/react-reconciler/cjs/react-reconciler.development.js:1934:15)
    at createChild (/Users/hunter/preme-o/node_modules/react-reconciler/cjs/react-reconciler.development.js:4008:28)
    at reconcileChildrenArray (/Users/hunter/preme-o/node_modules/react-reconciler/cjs/react-reconciler.development.js:4259:25)
    at reconcileChildFibers (/Users/hunter/preme-o/node_modules/react-reconciler/cjs/react-reconciler.development.js:4582:14)
    at reconcileChildren (/Users/hunter/preme-o/node_modules/react-reconciler/cjs/react-reconciler.development.js:6385:28)
    at updateHostComponent (/Users/hunter/preme-o/node_modules/react-reconciler/cjs/react-reconciler.development.js:6846:3)
    at beginWork (/Users/hunter/preme-o/node_modules/react-reconciler/cjs/react-reconciler.development.js:7632:14)
    at performUnitOfWork (/Users/hunter/preme-o/node_modules/react-reconciler/cjs/react-reconciler.development.js:11295:12)
(node:9107) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 1)
(node:9107) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

UserInfo component

// UserInfo.js
const React = require('react');
const { useState } = require('react');
const { Box } = require('ink');
const TextInput = require('ink-text-input');

const UserInfo = () => {
  const [name, setName] = useState('');

  return (
    <Box>
      <Box marginRight={1}>Enter your query:</Box>
      <TextInput value={name} onChange={() => setName(name)} />
    </Box>
  );
};

module.exports = UserInfo;

Layout component

const React = require('react');
const { Box, render } = require('ink');
const importJsx = require('import-jsx');

const Brand = importJsx('./Brand');
const UserInfo = importJsx('./UserInfo');

const Layout = () => (
  <Box>
    <Brand />
    <UserInfo />
  </Box>
);

render(<Layout />);

index.js

const importJsx = require('import-jsx');

module.exports = importJsx('./components/Layout');
0xhjohnson commented

Seemed to be an issue with my common js modules. Switch to using es6 imports and Webpack and everything works fine. Closing

0xhjohnson commented