'Typescript Build Fails When Adding Angular into Monorepo (Clashing of Jasmine and Jest Types)
Gist
I have a Monorepo with solely Typescript packages. When I run tsc --build
all packages will be compiled to Javascript. This worked fine until I added a package containing an Angular app.
For testing my packages I am using Jest. But Angular uses Jasmine.
Issue
When running tsc --build
now, it seems that types of Jasmine and Jest are clashing.
I get a total of 184 errors. Originating from both node_modules/@types/jest
and node_modules/@types/jasmine
and my own packages:
Errors
I only show a few snippets from the error log, as it would be way too long to paste the whole thing. You can find the complete error log here: https://gist.github.com/flolude/115e92ca13cd8c86a4dca03528b92d4f
Jest node_modules/@types/jest/index.d.ts:1310:9 - error TS2717: Subsequent property declarations must have the same type. Property 'message' must be of type 'string', but here has type 'string | (() => string)'.
1310 message: string | (() => string);
~~~~~~~
Jasmine
node_modules/@types/jasmine/ts3.1/index.d.ts:304:9
304 message?: string;
~~~~~~~
'message' was also declared here.
My Own Packages
services/gateway/src/gateway.server.ts:7:24 - error TS2307: Cannot find module '@cents-ideas/utils'.
7 import { Logger } from '@cents-ideas/utils';
~~~~~~~~~~~~~~~~~~~~
Solution
Everything compiles without errors when I remove the Jasmine types from the package.json of the Angular project. That's why I am sure they are causing the errors. But I need those packages for testing with Angular.
"devDependencies": {
// no errors when I remove those 2 packages
"@types/jasmine": "~3.3.8",
"@types/jasminewd2": "~2.0.3",
// ...
}
Source Code
As I've already mentioned I am operating inside a Monorepo. Here is the source code if you need further insight:
- Project root
- Angular project (causes the errors)
Solution 1:[1]
I've run into this problem as well, I can think of two possible approaches:
- Don't use Jasmine in your Angular Project.
- Use typeRoots
Don't use Jasmine in your Angular Project.
Since you seem to be starting a new Angular project and haven't actually written any Jasmine based Angular tests, you might just as well just use Jest for that project as well. If there are already Jasmine tests within the Angular project, migration is quite easy as well.
Use TypeRoots
Using tsconfig typeRoot compilerOptions, you can specifically extract and fix the conflicts in the respective .d.ts declarations.
what you need is to "break the tie" between the two declarations in some way. so options, consider creating a new folder: "overrides" , and add "overrides\jest\index.d.ts" to be what you thinkjestshould be. then update your tsconfig.json to include"typeRoots": [".\overrides", ".\node_modules@types"]. What this does it tells the compiler to look for types first in".\overrides\jest"and if it did not find it to look in".\node_modules@types\jest"`. GitHub Source
However, you will now have to maintain what is basically a local fork of a type definition file. If you can, you should post that fix upstream in whichever library you think should be fixed.
Updated 5/22: removed --skipLibCheck, as it is incompatible with OPs problem
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
Solution | Source |
---|---|
Solution 1 |