Search code examples
typescriptcreate-react-appinversifyjs

InversifyJS + TypeScript + Ejected CRA: issues with importing files with interfaces

Code available here: https://github.com/rtrocca/test-inversify-cra

I created a simple React application with CRA and the TypeScript template and ejected the app.

I then added the files for the Ninja/Katana/Shuriken example.

I also modified the babel and typescript configuration:

tsconfig.json

"experimentalDecorators": true,
"emitDecoratorMetadata": true

and added "es6" in the lib section.

For Babel the changes are in the babel section of the package.json file:

"plugins": [
      "babel-plugin-transform-typescript-metadata",
      [
        "@babel/plugin-proposal-decorators",
        {
          "legacy": true
        }
      ],
      [
        "@babel/plugin-proposal-class-properties",
        {
          "loose": true
        }
      ]
    ]

Then I run npm start and got a "surprise": while Babel can build the code and it works, tsc generates the following errors:

Compiled with problems:

ERROR in ./src/di/entities.ts 25:108-114
export 'Weapon' (imported as 'Weapon') was not found in './interfaces' (module has no exports)

ERROR in ./src/di/entities.ts 25:142-148
export 'Weapon' (imported as 'Weapon') was not found in './interfaces' (module has no exports)

ERROR in ./src/di/entities.ts 25:157-172
export 'ThrowableWeapon' (imported as 'ThrowableWeapon') was not found in './interfaces' (module has no exports)

ERROR in ./src/di/entities.ts 25:200-215
export 'ThrowableWeapon' (imported as 'ThrowableWeapon') was not found in './interfaces' (module has no exports)

I was not able to find a solution to this problem. Any hints? I did not try with craco & c. as it seems that all these tools are less and less mantained.

Thanks.

Solution

  • At the end I was able to find the problem. Those warnings are analogue to what is described in https://javascript.plainenglish.io/leveraging-type-only-imports-and-exports-with-typescript-3-8-5c1be8bd17fb . In other words, the TypeScript files containing only type definitions are erased, but the import remains. The solution, since TypeScript 3.8 is to use import type