Cannot read properties of undefined (reading 'length') #622
Description
Cannot read properties of undefined (reading 'length')
TypeError: Cannot read properties of undefined (reading 'length')
at eval (webpack-internal:///./node_modules/.pnpm/the-graph@0.13.1_react-dom@18.2.0_react@18.2.0/node_modules/the-graph/the-graph/the-graph-graph.js:489:58)
at Array.map (<anonymous>)
only inPorts and outPorts exists on component, no inports, so inports is undefined.
var componentInfo = self.props.library[node.component];
if (TheGraph.config.autoSizeNode && componentInfo) {
// Adjust node height based on number of ports.
var portCount = Math.max(componentInfo.inports.length, componentInfo.outports.length);I get library by this, there is no doc on this, I read the source to learn this:
/* eslint-disable @typescript-eslint/strict-boolean-expressions */
/* eslint-disable @typescript-eslint/promise-function-async */
import { useThemeObservable } from '@services/theme/hooks';
import { type Graph, loadJSON } from 'fbp-graph/lib/Graph';
import { ComponentLoader } from 'noflo';
import { useEffect, useState } from 'react';
import { useTranslation } from 'react-i18next';
import type { IFBPLibrary } from 'the-graph';
import { GraphEditor } from './GraphEditor';
import { photoboothJSON } from './photobooth.json';
export default function Workflow(): JSX.Element {
const { t } = useTranslation();
const theme = useThemeObservable();
const [library, setLibrary] = useState<IFBPLibrary | undefined>();
const [graph, setGraph] = useState<Graph | undefined>();
useEffect(() => {
void loadJSON(photoboothJSON).then(graph => {
setGraph(graph);
});
}, []);
// load library bundled by webpack noflo-component-loader from installed noflo related npm packages
useEffect(() => {
const loader = new ComponentLoader('');
void loader.listComponents().then((componentList) => {
const libraryToLoad: IFBPLibrary = {};
Object.entries(componentList).forEach(([name, componentDefinitionRaw]) => {
if (typeof componentDefinitionRaw === 'string') {
// TODO: handle these ComponentDefinition types
return;
}
if ('getComponent' in componentDefinitionRaw) {
const componentDefinition = componentDefinitionRaw.getComponent();
libraryToLoad[name] = componentDefinition;
}
});
setLibrary(libraryToLoad);
});
}, []);
return graph && library
? (
<>
<GraphEditor theme={theme?.shouldUseDarkColors ? 'dark' : 'light'} library={library} graph={graph} />
</>
)
: <div>{t('Loading')}</div>;
}So library constructed from noflo's new ComponentLoader().listComponents()[0].getComponent() is not assignable to <TheGraph.App />?