Create React App 및 TypeScript를 사용하여 선택적 체인을 활성화하는 방법


14

실험적 구문 'optionalChaining'에 대한 지원이 현재 활성화되어 있지 않습니다

위의 오류가 발생했습니다. 이 게시물을 따라 내에 추가 "@babel/plugin-proposal-optional-chaining": "^7.7.4"했습니다 devDependencies.

그런 다음이 오류가 발생합니다.

변환을 활성화하려면 @ babel / plugin-proposal-optional-chaining ( https://git.io/vb4Sk )을 Babel 구성의 'plugins'섹션에 추가하십시오.

나는이 다음에 그래서 게시물 및 추가 .babelrc내 프로젝트의 루트에 파일을

{
    "presets": ["react", "es2015","stage-1"],
    "plugins": ["transform-runtime", "transform-optional-chaining"]
}

이것은 아무것도하지 않는 것 같습니다. 또한 Create React Appbabel의 구성을 수정할 수 없다는 언급을 들었습니다 . 그래서 내 질문은 전체를 다시 배선하지 않고 선택적 체인 활성화하는 방법은 CRA무엇입니까?

추신 : 나는을 사용 "typescript": "^3.7.2"하고 package.json있습니다. 나는 npm install그것이 업데이트되도록 노력 했다. CRA아래에서 이상한 일을하고 이전 버전을 사용 하는지 확실하지 않습니다 TypeScript.


편집 : 프로젝트를 시작할 때 CRA사용하고 있다고 생각 TypeScript: 3.6.x합니다. 사용 Optional Chaining하고 싶었 으므로 package.json파일을 "typescript": "^3.7.2"다음으로 변경했습니다 npm install. 문제는 TypeScript내가 사용 하고 있다는 것을 알고 3.7.2있지만 CRA여전히 오래된 구성을 가지고 있으며 어떻게 업데이트 할 수 있는지 잘 모르겠습니다.


typescript 3.7을 사용할 수 있습니다 . 선택적 체인은 이제 기본적으로 지원되는 기능입니다.
Nicolas

TypeScript를 사용하고 ^3.7.2있습니다. 아니면 적어도 저의 package.json말입니다. 나도 시도 npm install했다.
Hafiz Temuri

답변:


15

Create-React-App은 babel을 사용하여 TypeScript를 변환하므로 npm 설치 버전의 TypeScript를 사용하지 않습니다. 반응 스크립트 버전 3.3.0은 TypeScript 3.7을 지원합니다. 당신은 그것을 설치하고 사용할 수 있습니다 :

  • yarn add react-scripts@3.3.0

    -또는-

  • npm install -s react-scripts@3.3.0


감사합니다. 올바른 솔루션입니다.
Ramon Gonzalez

1
react-scripts 3.3.0TS를 사용하지 않고 옵션 체인을 사용할 수 있습니까 ?
Badrush

아니오-선택적 체인은 브라우저 나 NodeJS에서 작동하기 위해 JavaScript로 변환해야하는 TypeScript 기능입니다.
LukeP

@Badrush 옵션 체인은 TS 기능입니다. TS없이 어떻게 사용할 수 있습니까? 내가 말하는 것처럼 계란을 깨지 않고 노른자를 먹을 수 있습니까? 간단한 대답은 NO입니다! 그러나 곧 바닐라 JS에 추가하기를 바랍니다.
Hafiz Temuri

6

React 스크립트 3.3.0 이상에서 지원합니다. react-scripts @ next를 설치할 필요가 없습니다.

package.json에 넣으면 "react-scripts": "^3.3.0"작동합니다.


1
글쎄, 나는 더 이상 반응 앱 구성을하고있는 회사와 함께 일하지 않습니다. 그래서 나는 이것을 쉽게 테스트 할 수 없습니다. 그러나 알아두면 좋을 것입니다. 이것은 미래 독자들에게 도움이 될 것입니다.
Hafiz Temuri

다시 돌아 보았으므로 @LukeP가 lol
Hafiz Temuri를

@HafizTemuri luke는 자신의 답변을 업데이트했습니다. 그의 답변은 react-scripts @ next
Elisha Sterngold

2

package.json

{
  "scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test --env=jsdom"
  },
  "devDependencies": {
    "@babel/plugin-proposal-optional-chaining": "^7.2.0",
    "customize-cra": "^0.4.1",
    "react-app-rewired": "^2.1.3"
  }
  ...other
}

config-overrides.js

const { useBabelRc, override } = require('customize-cra');
module.exports = override(useBabelRc());

.babelrc

{
  "plugins": ["@babel/plugin-proposal-optional-chaining"]
}

자세한 블로그 포스트


나는 OP에서 모든 것을 다시 배선하고 싶지 않다고 언급했다. "So my question is how can I enable optional chaining without re-wiring the whole CRA?"
Hafiz Temuri

customize-cra구성을 재정의하기 위해 이미 사용하고 있다면 어떻게 사용 합니까? 예 :module.exports = function override(config) { config.resolve.modules = [path.resolve(__dirname, 'src'), 'node_modules']; return config; };
Subhendu Kundu
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.