CRA(Create React App)

CRA(Create React App)

문제 발생

11월 23일 기준 CRA 로 react 프로젝트 생성후 빌드 시 react-scripts:4.0.0에서 아래 에러가 발생하고 있다

TypeError: Cannot assign to read only property 'jsx' of object '#<Object>'

아래 js 파일에서 해당 에러가 발생하고 있으며 관련 키워드 검색 시 문제 발생 시각 기준 24시간 이내에 작성된 게시글에서 언급이 되고 있는 것으로 확인되었다.

/node_modules/react-scripts/scripts/utils/verifyTypeScriptSetup.js:239

• 해결방안

  이후 문제 해결에 차도가 없다가 11월 23일 2시~3시 사이 react-scripts 4.0.1 이 릴리즈 되었고 최신 CRA의 의존성이 변경 되었다.

  6시에 CRA로 react 프로젝트 생성 후 빌드 결과 정상적인 페이지 응답이 확인된다.

문제 발생

하지만 위의 문제에 이어서 emotion 적용 시 아래와 같은 에러가 발생한다.

SyntaxError: pragma and pragmaFrag cannot be set when runtime is automatic.

• 시도

  해당 에러를 검색해서 최근 React17과 Emotion10 에 migrating 문제가 있는 것이 확인됐다.

  Migrating to React 17 and Fixing the JSX Runtime Error with Emotion

  위의 게시글에서 명시된 방안을 적용한 결과는 다음과 같다.

  

  1번 방안 적용 시 에러

  

  2번 방안 적용 시 에러

  결국 위의 방안으로는 해결이 되지 않았다.

  또한 tsconfig.js에서 아래와 같은 경고를 보이면서 jsx 값을 react 로 바꾼 상태에서 빌드 시 자동으로 react-jsx 로 바꿔버린다.

  Argument for '--jsx' option must be: 'preserve', 'react-native', 'react'
  

  Cannot use JSX unless the '--jsx' flag is provided
  

• 해결방안

  다음 두 링크를 참고한다.

  아래 링크에 의하면 vs code가 intelliSense를 위해 사용하고 있는 typescript 버전과 node_modules에 설치된 typescript 버전이 일치하지 않아 발생하는 문제라고 한다. 그러므로 아래 두 방안 중 하나를 적용한다.

  1. vs code 하단에 표시된 typescript 버전을 클릭해 node_modules의 버전으로 변경한다.

  2. vs code의 typescript 버전에 맞춰 node_modules에 설치된 typescript 버전을 다운그레이드 하면 된다.

  

  4.1.2 라고 표시된 부분이 vs code에서 사용중인 TypeScript의 version 이다.

  4.0.0 breaks with typescript (all versions) · Issue #9868 · facebook/create-react-app

  아래 링크에 의하면 해당 에러는 eslint-import-resolver-node 모듈의 부재 때문에 생긴거라고 한다. npm i eslint-import-resolver-node 를 입력해 설치하도록 한다.

  SyntaxError: pragma and pragmaFrag cannot be set when runtime is automatic.

  Resolve error: unable to load resolver "node" · Issue #1730 · airbnb/javascript

문제 발생

위를 통해 문제를 해결했더니 다음과 같은 문제가 발생했다.

Type '{ children: string; css: SerializedStyles; }' is not assignable to type 'DetailedHTMLProps<HTMLAttributes<HTMLD  Property 'css' does not exist on type 'DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>'.  TS2322

• 해결방안

  아래 링크에 의하면 Emotion 11 버전을 사용할 경우 tsconfig에 아래 옵션을 추가해야한다고 한다.

  {
     " compilerOptions " : {
       " types " : [ " @ emotion / react / types / css-prop " ]
    }
  }
  

  TS2322: Property 'css' does not exist... · Issue #1249 · emotion-js/emotion