0

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.

user101289
  • 9,888
  • 15
  • 81
  • 148
  • 1
    I'm not familiar with `E2J`, but it looks like `PaneDirective` expects `content` to be a function that returns a JSX element - not a JSX element directly (https://ej2.syncfusion.com/react/documentation/splitter/getting-started). So replacing `content={}` with `content={() => ()}` leads to a different set of errors in `UserGrid.tsx`. For example, `empTemplate is not defined` - which looks reasonable because it is not defined in `UserGrid.tsx`. Hope this helps. – Pavel Savva Mar 19 '23 at 02:20
  • 1
    Also everything compiles and executes fine if `UserGrid` is 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 with `UserGrid`. – Pavel Savva Mar 19 '23 at 02:28

0 Answers0