Does this support React.lazy component

[edwards-afterpay]

Below code doesn't work as I expected. Have been running into

Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: <ErrorBoundary />. Did you accidentally export a JSX literal instead of a component?

Uncaught Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.

React lazy component

const ProfileLazy = React.lazy(() => import("./Profile"));

const Profile =
    <ErrorBoundary>
    <Suspense fallback={<div>Loading...</div>}>
        <ProfileLazy />
    </Suspense>
</ErrorBoundary>

Angular react2angular wrapper

angular.module("application.module.profile", [])
.controller("application.module.profile.controller",
        ["$rootScope", "$scope", "$controller"],
        function ($rootScope, $scope, $controller) {
            $controller("application.module.controller", {$scope: $scope});
        })
    .component('profile', react2angular(Profile, [], []))

Can I clarify if react2angular will work with the dynamic imports in general, or if there is any issue with the code snippet I have written? Keen to hear your thoughts to understand how can we make this work.

[RusmiselE-lattice]

@edwards-afterpay This isn't a problem with react2angular. To quote the error: "React.createElement: type is invalid...Did you accidentally export a JSX literal instead of a component?"

The problem is that Profile isn't a component here but a JSX literal. To fix your error, you can just make it a function:

const Profile = () => (
    <ErrorBoundary>
        <Suspense fallback={<div>Loading...</div>}>
            <ProfileLazy />
        </Suspense>
    </ErrorBoundary>
);