create-react-appでtsyringeを使う方法

「create-react-app」で作ったプロジェクトに「tsyringe」を導入する際に、
「TypeInfo not known for ~」というエラーが出てしまい、解決に苦戦してしまったので備忘録として残します。

create-reacdt-appでプロジェクトを作成

$ npx create-react-app sample --template typescript
$ yarn add tsyringe reflect-metadata

tsconfig.json

{
  "compilerOptions": {
    ~
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true
  },
  ~
}

cracoでbabelプラグインを追加する

「create-react-app」そのままでは「tsyringe」は使用できないため、「craco」というパッケージを使いました。
これは「Create React App Configuration Override」の略で、babelの構成などを上書きできるパッケージです。

yarn add -D babel-plugin-transform-typescript-metadata craco

package.json

"scripts": {
  "start": "craco start",
  "build": "craco build",
  "test": "craco test"
}

craco.config.js

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