Going to react component throws "Unknown provider: DirectiveProvider <- Directive"

[dawnmessier]

I followed the directions in the guide to set up react-hybrid, but when going to the page with the React component, i get the below error. Am I missing something? There's a <ui-view> tag in the DOM, but no <react-ui-view-adapter> or <UIView>

Error: [$injector:unpr] Unknown provider: [object Module]DirectiveProvider <- [object Module]Directive
https://errors.angularjs.org/1.7.8/$injector/unpr?p0=%5Bobject%20Module%5DDirectiveProvider%20%3C-%20%5Bobject%20Module%5DDirective
    at angular.js:138:1
    at angular.js:4924:1
    at Object.getService [as get] (angular.js:5084:1)
    at angular.js:4929:1
    at Object.getService [as get] (angular.js:5084:1)
    at getComponentBindings (templateFactory.js:177:27)
    at TemplateFactory../node_modules/@uirouter/angularjs/lib-esm/templateFactory.js.TemplateFactory.makeComponentTemplate (templateFactory.js:168:1)
    at Ng1ViewConfig.getTemplate (views.js:75:1)
    at Object.<anonymous> (viewDirective.js:311:1)
    at angular.js:1388:1 '<ui-view class="ng-scope">'

package.js

"angular": "1.7.8",
"@uirouter/react-hybrid": "^1.0.4",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-router-dom": "^5.2.0"

app.js

var UI_ROUTER_REACT_HYBRID = require('@uirouter/react-hybrid').UI_ROUTER_REACT_HYBRID;

angular.module('app', [
    'config',
    'ui.router',
    'ui.router.state.events',
    ...
    UI_ROUTER_REACT_HYBRID
]);

routes

var Activity = require('../../../react/activity.root');

angular.module('app').config(settingsConfig);

settingsConfig.$inject = ['$stateProvider'];

function settingsConfig($stateProvider) {
    $stateProvider
     .state('app.settings', {
            abstract: true,
            template: '<ui-view/>'
        })
    .state('app.settings.activity', {
            url: '/settings/activity',
            component: Activity,
            data: {
                pageTitle: 'Activity'
            }
        })
}

component

import React from 'react';

const Root = () => {
    return <div>This is the activity page</div>;
};
export default Root;

[Newbie012]

Did you solve it?