Injection not working with React 16.8.6 #4
Description
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> {
...
}
}