I followed the instructions to use React IoC in my simple project with TypeScript 3.4.3, but it's not working. I get the error below in the browser console, and when the application tries to access the injected property, it's undefined. What could be the problem?
index.js:1446 Error: undefined is not a valid dependency.
Please specify ES6 class as property type e.g.
class MyService {}
class Dashboard {
@inject myService: MyService;
}
at logError (index.esm.js:48)
at logInvalidMetadata (index.esm.js:77)
at injectDecorator (index.esm.js:224)
at inject (index.esm.js:210)
at applyDecoratedDescriptor.js:14
at Array.reduce (<anonymous>)
at _applyDecoratedDescriptor (applyDecoratedDescriptor.js:13)
at Module../src/react/Dashboard.tsx (Dashboard.tsx:27)
at __webpack_require__ (bootstrap:786)
at fn (bootstrap:149)
at Module../src/react/App.tsx (App.scss?1296:45)
at __webpack_require__ (bootstrap:786)
at fn (bootstrap:149)
at Module../src/react-spa.js (react-spa.js:1)
at __webpack_require__ (bootstrap:786)
at fn (bootstrap:149)
at async Promise.all (:3000/index 0)
The React component looks roughly like this:
import { provider, inject } from "react-ioc";
import { ContentService } from './services/ContentService';
@provider(ContentService)
class Dashboard extends Component<any, State> {
@inject contentService!: ContentService;
...
and
export class ContentService {
public loadHeader(): Promise<any> {
...
}
}
I followed the instructions to use React IoC in my simple project with TypeScript 3.4.3, but it's not working. I get the error below in the browser console, and when the application tries to access the injected property, it's undefined. What could be the problem?
The React component looks roughly like this:
and