I have an app that uses an alias in a typescript config that looks like:
app/tsconfig.json
{
"compilerOptions": {
...,
"paths": {
"~/*": ["./*"]
}
},
...,
}
And then in my cypress folder I am extending this tsconfig:
cypress/tsconfig.json
{
"extends": "../app/tsconfig.json",
"compilerOptions": {
"target": "es5",
"lib": ["es5", "dom"],
"types": ["cypress", "node", "@testing-library/cypress"],
},
"include": ["../node_modules/cypress", "**/*.ts"]
}
But when I try to import something in a file that has an alias I get the error. For example in my cypress/support file I import a function from app/utils that imports a type from ~/graphql (~/graphql == app/graphql).
Module not found: Error: Can't resolve '~/graphql' in '/Users/my-user/my-project/app/utils' resolve '~/graphql' in '/Users/my-user/my-project/app/utils'
I can see in the logs it is looking in the wrong places:
[/Users/my-user/my-project/app/utils/node_modules]
[/Users/my-user/my-project/app/node_modules]
[/Users/my-user/node_modules]
[/Users/node_modules]
[/node_modules]
It almost had it here /Users/my-user/my-project/app/utils/node_modules but for some reason was looking for a node_modules folder?
How can I set up my cypress config to respect the paths in my app/tsconfig? I have tried adding the below variations to my cypress/tsconfig but nothing seems to work.
cypress/tsconfig.json
"paths": { "~/*": ["*"] }
"paths": { "~/*": ["../app/*"] }
"paths": { "~/*": ["../*"] }