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를 둘 다 지정해줘야 하며 이 부분 포맷이 다름에 유의해야 한다.

[JaeYeopHan]

VSCode version: 1.37.0 Absolute Path Bug

모든 지뢰를 다 찾은 줄 알았는데 또 밟아버렸다.

새롭게 파일을 생성하고 나서 여러 module을 import하는데 분명 오타도 없는데 절대 경로로 import가 되지 않는다.

어떤 파일에서도 import 하지 않은 A.ts (or A.tsx)에서 absolute path 로 import하면 위와 같은 에러메세지가 노출된다. (Cannot find module '...')

즉 어떤 특정 파일에서 import A from '.@/…/A'를 해주면 A 파일에서 절대 경로로 import가 가능해진다.

어떤 파일에서도 import 하지 않은이 무엇을 의미하는 것일까

[baeharam]

재엽님, 혹시 스토리북 절대경로 설정까지 추가하면 좋지 않을까요? 의견 한번 내봅니다 :)

.storybook/main.js

const path = require('path');

module.exports = {
  stories: ['../src/**/*.stories.tsx'],
  addons: [
    '@storybook/preset-create-react-app',
    '@storybook/addon-actions',
    '@storybook/addon-links',
  ],
  webpackFinal: (config) => {
    config.resolve.modules = [
      ...(config.resolve.modules || []),
      path.resolve(__dirname, '../'),
    ];

    config.resolve.alias = {
      ...(config.resolve.alias || {}),
      '@': 'src'
    };
    return config;
  }
};