Absolute path in VSCode with TypeScript, CRA, Jest (feat. craco)

[JaeYeopHan]

Description

Configure Absolute path!!🚀

⛑ Based "react-scripts": "3.0.1"

TL;DR

Env

• CRA (create-react-app)
• TypeScript
• Jest
• craco (https://github.com/sharegate/craco)

Configuration

craco.config.js

const resolve = arg => path.resolve(__dirname, arg)

module.exports = function() {
  return {
    webpack: {
      alias: {
        '@': resolve('src'),
      },
    },
    jest: {
      configure: {
        moduleNameMapper: {
          '^@/(.*)$': '<rootDir>/src/$1',
        },
      },
    },
  }
}

tsconfig.paths.json

{
  "compilerOptions": {
    "baseUrl": "./",
    "paths": {
      "@/*": ["src/*"]
    }
  }
}

tsconfig.json

{
  "extends": "./tsconfig.paths.json",
  "compilerOptions": {
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "preserve",
    "plugins": [
      {
        "transform": "ts-optchain/transform"
      }
    ]
  },
  "include": ["src/*", "src/__tests__"]
}

Mine 💣

1. moduleNameMapper

CRA로 개발 환경으로 세팅을 할 경우, jest config를 package.json에서 override 할 때 moduleNameMapper 속성을 override 할 수 없다. override 하려면 eject를 하라고 한다. 왜 때문에 이 중요한 속성을 막아놓았는지 이해가 되지 않는 부분. 그렇기 때문에 craco 와 같은 cra override tool이 필수.

2. With Jest

test directory에 대한 부분을 추가적으로 명시해야 한다는 점에서 긴 시간 삽질을 했다. 테스트 디렉토리가 다르다면 include에 추가해줘야 한다.

3. Customize tsconfig.json

tsconfig.json 에서 path 관련한 속성을 바로 작성을 하면 cra가 없애버리고 tscofnig.json을 다시 생성한다. 이 부분도 어떤 스크립트에서 처리하는지 정확히 파악하지는 못했지만 이를 우회하는 방법은 존재한다. 별도 파일로 정의 후, extends를 해줘야 한다.

4. import index

@api와 같이 directory를 direct로 alias 지정할 경우 index를 명시적으로 import 해줘야 한다. (이 부분은 검토가 더 필요하지만 directory로 인식하여 index를 암묵적으로 import할 수 없는 것으로 예상된다.)

Tips

• tsconfig과 webpack alias를 둘 다 지정해줘야 하며 이 부분 포맷이 다름에 유의해야 한다.