[TIL] codesandbox 에서 local 전환기

코드 샌드박스의 리액트 환경을 로컬에서 돌려보자

1. npm install이 안되는 문제가 발생했다.

• 원인 : 타입스크립트의 버전이 맞지 않은 것.
• 해결책 : 필요한 설치를 위해 --legacy-peer-deps 옵션으로 설치를 해보자
  • --force
    • The f or -force argument will force npm to fetch remote resources even if a local copy exists on disk.
  • --legacy-peer-deps
    • --legacy-peer-deps: ignore all peerDependencies when installing, in the style of npm version 4 through version 6.
    • peerDependencies : 일반적으로 dependency는 내가 만든 모듈에서 사용하는 패키지들을 지정하는 반면, peerDependencies는 반대로 내가 만든 모듈이 다른 모듈과 함께 동작할 수 있다는 호환성을 표시하는 것이다. 마치 gulp가 있다면 내가 만든 모듈은 gulp의 플러그인 중 하나인 것이다. 이때 내가 만든 모듈이 gulp의 모든 버전이 아니라 1.3 버전과만 동작한다면 그런 정보를 표시해야하는데 이때 사용하는 것이 peerDependencies 인 것이다

• npm github blog
  - You have the option to retry with --force to bypass the conflict or --legacy-peer-deps command to ignore peer dependencies entirely (this behavior is similar to versions 4-6).

2. 이후 실행에서는 다음의 문제가 발생하였다.

    $ npm start

    > todo-list@1.0.0 start
    > react-scripts start

    /Users/Downloads/todo-list/node_modules/react-scripts/scripts/utils/verifyTypeScriptSetup.js:239
          appTsConfig.compilerOptions[option] = value;
                                              ^

    TypeError: Cannot assign to read only property 'jsx' of object '#<Object>'
        at verifyTypeScriptSetup (/Users/Downloads/todo-list/node_modules/react-scripts/scripts/utils/verifyTypeScriptSetup.js:239:43)
        at Object.<anonymous> (/Users/Downloads/todo-list/node_modules/react-scripts/scripts/start.js:31:1)
        at Module._compile (node:internal/modules/cjs/loader:1091:14)
        at Object.Module._extensions..js (node:internal/modules/cjs/loader:1120:10)
        at Module.load (node:internal/modules/cjs/loader:971:32)
        at Function.Module._load (node:internal/modules/cjs/loader:812:14)
        at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:76:12)
        at node:internal/main/run_main_module:17:47

• 원인 : react-scripts 버전이 상용버전보다 낮기 때문
  • 프로젝트에 설정해 둔 react-scripts 의 버전은 4.0.0 버전이었다.
• 해결책 : 해당 버전을 CRA버전과 맞춰보자.

3. 오! 코드가 올라갔다. 하지만 분명 문제가 없는 코드인데 문제가 발생했다.

• 원인 : 추측이다. 에러를 내는 것은 타입스크립트 프로젝트에 대한 lint 단계에서의 에러였다. 그렇다면 lint에서 어떤 문제가 있는 것이 아닐까?

그러다가 이런 이슈를 발견했다.
https://github.com/babel/babel-eslint/issues/832

이슈에서는 deprecated된 babel-eslint를 사용하고 있어서 에러가 났던 것이라 하고 있었다.

그래서 내 node_modules를 확인해보니 아니 여기에 babel-eslint가 자리하고 있는게 아닌가!

• 해결책 : babel-eslint 를 @babel/eslint-parser로 바꿔보자
  • npm uninstall babel-eslint babel-eslint-plugin
  • npm install --save-dev @babel/eslint-parser @babel/eslint-plugin

• 설치 후 parser를 지정해주자

// .eslintrc
{
   "parser": "@babel/eslint-parser"
}

4. 그러고 나니 에러는 달라졌지만, 아예 컴파일조차 되지 않았다.

    Failed to compile.

    src/App.tsx
      Line 0:  Parsing error: No Babel config file detected for /Users/Downloads/todo-list/src/App.tsx. Either disable config file checking with requireConfigFile: false, or configure Babel so that it can find the config files

    src/components/common/Loading.tsx
      Line 0:  Parsing error: No Babel config file detected for /Users/Downloads/todo-list/src/components/common/Loading.tsx. Either disable config file checking with requireConfigFile: false, or configure Babel so that it can find the config files

    src/components/common/Spinner.tsx
      Line 0:  Parsing error: No Babel config file detected for /Users/Downloads/todo-list/src/components/common/Spinner.tsx. Either disable config file checking with requireConfigFile: false, or configure Babel so that it can find the config files

• 추측하기로는 @babel/eslint-parser 를 사용하기로 했는데 babel.config.js 파일같은 config 파일이 없는 것으로 보였다.
• 원인 : babel.config를 지정하거나 requireconfigFile 옵션을 설정하지 않은 것.
• 해결책 : 기본적으로 코드샌드박스 환경도 CRA를 타고 온 것이라 바벨 세팅을 함부로 바꿀 수 없다는 생각이 들었다. 따라서 파서 옵션을 바꿔줬다.

    // .eslintrc
    {
      "parser": "@babel/eslint-parser",
      "parserOptions": {
        "requireConfigFile": false,
      },
    }

5. 에러 로그가 바뀌었다.

    Failed to compile.

    src/App.tsx
      Line 11:4:  Parsing error: This experimental syntax requires enabling one of the following parser plugin(s): 'jsx, flow, typescript' (11:4)

    src/components/common/Loading.tsx
      Line 5:  Parsing error: Unexpected reserved word 'interface'. (5:0)

    src/components/common/Spinner.tsx
      Line 8:  Parsing error: Unexpected reserved word 'interface'. (8:0)

• .tsx에서 에러를 내는 것을 보니 이것은 typescript 관련된 셋업이 되지 않아서이다. 이상하다. 분명 타입스크립트 셋업은 되어있을텐데. 여기서 감을 잡았다. 우리는 eslint의 설정만 잡아주면 되는 것이었다.

  • 원인 : @babel/eslint-parser의 옵션을 리액트, 타입스크립트 셋업을 하지 않은 것
  • 해결책 : react, ts 를 적용한 babel의 옵션을 담은 형태로 lint 셋업하기

        // .eslintrc
        {
          "parser": "@babel/eslint-parser",
          "plugins": ["@babel"],
          "parserOptions": {
            "requireConfigFile": false,
            "babelOptions": {
              "presets": ["@babel/preset-react", "@babel/preset-typescript"]
           },
          },
        }

• 이를 위해 필요한 babel preset을 함께 설치한다.
• npm install @babel/preset-typescript @babel/preset-env @babel/preset-react --save-dev

짠!

끝👋