create-react-app: CRA2 doesn't work with reflect-metadata package

Is this a bug report?

Yes

Did you try recovering your dependencies?

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.

About this issue

Original URL
State: open
Created 5 years ago
Reactions: 8
Comments: 20 (4 by maintainers)

Most upvoted comments

@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"
            ]
        },
    };
};

+23

kmannislands on Jul 1, 2020

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.

elderapo on Mar 13, 2019

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.

magneticflux- on Apr 13, 2019

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

ogxd on Jul 4, 2021

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?

pabloordonez on Oct 29, 2020

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

elderapo on Jul 3, 2020

@elderapo argh…forgot the import. Thank you!

Now it works!

Obiwarn on Jul 3, 2020

@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.

xiaoxiangmoe on Apr 28, 2019