Gatsby: [v2] 였λ₯˜: 'core-js/modules/es6.array.filter' λͺ¨λ“ˆμ„ 찾을 수 μ—†μŠ΅λ‹ˆλ‹€.

에 λ§Œλ“  2018λ…„ 09μ›” 04일  Β·  25μ½”λ©˜νŠΈ  Β·  좜처: gatsbyjs/gatsby

μ„€λͺ…

gatsby develop λŠ” μœ„μ˜ 였λ₯˜λ₯Ό λ°˜ν™˜ν•©λ‹ˆλ‹€.

μž¬ν˜„ 단계

λ‚΄ 쒅속성, λͺ¨λ“ˆ 및 νŽ˜μ΄μ§€λ₯Ό λ³΅μ‚¬ν•˜κ³  μ—¬κΈ°μ˜ κ°€μ΄λ“œλ₯Ό 따라 μ‚¬μ΄νŠΈλ₯Ό v2μ—μ„œ v2둜 μ—…κ·Έλ ˆμ΄λ“œν–ˆμŠ΅λ‹ˆλ‹€. https://next.gatsbyjs.org/docs/migrating-from-v1-to-v2/

ν™˜κ²½

  System:
    OS: macOS High Sierra 10.13.6
    CPU: x64 Intel(R) Core(TM) i7-4770HQ CPU @ 2.20GHz
    Shell: 5.3 - /bin/zsh
  Binaries:
    Node: 8.11.3 - /usr/local/bin/node
    Yarn: 1.7.0 - /usr/local/bin/yarn
    npm: 6.4.0 - /usr/local/bin/npm
  Browsers:
    Chrome: 68.0.3440.106
    Safari: 11.1.2
  npmPackages:
    gatsby: 2.0.0-rc.9 => 2.0.0-rc.9 
    gatsby-plugin-canonical-urls: ^2.0.0-rc.1 => 2.0.0-rc.1 
    gatsby-plugin-google-tagmanager: ^2.0.0-rc.1 => 2.0.0-rc.1 
    gatsby-plugin-manifest: next => 2.0.2-rc.1 
    gatsby-plugin-offline: next => 2.0.0-rc.2 
    gatsby-plugin-react-helmet: ^3.0.0-rc.1 => 3.0.0-rc.1 
    gatsby-plugin-remove-trailing-slashes: ^2.0.0-rc.1 => 2.0.0-rc.1 
    gatsby-plugin-robots-txt: ^1.3.0 => 1.3.0 
    gatsby-plugin-sitemap: ^2.0.0-rc.1 => 2.0.0-rc.1 
    gatsby-plugin-styled-components: ^3.0.0-rc.1 => 3.0.0-rc.1 
    gatsby-source-apiserver: ^1.3.1 => 1.3.1 
    gatsby-source-filesystem: ^2.0.1-rc.1 => 2.0.1-rc.1 
    gatsby-source-wordpress: ^3.0.0-rc.1 => 3.0.0-rc.1 
    gatsby-transformer-javascript-frontmatter: ^2.0.0-rc.2 => 2.0.0-rc.2 
    gatsby-transformer-json: ^2.1.1-rc.1 => 2.1.1-rc.1 
  npmGlobalPackages:
    gatsby-cli: 1.1.58

babel-preset-env μ„€μΉ˜ν•˜κ³  node_modulesλ₯Ό μ‚­μ œν•˜κ³  λ‹€μ‹œ μ„€μΉ˜ν•˜λ €κ³  ν–ˆμŠ΅λ‹ˆλ‹€.

κ°€μž₯ μœ μš©ν•œ λŒ“κΈ€

κ°μ‚¬ν•©λ‹ˆλ‹€ Pieh 예 μ‹œλ„ν–ˆμŠ΅λ‹ˆλ‹€.

μ‹€μ œλ‘œ npm install --save core-js μ‹€ν–‰ν•˜μ—¬ 이 문제λ₯Ό ν•΄κ²°ν–ˆμŠ΅λ‹ˆλ‹€.

λͺ¨λ“  25 λŒ“κΈ€

잠금 파일(yarn.lock/package-lock.json)κ³Ό node_modulesλ₯Ό μ‚­μ œν•˜κ³  λ‹€μ‹œ μ„€μΉ˜ν•΄ λ³Ό 수 μžˆλ‚˜μš”?

κ°μ‚¬ν•©λ‹ˆλ‹€ Pieh 예 μ‹œλ„ν–ˆμŠ΅λ‹ˆλ‹€.

μ‹€μ œλ‘œ npm install --save core-js μ‹€ν–‰ν•˜μ—¬ 이 문제λ₯Ό ν•΄κ²°ν–ˆμŠ΅λ‹ˆλ‹€.

μ—„μ²­λ‚œ!

μ—¬μ „νžˆ 전체 였λ₯˜ 좜λ ₯이 μžˆμŠ΅λ‹ˆκΉŒ(μŠ€νƒ 좔적 포함)? 이것이 gatsby 관련이고 μ„Έ 번째 파트 νŒ¨ν‚€μ§€ 쀑 ν•˜λ‚˜μ— λ¬Έμ œκ°€ μ—†λ‹€λ©΄ μˆ˜μ •ν•˜λŠ” 것이 쒋을 κ²ƒμž…λ‹ˆλ‹€.

Pieh λ‚˜λŠ” 같은 λ¬Έμ œκ°€ μžˆμ—ˆκ³  7.0.0 베타 λ²„μ „μ—μ„œ core-js 쒅속성을 μ œκ±°ν•œ babel둜 μ •ν™•νžˆ μ§€μ ν•œ ν›„ μ΅œμ’… 버전에 λ‹€μ‹œ κ²Œμ‹œν–ˆμŠ΅λ‹ˆλ‹€.

@kmorf 잘 μ°Ύμ•˜μŠ΅λ‹ˆλ‹€! λ‚˜λ„ 같은 λ¬Έμ œκ°€μžˆλ‹€.

Pieh λ‚˜λŠ” 같은 λ¬Έμ œκ°€ μžˆμ—ˆκ³  7.0.0 베타 λ²„μ „μ—μ„œ core-js 쒅속성을 μ œκ±°ν•œ babel둜 μ •ν™•νžˆ μ§€μ ν•œ ν›„ μ΅œμ’… 버전에 λ‹€μ‹œ κ²Œμ‹œν–ˆμŠ΅λ‹ˆλ‹€.

λ§žμ•„, 이건 gatsby κ³ μΉ  수 μžˆλŠ” κ±° μ•„λ‹ˆμ•Ό?

λ˜ν•œμ΄ 였λ₯˜λŠ” λ…Έλ“œ λ˜λŠ” λΈŒλΌμš°μ €μ—μ„œ λ°œμƒν•©λ‹ˆκΉŒ? 이것이 μ‹€μ œλ‘œ μ—¬κΈ°μ—μ„œ λ¬Έμ œκ°€ λ˜μ–΄μ•Ό ν•˜λŠ” 것인지 λ˜λŠ” μš°λ¦¬κ°€ μ œμ–΄ν•  수 μ—†λŠ” μ—…μŠ€νŠΈλ¦Όμ—μ„œ λ°œμƒν•œ 것인지 μ•ŒκΈ° μœ„ν•΄ 여기에 더 λ§Žμ€ 정보가 ν™•μ‹€νžˆ ν•„μš”ν•©λ‹ˆλ‹€./

gatsby μ—μ„œ 이 문제λ₯Ό ν•΄κ²°ν•˜λ €κ³  ν•΄μ„œλŠ” μ•ˆ λœλ‹€κ³  μƒκ°ν•©λ‹ˆλ‹€. 이 일이 λ°œμƒν–ˆμ„ λ•Œ λ§Žμ€ λ‹€λ₯Έ React ν”„λ‘œμ νŠΈκ°€ μ‹€νŒ¨ν•˜μ—¬ μ‚¬μš©μžκ°€ devDependencies에 core-js λ₯Ό μΆ”κ°€ν–ˆμŠ΅λ‹ˆλ‹€. babel 7.0.0 κ°€ μΆœμ‹œλœ μ΄ν›„λ‘œ 이 λ¬Έμ œκ°€ λ°œμƒν•˜μ§€ μ•Šμ•˜μŠ΅λ‹ˆλ‹€.

일단 이것을 λ‹«μž (λ‹€μ‹œ :))

λ‚˜λŠ” μ§€κΈˆ λ¬Έμ œμ— λ‹€μ‹œ λΆ€λ”ͺμΉœλ‹€. λ‚΄ gatsby-node.js 에 컀밋을 μ²¨λΆ€ν•˜κ³  μžˆμŠ΅λ‹ˆλ‹€. λ‚˜λŠ” λ‚΄κ°€ μ‚¬μš© λ•Œ 였λ₯˜λ₯Ό 찾은 것 κ°™μ•„ _.each λŒ€μ‹  .forEach .

screen shot 2018-09-05 at 6 42 24 pm

저도 이 문제의 영ν–₯을 λ°›μ•˜κ³  @babel/polyfill νŒ¨ν‚€μ§€μ— λŒ€ν•œ Babel 7 λ³€κ²½ μ‚¬ν•­μœΌλ‘œ λ‹€μ‹œ μ΄μ–΄μ§ˆ 수 μžˆλ‹€κ³  μƒκ°ν•©λ‹ˆλ‹€. λ˜ν•œ ν˜„μž¬ 뢄석에 λŒ€ν•œ μžμ„Έν•œ μ„€λͺ…은 mdx-js/mdx#271을 μ°Έμ‘°ν•˜μ‹­μ‹œμ˜€. ν˜„μž¬ 이 문제λ₯Ό ν•΄κ²°ν•  수 μžˆλŠ” μœ μΌν•œ ν•΄κ²° 방법은 μœ„μ— 링크된 λ§ˆμ΄κ·Έλ ˆμ΄μ…˜ κ°€μ΄λ“œμ— μ„€λͺ…λœ λŒ€λ‘œ 이제 core-js v2 νŒ¨ν‚€μ§€μ˜ ν”„λ‘μ‹œμ— λΆˆκ³Όν•œ @babel/polyfill λ₯Ό dev μ’…μ†μ„±μœΌλ‘œ μΆ”κ°€ν•˜λŠ” κ²ƒμž…λ‹ˆλ‹€. .

저도 이 문제λ₯Ό 보고 있으며 졜근 Babel의 λ³€κ²½μœΌλ‘œ 인해 λΉŒλ“œκ°€ μ€‘λ‹¨λ˜μ—ˆμŒμ„ 확인할 수 μžˆμŠ΅λ‹ˆλ‹€. 이제 Gatsbyμ—μ„œ 이 문제λ₯Ό ν•΄κ²°ν•  수 μžˆλŠ” 방법을 μ‘°μ‚¬ν•˜κ³  μžˆμŠ΅λ‹ˆλ‹€. ( core-js λ₯Ό devDependencies 해도 λ‚΄κ°€ μ•Œ 수 μžˆλŠ” λΉŒλ“œμ—λŠ” 아무 νš¨κ³Όκ°€ μ—†μ—ˆμŠ΅λ‹ˆλ‹€.)

@secretfader @babel/polyfill λ₯Ό devDependencies 에 μΆ”κ°€ν•˜λ©΄ ν•„μš”ν•œ core-js 폴리필이 μžλ™μœΌλ‘œ λ‘œλ“œλ©λ‹ˆλ‹€. node_modules 폴더와 package-lock.json νŒŒμΌμ„ μ‚­μ œν•˜κ³  npm install λ₯Ό μ‹€ν–‰ν•˜μ—¬ κΉ”λ”ν•˜κ²Œ ν•΄κ²°λœ 쒅속성 트리둜 μ‹œμž‘ν•˜μ‹­μ‹œμ˜€.

문제λ₯Ό μž¬ν˜„ν•  수 μžˆμŠ΅λ‹ˆλ‹€. 볡제 μ €μž₯μ†Œλ₯Ό μ°Ύκ³  μžˆλ‹€λ©΄ https://github.com/mui-org/material-ui/blob/master/examples/gatsby/README.md κ°€ μ’‹μŠ΅λ‹ˆλ‹€.

@secretfader @babel/polyfill λ₯Ό devDependencies 에 μΆ”κ°€ν•˜λ©΄ ν•„μš”ν•œ core-js 폴리필이 μžλ™μœΌλ‘œ λ‘œλ“œλ©λ‹ˆλ‹€. node_modules 폴더와 package-lock.json νŒŒμΌμ„ μ‚­μ œν•˜κ³  npm install λ₯Ό μ‹€ν–‰ν•˜μ—¬ κΉ”λ”ν•˜κ²Œ ν•΄κ²°λœ 쒅속성 트리둜 μ‹œμž‘ν•˜μ‹­μ‹œμ˜€.

"@babel/polyfill": "^7.0.0", ν•˜κ³  ν•΄λ‹Ή 지침을 λ”°λ₯΄λŠ” 것은 νš¨κ³Όκ°€ μ—†μ—ˆμŠ΅λ‹ˆλ‹€.
core-jsλ₯Ό μΆ”κ°€ν•˜λ©΄ npm install --save core-js .

@ben-rogerson package-lock.json μ œκ±°ν•œ ν›„ 였λ₯˜κ°€ λ‹€μ‹œ λ°œμƒν–ˆκΈ° λ•Œλ¬Έμ— λ‚΄ μ˜κ²¬μ„ μ—…λ°μ΄νŠΈν–ˆμ–΄μ•Ό ν–ˆμŠ΅λ‹ˆλ‹€. 쒅속성이 μ˜¬λ°”λ₯΄κ²Œ ν•΄κ²°λ˜μ§€ μ•Šμ€ κ²ƒμ²˜λŸΌ λ³΄μ΄μ§€λ§Œ μ•„μ΄λŸ¬λ‹ˆν•˜κ²Œλ„ κ·Έλ ‡κ²Œ ν•œ ν›„μ—λŠ” μž‘λ™ν–ˆμŠ΅λ‹ˆλ‹€. λ•Œλ•Œλ‘œ npm λŠ” λ¬΄μ§€κ°œ μœ λ‹ˆμ½˜μ˜ λ―ΈμŠ€ν„°λ¦¬μž…λ‹ˆλ‹€ :roll_eyes: λ˜ν•œ mdx-js/mdx#271μ—μ„œ λ©”μΈν…Œμ΄λ„ˆλŠ” npm μ—μ„œ μž‘λ™ν•˜μ§€ μ•ŠλŠ”λ‹€κ³  κ²Œμ‹œν–ˆμ§€λ§Œ yarn λͺ¨λ“  것이 잘 μ‹€ν–‰λ©λ‹ˆλ‹€.

core-js λ˜λŠ” @babel/polyfill λ₯Ό μ’…μ†μ„±μœΌλ‘œ μΆ”κ°€ν•  λ•Œ κ²°κ³Όλ₯Ό 가지고 λ†€μ§€λ§Œ core-js κ°€ 이미 gatsby 톡해 ν•΄κ²°λ˜μ—ˆμœΌλ―€λ‘œ λ‚˜μ€‘μ— μž‘λ™ν•˜λŠ” μ΄μœ κ°€ κΆκΈˆν•©λ‹ˆλ‹€. devDependencies μ†”λ£¨μ…˜ 간에 차이가 μ—†μŠ΅λ‹ˆλ‹€.

참고둜, μ΅œκ·Όμ— Gatsby μ‚¬μ΄νŠΈ 쀑 ν•˜λ‚˜μ—μ„œ Yarnμ—μ„œ NPM으둜 μ „ν™˜ν–ˆλŠ”λ° 이 λ¬Έμ œκ°€ λ°œμƒν–ˆμŠ΅λ‹ˆλ‹€.

@arcticicestudioκ°€ λ§ν–ˆλ“―μ΄ gatsby core-js λ₯Ό μ’…μ†μ„±μœΌλ‘œ λ‚˜μ—΄ν•œλ‹€λŠ” μ μ—μ„œ 특히 이상해 λ³΄μž…λ‹ˆλ‹€.

μΆ”κ°€ 정보: .cache, node_modules 및 package-lock.json을 μ •λ¦¬ν•˜κ³  npm을 톡해 λͺ¨λ“ˆμ„ λ‹€μ‹œ μ„€μΉ˜ν•œ ν›„
WebpackError: Cannot find module 'core-js/modules/es6.array.sort'
core-jsλ₯Ό μ„€μΉ˜ν•˜λ©΄ λ¬Έμ œκ°€ 직접 ν•΄κ²°λ©λ‹ˆλ‹€.

원사 μΆ”κ°€ core-js
μ—¬μ „νžˆ node_modulesλ₯Ό μ‚­μ œν•  수 μ—†μœΌλ©΄ yarn을 μ‚¬μš©ν•˜μ—¬ μ„€μΉ˜ν•˜κ³  cnpm을 μ‚¬μš©ν•˜μ—¬ μ„€μΉ˜ν•˜μ§€ λ§ˆμ‹­μ‹œμ˜€.

λ‚˜λŠ” λ˜ν•œμ΄ λ¬Έμ œμ— 직면 ν•΄μžˆλ‹€.

μ›λž˜ μ €λŠ” Storybook 버전 5.1.0-alpha.X μžˆμ—ˆμŠ΅λ‹ˆλ‹€. yarn why core-js μ‹€ν–‰ν•˜λ©΄ core-js ( core-js 호이슀트된 버전)의 지배적인 버전은 2.6.5 μž…λ‹ˆλ‹€.

λ™ν™”λ‘œ μ—…λ°μ΄νŠΈ ν•œ ν›„ 5.1.0-beta.0 였늘의 κ²Œμ–‘ 버전 core-js λ˜μ—ˆλ‹€ 3.0.1 , 그리고 κ°œμΈ λΉ„ λΉŒλ“œλ₯Ό λΆ€λŸ¬ λͺ‡ 가지 μ΄μœ μ— λŒ€ν•΄.

Gatsbyκ°€ μ’…μ†μ„±μ—μ„œ core-js 의 μ‹€μ œ 버전을 ν™•μΈν•˜μ§€ μ•ŠλŠ” μ΄μœ λŠ” λ¬΄μ—‡μž…λ‹ˆκΉŒ?

core-js λ₯Ό devDependencies 직접 μΆ”κ°€ν•˜λŠ” ν•΄κ²° 방법을 μ‹œλ„ν–ˆμ§€λ§Œ λ¬Έμ œκ°€ ν•΄κ²°λ˜μ§€ μ•Šμ•˜μŠ΅λ‹ˆλ‹€.

λ‚˜λŠ” 같은 λ¬Έμ œκ°€ μžˆμ—ˆλ‹€.

λ‚΄ core-js 버전을 2.6.5 (개발 쒅속성)으둜 λ‹€μš΄κ·Έλ ˆμ΄λ“œν•˜λ©΄ λ¬Έμ œκ°€ ν•΄κ²°λ˜μ—ˆμŠ΅λ‹ˆλ‹€.

npm install --save core-js λŠ” 더 이상 μž‘λ™ν•˜μ§€ μ•ŠμŠ΅λ‹ˆλ‹€.

λŒ€μ‹  npm install --save --dev [email protected] μ‚¬μš©ν•˜μ‹­μ‹œμ˜€.

κ·ΈλŸ¬λ‚˜ μ „μ—­μ μœΌλ‘œ μ €μž₯ν•˜μ§€ μ•Šλ„λ‘ ν”„λ‘œμ νŠΈ λ””λ ‰ν† λ¦¬μ—μ„œ npm install --dev [email protected] λ₯Ό μ‹€ν–‰ν•˜μ‹­μ‹œμ˜€.

이전이 μž‘λ™ν•˜μ§€ μ•ŠμœΌλ©΄ λ‹€μŒμ„ μ‚¬μš©ν•˜μ‹­μ‹œμ˜€.

npm install --save [email protected] -g

이것은 μž‘λ™ν•˜μ§€λ§Œ ν•˜μ§€ λ§ˆμ‹­μ‹œμ˜€.

이 문제의 원인은 μ²˜μŒμ— yarn μ‹œμž‘λœ ν”„λ‘œμ νŠΈλ₯Ό μ—…λ°μ΄νŠΈν•˜κ³  μž‘μ—…ν•˜κΈ° μœ„ν•΄ npm λ₯Ό μ‚¬μš©ν–ˆκΈ° λ•Œλ¬Έμ΄λΌκ³  κ°€μ •ν•©λ‹ˆλ‹€. λ”°λΌμ„œ 엉망. arcticicestudioκ°€ μ§€μ ν•œ κ²ƒμ²˜λŸΌ.*

이전이 μž‘λ™ν•˜μ§€ μ•ŠμœΌλ©΄ λ‹€μŒμ„ μ‚¬μš©ν•˜μ‹­μ‹œμ˜€.

npm install --save [email protected] -g

κ·ΈλŸ¬ν•œ νŒ¨ν‚€μ§€λ₯Ό μ „μ—­μ μœΌλ‘œ μ„€μΉ˜ν•˜λŠ” 것은 정말 λ‚˜μœ 생각이며 κ·Έλ ‡κ²Œ ν•  μ΄μœ κ°€ μ—†μŠ΅λ‹ˆλ‹€. 둜컬둜 μ„€μΉ˜ν•  λ•Œ(κ³ μ •λœ 버전 μ‚¬μš©) λ¬Έμ œκ°€ μžˆλŠ” 경우 ν˜„μž¬ μΆ©λŒμ„ μΌμœΌν‚€λŠ” λ‹€λ₯Έ νŒ¨ν‚€μ§€λ₯Ό 이미 μ „μ—­μ μœΌλ‘œ μ„€μΉ˜ν–ˆκΈ° λ•Œλ¬ΈμΌ 수 μžˆμŠ΅λ‹ˆλ‹€.
이 ν‹°μΌ“μ˜ κ°€μž₯ 큰 λ¬Έμ œλŠ” npm μž…λ‹ˆλ‹€. 쒅속성 트리λ₯Ό μ˜¬λ°”λ₯΄κ²Œ ν•΄κ²°ν•˜μ§€ λͺ»ν•˜λŠ” 것 κ°™μŠ΅λ‹ˆλ‹€. μž‘λ…„μ— yarn 둜 μ „ν™˜ν–ˆμœΌλ©°(주둜 _workspaces_ λ•Œλ¬Έμ—) λ‹€μ‹œλŠ” λ¬Έμ œκ°€ λ°œμƒν•˜μ§€ μ•Šμ•˜μŠ΅λ‹ˆλ‹€. _npm_ μ‚¬μš©μžλŠ” 버전을 κ³ μ •ν•˜μ—¬ ν•΄κ²° 방법을 μ‚¬μš©ν•΄μ•Ό ν•˜λ©° _npm Roadmap Summer 2019_ λΈ”λ‘œκ·Έ κ²Œμ‹œλ¬Όμ—μ„œ λ°œν‘œλœ _npm_ 8(μƒˆλ‘œμš΄ tink 라이브러리둜 ꡬ동됨)이 μ΄λŸ¬ν•œ 문제λ₯Ό μˆ˜μ •ν•˜κΈ°λ₯Ό λ°”λžλ‹ˆλ‹€(λ˜λŠ” yarn _Gatsby_ 기반 ν”„λ‘œμ νŠΈμ˜ 경우

κ°μ‚¬ν•©λ‹ˆλ‹€ Pieh 예 μ‹œλ„ν–ˆμŠ΅λ‹ˆλ‹€.

μ‹€μ œλ‘œ npm install --save core-js μ‹€ν–‰ν•˜μ—¬ 이 문제λ₯Ό ν•΄κ²°ν–ˆμŠ΅λ‹ˆλ‹€.

이 덕뢄에 μž‘λ™ν–ˆμŠ΅λ‹ˆλ‹€!

이 νŽ˜μ΄μ§€κ°€ 도움이 λ˜μ—ˆλ‚˜μš”?
0 / 5 - 0 λ“±κΈ‰