Injection not working with React 16.8.6

[fljmayer]

I am on React 16.8.6 and TypeScript 3.4.3, and I followed the instructions as much as possible. My project is just a small proof-of-concept with a single @Injectable service, a single @Injected attribute (see below) and a simple @Module({ providers: [ContentService] }) on the main application component. One exception is that I had to allow for the injected attribute to be uninitialized: @Inject contentService!: ContentService;

However, when componentDidMount() tries to call a method on contentService, the attribute is undefined.

[RobinBuschmann]

@fljmayer Can you provide an example repo? I cannot reproduce your issue?

[fljmayer]

Here is the repo: https://github.com/fljmayer/react-pilot. Just run npm start and you should see the error in your browser.

[RobinBuschmann]

I couldn't get it to work neither. I'll give it another shot today.

[s97712]

you need use babel metadata plugin

[fljmayer]

Hi s97712, thanks for your response. Could please be more specific about which Babel plugin I need to use? I am looking for the exact module name to be used with npm install --save-dev ....

[s97712]

I'm use react-app-rewired for rewrite babel config, and here is my react-app-rewired config.

// file: ./config-overrides.ts
const {
    override,
    addBabelPlugins
} = require("customize-cra");

module.exports = override(
    addBabelPlugins(
        "babel-plugin-transform-typescript-metadata",
        ["@babel/plugin-proposal-decorators", { "legacy": true }],
        ["@babel/plugin-proposal-class-properties", { "loose": true }],
    )
)

[fljmayer]

I ejected the react-app and added the mentioned Babel plugins into package.json. It didn't help.

[csisy]

Any update on this?

[ashrpc]

+1

[ashrpc]

Update: not react.di issue, problem inside webpack/babel config. In my case adding ts-loader to webpack loaders along with babel-loader solved issue.

[glebsts]

Sorry for posting to this old thread, but does it mean react.di won't work with unejected create-react-app?