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]

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 babel/babel#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