I'm trying to load a react component with several subcomponents (that themselves have props) dynamically, similar to the solution suggested here.
I've built a Base component that takes a string value, and then the Base component looks up that string value to instantiate the sub-components that need to be rendered. At the moment I've only added a single component for "Users" to illustrate the problem.
However, I keep running into an error saying that
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.
I don't know what I'm doing wrong, I think everything is being imported correctly and webstorm doesn't show any issues with what I've done, until I load the page.
I've built a stackblitz to show the problem. It seems like this route is very straightforward, but I'm missing something and I don't see what it is.
E2J, but it looks likePaneDirectiveexpectscontentto be a function that returns a JSX element - not a JSX element directly (ej2.syncfusion.com/react/documentation/splitter/getting-started). So replacingcontent={<ResourceGrid setGridRef={setGridRef} rowSelected={rowSelected} />}withcontent={() => (<ResourceGrid setGridRef={setGridRef} rowSelected={rowSelected} />)}leads to a different set of errors inUserGrid.tsx. For example,empTemplate is not defined- which looks reasonable because it is not defined inUserGrid.tsx. Hope this helps.UserGridis replaced with a custom dummy component, so I think your dynamic loading should work fine after adding a wrapper function and there's a separate unrelated issue withUserGrid.