react-ioc icon indicating copy to clipboard operation
react-ioc copied to clipboard

Injection not working with React 16.8.6

Open fljmayer opened this issue 6 years ago • 2 comments

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> {
    ...
  }
}

fljmayer avatar May 24 '19 13:05 fljmayer

Sorry for a long wait. Can you provide your tsconfig.json file?

It should contain following options:

  "experimentalDecorators": true,
  "emitDecoratorMetadata": true,

gnaeus avatar Jul 29 '19 11:07 gnaeus

For run this library with create-react-app. You must make some steps:

  1. eject CRA
  2. Add bubel plugins into package.json
 "babel": {
    "plugins": [
      "babel-plugin-transform-typescript-metadata",
      ["@babel/plugin-proposal-decorators", { "legacy": true }]
    ],
    "presets": [
      "react-app"
    ]

nimblemo avatar Sep 10 '19 06:09 nimblemo