Ink CLI Ожидается, что компонент будет функцией

Пытаюсь разобраться в библиотеке Ink для создания консольного приложения с Javascript, и раньше я использовал React, но это не реагирует. Некоторые причуды немного сбивают с толку.

У меня есть приложение, работающее с двумя очень простыми компонентами, и я начал работать над более глубоким компонентом. Первые два просто запускают команду терминала для проверки версии, и они работают нормально. Я хочу перечислить в таблице список папок в определенной папке.

Вот мой Ui.js

'use strict';

const {h, Component, Color} = require('ink');
const importJsx = require('import-jsx');
const PropTypes = require('prop-types');
const ChildProcess = require('child_process');

const DockerCheck = importJsx('./components/docker-check');
const GitCheck = importJsx('./components/git-check');
const RepositoryList = importJsx('./components/repository-list');

class UI extends Component {
    render() {
        return (
            <div>
                <DockerCheck></DockerCheck>
                <GitCheck></GitCheck>
                <RepositoryList repoFolder='~/repoFolder' ></RepositoryList>
            </div>
        );
    }
}


module.exports = UI;

и ошибка исходит от компонента RepositoryList, который находится здесь:

'use strict';

const {h, Component, Color} = require('ink');
const fs = require('fs');

const PropTypes = require('prop-types');

const Table = require('ink-table');

class RepositoryList extends Component{
    constructor(props){
        super(props);
        this.state = {
            repos: []
        };
    }
    componentDidMount(){
        fs.readdir(this.props.repoFolder, (e, f) => {
            if (e){
                console.info(e);
            }else{
                this.setState({repos: f});
            }
        })
    }
    render(){
        let {repos} = this.state;

        return(
            <div><Table data = {repos}></Table></div>
        );
    }
}
RepositoryList.propTypes = {
    repoFolder: PropTypes.string
}

module.exports = RepositoryList;

и ошибка, которую я получаю, здесь:

[nodemon] starting node cli.js /Users/cjrutherford/other/ninkcli/node_modules/ink/lib/h.js:8 throw new TypeError(Expected component to be a function, but received ${typeof component}. You may have forgotten to export a component.); ^

TypeError: Expected component to be a function, but received object. You may have forgotten to export a component. at h (/Users/cjrutherford/other/ninkcli/node_modules/ink/lib/h.js:8:9) at RepositoryList.render (/Users/cjrutherford/other/ninkcli/components/repository-list.js:32:13) at RepositoryList._render (/Users/cjrutherford/other/ninkcli/node_modules/ink/lib/component.js:54:15) at mount (/Users/cjrutherford/other/ninkcli/node_modules/ink/lib/diff.js:36:35) at diff (/Users/cjrutherford/other/ninkcli/node_modules/ink/lib/diff.js:136:3) at diff (/Users/cjrutherford/other/ninkcli/node_modules/ink/lib/diff.js:163:21) at diff (/Users/cjrutherford/other/ninkcli/node_modules/ink/lib/diff.js:163:21) at build (/Users/cjrutherford/other/ninkcli/node_modules/ink/lib/renderer.js:10:9) at Renderer.update (/Users/cjrutherford/other/ninkcli/node_modules/ink/lib/renderer.js:25:20) at exports.render (/Users/cjrutherford/other/ninkcli/node_modules/ink/index.js:61:14) [nodemon] app crashed - waiting for file changes before starting...

Что мне не хватает для правильного рендеринга компонента?

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
0
68
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Оказывается, этот компонент нужно либо импортировать с помощью es6:

import Table from 'ink-table';

синтаксис или

const Table = require('ink-table').default;

Проблема на Github для Ink-Table

Другие вопросы по теме