We've just completed a major update to our monorepository, bringing it up to date with the following versions:
- Nx 14.3.6
- Angular 14.0.3
- Jest 28.1.1
- TypeScript 4.7.4
Although the compilation process went smoothly after the upgrade, we encountered numerous runtime errors such as "emitDecoratorMetadata causes runtime errors by referencing type-only imports with namespaces" (https://github.com/microsoft/TypeScript/issues/42624). This issue was also flagged by ESLint.
To address this, we had to replace all "import" statements with "import type" for types and interfaces across the board. This resolved the runtime errors and restored the functionality of the application. Additionally, to resolve the ESLint error, we installed and utilized the "eslint-plugin-import" extension.
However, this fix led to a new problem - our tests stopped functioning properly. It appears that Jest does not recognize the "import type" statement. In every unit test for a class utilizing "import type", the tests failed with the error:
ReferenceError: Zyz is not defined
(where xyz represents an imported type in the tested class, e.g.
// some-component.ts
import type { Xyz } from '...';
...
If we remove the "type" keyword from the "import type" statement, the tests run successfully but the earlier runtime errors resurface.
I have conducted thorough research (primarily focusing on babel usage/reconfiguration) based on findings from posts like this one: https://github.com/babel/babel/issues/10981, yet I am still grappling with solving this issue.