How to use files outside of cypress that use an alias

Viewed 360

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": { "~/*": ["../*"] }
0 Answers
Related