Nx's shared libs aliases are known in the *.tsx files but not *.spec.ts

[kasir-barati]

Hey devs,

I have a sticky situation with Nx and it is how it treats test files in my monorepo for my NextJS app. I can use aliases to import shared stuff in my frontend app but for some mysterious reasons I cannot get the auto import to work for test files that have *.ts extension and not *.tsx.

Yes, you heard me right. It is only about the auto import and VSCode's red lines since I can still run my tests without any problem and tsc can compile and run tests.

See this file: https://github.com/kasir-barati/you-say/blob/main/apps/frontend/src/shared/api/axios-base-query.api.spec.ts#L3-L7

and here is how it looks in my IDE

tsconfig.spec.json

{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "outDir": "../../dist/out-tsc",
    "module": "commonjs",
    "types": ["jest", "node", "@testing-library/jest-dom"],
    "jsx": "react"
  },
  "include": [
    "jest.config.ts",
    "src/**/*.test.ts",
    "src/**/*.spec.ts",
    "src/**/*.test.tsx",
    "env.d.ts",
    "src/**/*.spec.tsx",
    "src/**/*.test.js",
    "src/**/*.spec.js",
    "src/**/*.test.jsx",
    "src/**/*.spec.jsx",
    "src/**/*.d.ts"
  ]
}

tsconfig.json

{
  "extends": "../../tsconfig.base.json",
  "compilerOptions": {
    "jsx": "preserve",
    "allowJs": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "incremental": true,
    "plugins": [
      {
        "name": "next"
      }
    ],
    "types": ["jest", "node"]
  },
  "include": [
    "**/*.ts",
    "**/*.tsx",
    "**/*.js",
    "**/*.jsx",
    "env.d.ts",
    "next-env.d.ts",
    ".next/types/**/*.ts"
  ],
  "exclude": [
    "node_modules",
    "jest.config.ts",
    "**/*.spec.ts",
    "**/*.test.ts"
  ]
}

tsconfig.base.json

{
  "compileOnSave": false,
  "compilerOptions": {
    "rootDir": ".",
    "sourceMap": true,
    "declaration": false,
    "moduleResolution": "Node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "importHelpers": true,
    "target": "ES2015",
    "module": "ESNext",
    "lib": ["ES2020", "DOM", "DOM.Iterable"],
    "skipLibCheck": true,
    "skipDefaultLibCheck": true,
    "baseUrl": ".",
    "paths": {
      "@backend/auth": ["packages/backend/auth/src/index.ts"],
      "@backend/common": ["packages/backend/common/src/index.ts"],
      "@backend/logger": ["packages/backend/logger/src/index.ts"],
      "@shared": ["packages/shared/src/index.ts"]
    }
  },
  "exclude": ["node_modules", "tmp"]
}

Any help would be extremely appreciated 😄

[kasir-barati]

How to reproce without my repo?

1. npx create-nx-workspace@latest appname --preset=next
2. cd appname
3. npx nx g @nx/js:lib mylib
4. touch apps/tesst/src/a.spec.ts
5. import { mylib } from '@appname/mylib';

And you'll see that IDE/VSCode in my case is saying Cannot find module '@test/mylib' or its corresponding type declarations.ts(2307)

But if you open a .tsx file and do the same, surprise, surprise it just recognise it as a valid import.

[kasir-barati]

solution

following my former comment on how to use a new nx workspace to reproduce the issue;

1. open this file in your IDE: apps/appname/tsconfig.json
2. remove these two from the exclude "**/*.spec.ts", and "**/*.test.ts":

   -"exclude": ["node_modules", "jest.config.ts", "**/*.spec.ts", "**/*.test.ts"]
   +"exclude": ["node_modules", "jest.config.ts"]

3. Restart your ts server if needed

REALLY funny and annoying. But I guess it is OK since it is not like that including a bunch of test files in the final app is gonna affect my NextJS app somehow, right?