본문 바로가기
FRONTEND/React

오류! yarn update(upgrade)

by 드로니뚜벅이 2024. 1. 3.

yarn을 설치하고 프로젝트를 생성하면 이런저런 warning이 출력됩니다.

yarn create react-app <project-name>
$ yarn create react-app test-app
yarn create v1.22.21
[1/4] Resolving packages...
[2/4] Fetching packages...
[3/4] Linking dependencies...
[4/4] Building fresh packages...

success Installed "create-react-app@5.0.1" with binaries:
      - create-react-app
[####################################################################] 68/68
Creating a new React app in /home/yunix/work/programming/react/test-app.

Installing packages. This might take a couple of minutes.
Installing react, react-dom, and react-scripts with cra-template...

yarn add v1.22.21
info No lockfile found.
[1/4] Resolving packages...
warning react-scripts > workbox-webpack-plugin@6.6.1: this package has been deprecated
warning react-scripts > babel-preset-react-app > @babel/plugin-proposal-class-properties@7.18.6: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-class-properties instead.
warning react-scripts > babel-preset-react-app > @babel/plugin-proposal-nullish-coalescing-operator@7.18.6: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-nullish-coalescing-operator instead.
warning react-scripts > babel-preset-react-app > @babel/plugin-proposal-numeric-separator@7.18.6: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-numeric-separator instead.
...
yarn remove v1.22.21
[1/2] Removing module cra-template...
[2/2] Regenerating lockfile and installing missing dependencies...
warning " > @testing-library/user-event@13.5.0" has unmet peer dependency "@testing-library/dom@>=7.21.4".
warning "react-scripts > eslint-config-react-app > eslint-plugin-flowtype@8.0.3" has unmet peer dependency "@babel/plugin-syntax-flow@^7.14.5".
warning "react-scripts > eslint-config-react-app > eslint-plugin-flowtype@8.0.3" has unmet peer dependency "@babel/plugin-transform-react-jsx@^7.14.9".
warning "react-scripts > react-dev-utils > fork-ts-checker-webpack-plugin@6.5.3" has unmet peer dependency "typescript@>= 2.7".
warning "react-scripts > eslint-config-react-app > @typescript-eslint/eslint-plugin > tsutils@3.21.0" has unmet peer dependency "typescript@>=2.8.0 || >= 3.2.0-dev || >= 3.3.0-dev || >= 3.4.0-dev || >= 3.5.0-dev || >= 3.6.0-dev || >= 3.6.0-beta || >= 3.7.0-dev || >= 3.7.0-beta".
success Uninstalled packages.
Done in 4.01s.

Created git commit.

Success! Created hooks-tutorial at /home/yunny/work/programming/react/hooks-tutorial
Inside that directory, you can run several commands:

  yarn start
    Starts the development server.

  yarn build
    Bundles the app into static files for production.

  yarn test
    Starts the test runner.

  yarn eject
    Removes this tool and copies build dependencies, configuration files
    and scripts into the app directory. If you do this, you can’t go back!

We suggest that you begin by typing:

  cd hooks-tutorial
  yarn start

Happy hacking!
Done in 39.32s.
$

 

설치된 버전을 보니 1.xx.xx이네요. 최신 버전이 4.xx버전인 걸로 아는데...

업그레이드를 하려고 했더니 플랫폼마다 좀 다른건지는 잘 모르겠지만 동작이 다릅니다.

그래서 저는 아래와 같은 방법으로 처리했습니다.

corepack prepare yarn@stable --activate
$ yarn -v
1.22.21
$
$ corepack prepare yarn@stable --activate
Preparing yarn@stable for immediate activation...
$
$ yarn -v
4.0.2
❯ yarn create react-app hooks-tutorial
➤ YN0000: · Yarn 4.0.2
➤ YN0000: ┌ Resolution step
➤ YN0085: │ + create-react-app@npm:5.0.1, ansi-styles@npm:4.3.0, and 65 more.
➤ YN0000: └ Completed in 2s 752ms
➤ YN0000: ┌ Fetch step
➤ YN0013: │ 67 packages were added to the project (+ 3.02 MiB).
➤ YN0000: └ Completed in 0s 564ms
➤ YN0000: ┌ Link step
➤ YN0000: └ Completed
➤ YN0000: · Done in 3s 368ms


Creating a new React app in /home/yunix/work/programming/react/test-app.

Installing packages. This might take a couple of minutes.
Installing react, react-dom, and react-scripts with cra-template...

➤ YN0000: · Yarn 4.0.2
➤ YN0000: ┌ Resolution step
➤ YN0085: │ + cra-template@npm:1.2.0, react-dom@npm:18.2.0, and 1272 more.
➤ YN0000: └ Completed in 6s 773ms
➤ YN0000: ┌ Fetch step
➤ YN0013: │ 2 packages were added to the project (+ 46.54 KiB).
➤ YN0000: └ Completed in 0s 481ms
➤ YN0000: ┌ Link step
➤ YN0000: │ ESM support for PnP uses the experimental loader API and is therefore experimental
➤ YN0007: │ core-js@npm:3.35.0 must be built because it never has been before or the last one failed
➤ YN0007: │ core-js-pure@npm:3.35.0 must be built because it never has been before or the last one failed
➤ YN0000: └ Completed in 1s 613ms
➤ YN0000: · Done with warnings in 9s 21ms

Initialized a git repository.

Installing template dependencies using yarnpkg...
➤ YN0000: · Yarn 4.0.2
➤ YN0000: ┌ Resolution step
➤ YN0085: │ + @testing-library/jest-dom@npm:5.17.0, and 38 more.
➤ YN0000: └ Completed in 2s 920ms
➤ YN0000: ┌ Post-resolution validation
➤ YN0002: │ hooks-tutorial@workspace:. doesn't provide @testing-library/dom (pcf123), requested by @testing-library/user-event.
➤ YN0086: │ Some peer dependencies are incorrectly met; run yarn explain peer-requirements <hash> for details, where <hash> is the six-letter p-prefixed code.
➤ YN0000: └ Completed
➤ YN0000: ┌ Fetch step
➤ YN0000: └ Completed in 0s 486ms
➤ YN0000: ┌ Link step
➤ YN0000: │ ESM support for PnP uses the experimental loader API and is therefore experimental
➤ YN0000: └ Completed
➤ YN0000: · Done with warnings in 3s 673ms
Removing template package using yarnpkg...

➤ YN0000: · Yarn 4.0.2
➤ YN0000: ┌ Resolution step
➤ YN0085: │ - cra-template@npm:1.2.0
➤ YN0000: └ Completed
➤ YN0000: ┌ Post-resolution validation
➤ YN0002: │ hooks-tutorial@workspace:. doesn't provide @testing-library/dom (pcf123), requested by @testing-library/user-event.
➤ YN0086: │ Some peer dependencies are incorrectly met; run yarn explain peer-requirements <hash> for details, where <hash> is the six-letter p-prefixed code.
➤ YN0000: └ Completed
➤ YN0000: ┌ Fetch step
➤ YN0000: └ Completed in 0s 442ms
➤ YN0000: ┌ Link step
➤ YN0000: │ ESM support for PnP uses the experimental loader API and is therefore experimental
➤ YN0000: └ Completed
➤ YN0000: · Done with warnings in 0s 784ms

Created git commit.

Success! Created hooks-tutorial at /home/yunix/work/programming/react/test-app
Inside that directory, you can run several commands:

  yarn start
    Starts the development server.

  yarn build
    Bundles the app into static files for production.

  yarn test
    Starts the test runner.

  yarn eject
    Removes this tool and copies build dependencies, configuration files
    and scripts into the app directory. If you do this, you can’t go back!

We suggest that you begin by typing:

  cd hooks-tutorial
  yarn start

Happy hacking!