CRA2 doesn't work with reflect-metadata package

[elderapo]

Is this a bug report?

Yes

Did you try recovering your dependencies?

No

Which terms did you search for in User Guide?

None

Environment

Environment Info:

  System:
    OS: Linux 4.4 Ubuntu 14.04.5 LTS, Trusty Tahr
    CPU: x64 Intel(R) Core(TM) i5-6600K CPU @ 3.50GHz
  Binaries:
    Node: 9.11.2 - /usr/local/bin/node
    Yarn: 1.6.0 - ~/.yarn/bin/yarn
    npm: 5.6.0 - ~/.npm-global/bin/npm
  Browsers:
    Chrome: 71.0.3578.98
    Firefox: 64.0
  npmPackages:
    @types/react: ^16.8.2 => 16.8.2 
    @types/react-dom: ^16.8.0 => 16.8.0 
    react: ^16.8.1 => 16.8.1 
    react-dom: ^16.8.1 => 16.8.1 
    react-scripts: 2.1.3 => 2.1.3 
  npmGlobalPackages:
    create-react-app: 1.5.2

Steps to Reproduce

Just follow the steps from the Reproducible Demo part and open console in browser.

Expected Behavior

Browsers console should print someProperty type: Number.

Actual Behavior

It prints couldn't get the type :(.

Reproducible Demo

git clone git@github.com:elderapo/cra2-reflect-metadata-bug.git
cd cra2-reflect-metadata-bug
yarn
yarn start

The problem

I think the problem is that babel completely strips out TS types before compilation process which makes it impossible for reflect-metadata package to do its work.

[stale[bot]]

This issue has been automatically marked as stale because it has not had any recent activity. It will be closed in 5 days if no further activity occurs.

[elderapo]

Are there any plans regarding this issue?

I understand that there might not be an easy fix becuase of how babel compiles typescript. However, there are few nice libraries (ex. InversifyJS) that heavily rely on reflect-metadata package and the fact that cra-2 is not complatible is really discouraging.

[iansu]

I think this would need to be addressed in Babel. Can you find or create an issue there and link to it here?

[elderapo]

@iansu, here you go https://github.com/babel/babel/issues/9681.

[magneticflux-]

Any likelihood of getting babel-plugin-transform-typescript-metadata added? It seems like a sensible default if Typescript is used anywhere, since a lot of libraries use the type metadata.

[iansu]

That might be possible. It depends how mature that plugin is and what kind of impact it has on build performance. cc @ianschmitz @mrmckeb

[ianschmitz]

Can anyone confirm the stability of the metadata proposal? What stage is it in? Last time I checked I seem to remember it not having been proposed yet as they were waiting for decorators to be later stage?

We typically don't support early stage proposals in CRA as they are too volatile. For example the decorators proposal changed drastically during the first couple stages.

[xiaoxiangmoe]

@iainbeeston can we config babel and eslint in CRA？In this way, the responsibility for maintaining the plugin of babel can be given to the user.

[Obiwarn]

Is there any workaround for this to get any dependency injection library to run?

[rmoedt]

Is there any workaround for this to get any dependency injection library to run?

@Obiwarn You can use a package like https://github.com/arackaf/customize-cra, which allows you to load extra babel plugins without ejectting cra. You can then include the babel-plugin-transform-typescript-metadata plugin

[Obiwarn]

@rmoedt I installed both and tried

const { override, addExternalBabelPlugin } = require("customize-cra");

module.exports = override(
  addExternalBabelPlugin("babel-plugin-transform-typescript-metadata")
);

But tsyringe still throws Error: TypeInfo not known

[kmannislands]

@rmoedt I installed both and tried

const { override, addExternalBabelPlugin } = require("customize-cra");

module.exports = override(
  addExternalBabelPlugin("babel-plugin-transform-typescript-metadata")
);

But tsyringe still throws Error: TypeInfo not known

@Obiwarn I was running into the same issue with CRA x TSyringe. I didn't try customize-cra but craco did it for me. See https://github.com/microsoft/tsyringe/issues/29#issuecomment-652596008

// craco.config.js
module.exports = function ({ env: _env }) {
    return {
        babel: {
            plugins: [
                "babel-plugin-transform-typescript-metadata"
            ]
        },
    };
};

[Obiwarn]

@kmannislands Thank you. I tried it but now, in the classes I use mobx-decorators I get:

TypeError: Reflect.metadata is not a function

[elderapo]

@Obiwarn You need to install and import reflect-metadata package.

[Obiwarn]

@elderapo argh....forgot the import. Thank you!

Now it works!

[pabloordonez]

Now with CRA 4.0 craco breaks, and I don't know if they gonna fix that, after all craco is a big hack, and not a real fix for the main issue that we can't configure babel, or extract metadata, and exporting metadata is a must now days. We have a dependency library that we use in our projects with a useDependency hook, and we need this feature. We can't upgrade to CRA 4.0 because that breaks craco, but the old CRA is old, and throws random linter errors when working with complex generic cases. Is there any possibility at all to fix this inside CRA without the need of a hack?

[ogxd]

I installed craco today and used the configuration from @kmannislands and it worked ❤️

[JMLX42]

I installed craco today and used the configuration from @kmannislands and it worked heart

It worked but I had to add import 'reflect-metadata' in the very file where I'm using the @Type decorator.

Is there anyway to import it just once in intex.tsx and be done with it?

[jbrighton-dev]

Does anyone know how to handle the issue with transpilation of es6 syntax with babel? When I try to use tsyringe with craco, I run into the problem when using autoinjection "TypeError: Class constructor x cannot be invoked without 'new'"

[thongxuan]

Does anyone know how to handle the issue with transpilation of es6 syntax with babel? When I try to use tsyringe with craco, I run into the problem when using autoinjection "TypeError: Class constructor x cannot be invoked without 'new'"

edit tsconfig.json, change "target" value from "es5" to "es6" or more