CODEWITHSUNDEEP
typescriptwebpackcreate-react-apptypescript-decoratorinversifyjs
philgei
philgei

Reputation: 36

Integrate InversifyJS into Create-React-App

I'm doing a project, where a WebGL Game made with Babylonjs is embedded in a CRA-App.

Since we give great Attention to Software architecture, we want to build the WebGL part with InversifyJS as our DI Container.

However, InversifyJS works by utilizing Typescript Decorators. But those are not currently supported in CRA.

I've seen some guides on how to make it work, but they all are outdated and won't work for me.

I'd be so happy if anyone could point me in the right direction.

I am using CRA with Version 5.0.0

Upvotes: 1

Views: 514

Answers (1)

philgei
philgei

Reputation: 36

Ok, after many hours of googling, I found the answer myself.

By using customize-cra and react-app-rewiredone has to overwrite the webpack config with this:

// This file is used together with react-scripts-rewire to overwrite the webpack config of your CRA App to add capability for
// Typescript Decorators

const { override, addBabelPlugin } = require("customize-cra");
const babelTsTransformPlugin = require("babel-plugin-transform-typescript-metadata");

module.exports = override(addBabelPlugin(babelTsTransformPlugin));

Then, the tsconfig as to be modified to allow TS Decorators:

    "experimentalDecorators": true,
    "emitDecoratorMetadata": true,
    "types": ["reflect-metadata"]

after that, the reflect-metadata module has to be installed and loaded by importing it when bootstrapping the project.

Upvotes: 1

Related Questions