Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Injection not working with React 16.8.6 #4

Open
fljmayer opened this issue May 24, 2019 · 2 comments
Open

Injection not working with React 16.8.6 #4

fljmayer opened this issue May 24, 2019 · 2 comments

Comments

@fljmayer
Copy link

fljmayer commented May 24, 2019

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> {
    ...
  }
}
@gnaeus
Copy link
Owner

gnaeus commented Jul 29, 2019

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

It should contain following options:

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

@thisroot
Copy link

thisroot commented Sep 10, 2019

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"
    ]

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants