はじめに
自身のメモとして、バージョンを指定してCreate React Appを実行する方法を記載します．create-react-appを利用することで、Reactの開発環境を構築することが出来ます．何かしらの理由で、create-react-appのバージョンを指定したいときのためにメモします．
まとめ
-
create-react-appはバージョン指定で実行出来る -
create-react-app@4.0.3とcreate-react-app@3.3.1で作成されるpackage.jsonは同じ．
事前確認
node, yarn, npxのインストールされているバージョンを確認します．
$ node -v
v16.3.0
$ yarn -v
1.22.10
$ npx -v
7.15.1
$ npx create-react-app --version
4.0.3
利用可能なバージョンの確認
利用可能なバージョンを確認します．
$ npm info create-react-app versions
[
'0.0.0', '0.1.0', '0.2.0-alpha.1',
'0.2.0', '0.3.0', '0.4.2-alpha.8f28c56e',
'0.4.2', '0.5.0', '0.6.0-alpha.9c45b252',
'0.6.0-alpha.e756d73a', '0.6.0', '0.7.0',
'1.0.0', '1.0.1', '1.0.2',
'1.0.3', '1.0.4', '1.1.0',
'1.2.0', '1.2.1', '1.3.0-alpha.58689133',
'1.3.0-alpha.02968ecd', '1.3.0-alpha.0d0536f9', '1.3.0-alpha.134d2297',
'1.3.0-alpha.55afd862', '1.3.0-alpha.c82c4f05', '1.3.0-alpha.dadf93b2',
'1.3.0-alpha.e280254d', '1.3.0', '1.3.1-alpha.60ae2b6d',
'1.3.1', '1.3.2', '1.3.3',
'1.4.0', '1.4.1', '1.4.2',
'1.4.3', '1.5.0', '1.5.1',
'1.5.2', '2.0.0-next.03604a46', '2.0.0-next.096703ab',
'2.0.0-next.2150693d', '2.0.0-next.3e165448', '2.0.0-next.47d2d941',
'2.0.0-next.66cc7a90', '2.0.0-next.9754a231', '2.0.0-next.a671462c',
'2.0.0-next.b2fd8db8', '2.0.0-next.fb6e6f70', '2.0.0',
'2.0.1', '2.0.2', '2.0.3',
'2.0.4', '2.0.5-next.9b4009d7', '2.0.5-next.c662dfb0',
'2.1.0', '2.1.1', '2.1.2',
'2.1.3-next.6a95aae9', '2.1.3', '2.1.4',
'2.1.5', '2.1.6', '2.1.7',
'2.1.8', '3.0.0-next.68', '3.0.0-next.b0cbf2ca',
'3.0.0', '3.0.1', '3.1.0',
'3.1.1', '3.1.2', '3.2.0',
'3.3.0-next.38', '3.3.0-next.39', '3.3.0-next.62',
'3.3.0-next.80', '3.3.0', '3.3.1',
'3.4.0', '3.4.1', '4.0.0-next.64',
'4.0.0-next.77', '4.0.0-next.96', '4.0.0-next.98',
'4.0.0-next.116', '4.0.0-next.117', '4.0.0',
'4.0.1', '4.0.2', '4.0.3'
]
バージョンを指定したプロジェクト作成
4.0.3
バージョン4.0.3を指定してプロジェクトを作成．
$ npx create-react-app@4.0.3 --version
4.0.3
$ npx create-react-app@4.0.3 sample-4.0.3 --template typescript
Creating a new React app in /Users/hayato94087/sample-4.0.3.
Installing packages. This might take a couple of minutes.
Installing react, react-dom, and react-scripts with cra-template-typescript...
yarn add v1.22.10
[1/4] 🔍 Resolving packages...
[2/4] 🚚 Fetching packages...
[3/4] 🔗 Linking dependencies...
warning "react-scripts > @typescript-eslint/eslint-plugin > tsutils@3.20.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".
[4/4] 🔨 Building fresh packages...
success Saved lockfile.
success Saved 7 new dependencies.
info Direct dependencies
├─ cra-template-typescript@1.1.2
├─ react-dom@17.0.2
├─ react-scripts@4.0.3
└─ react@17.0.2
info All dependencies
├─ cra-template-typescript@1.1.2
├─ immer@8.0.1
├─ react-dev-utils@11.0.4
├─ react-dom@17.0.2
├─ react-scripts@4.0.3
├─ react@17.0.2
└─ scheduler@0.20.2
✨ Done in 17.09s.
Initialized a git repository.
Installing template dependencies using yarnpkg...
yarn add v1.22.10
[1/4] 🔍 Resolving packages...
[2/4] 🚚 Fetching packages...
[3/4] 🔗 Linking dependencies...
warning " > @testing-library/user-event@12.8.3" has unmet peer dependency "@testing-library/dom@>=7.21.4".
[4/4] 🔨 Building fresh packages...
success Saved lockfile.
success Saved 23 new dependencies.
info Direct dependencies
├─ @testing-library/jest-dom@5.14.1
├─ @testing-library/react@11.2.7
├─ @testing-library/user-event@12.8.3
├─ @types/jest@26.0.23
├─ @types/node@12.20.15
├─ @types/react-dom@17.0.7
├─ @types/react@17.0.11
├─ react-dom@17.0.2
├─ react@17.0.2
├─ typescript@4.3.3
└─ web-vitals@1.1.2
info All dependencies
├─ @testing-library/dom@7.31.2
├─ @testing-library/jest-dom@5.14.1
├─ @testing-library/react@11.2.7
├─ @testing-library/user-event@12.8.3
├─ @types/aria-query@4.2.1
├─ @types/jest@26.0.23
├─ @types/node@12.20.15
├─ @types/prop-types@15.7.3
├─ @types/react-dom@17.0.7
├─ @types/react@17.0.11
├─ @types/scheduler@0.16.1
├─ @types/testing-library__jest-dom@5.14.0
├─ css.escape@1.5.1
├─ css@3.0.0
├─ csstype@3.0.8
├─ lz-string@1.4.4
├─ min-indent@1.0.1
├─ react-dom@17.0.2
├─ react@17.0.2
├─ redent@3.0.0
├─ strip-indent@3.0.0
├─ typescript@4.3.3
└─ web-vitals@1.1.2
✨ Done in 7.64s.
We detected TypeScript in your project (src/App.test.tsx) and created a tsconfig.json file for you.
Your tsconfig.json has been populated with default values.
Removing template package using yarnpkg...
yarn remove v1.22.10
[1/2] 🗑 Removing module cra-template-typescript...
[2/2] 🔨 Regenerating lockfile and installing missing dependencies...
warning " > @testing-library/user-event@12.8.3" has unmet peer dependency "@testing-library/dom@>=7.21.4".
success Uninstalled packages.
✨ Done in 10.13s.
Created git commit.
Success! Created sample-4.0.3 at /Users/hayato94087/sample-4.0.3
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 sample-4.0.3
yarn start
Happy hacking!
package.jsonの中身は下記です．
{
"name": "sample-4.0.3",
"version": "0.1.0",
"private": true,
"dependencies": {
"@testing-library/jest-dom": "^5.11.4",
"@testing-library/react": "^11.1.0",
"@testing-library/user-event": "^12.1.10",
"@types/jest": "^26.0.15",
"@types/node": "^12.0.0",
"@types/react": "^17.0.0",
"@types/react-dom": "^17.0.0",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-scripts": "4.0.3",
"typescript": "^4.1.2",
"web-vitals": "^1.0.1"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
3.3.1
試しに3.3.1のバージョンを指定してプロジェクトを作成してみる．この3.3.1では--template typescriptは認識しないので、 --template cra-template-typescriptを利用する．create-react-appのバージョンが異なるため、出力されるログは異なります．
$ npx create-react-app@3.3.1 --version
3.3.1
$ npx create-react-app@3.3.1 sample-3.3.1 --template cra-template-typescript
Creating a new React app in /Users/hayato94087/sample-3.3.1.
Installing packages. This might take a couple of minutes.
Installing react, react-dom, and react-scripts with cra-template-typescript...
yarn add v1.22.10
[1/4] 🔍 Resolving packages...
warning react-scripts > babel-eslint@10.1.0: babel-eslint is now @babel/eslint-parser. This package will no longer receive updates.
warning react-scripts > webpack-dev-server > sockjs > uuid@3.4.0: Please upgrade to version 7 or higher. Older versions may use Math.random() in certain circumstances, which is known to be problematic. See https://v8.dev/blog/math-random for details.
warning react-scripts > workbox-webpack-plugin > workbox-build > @hapi/joi@15.1.1: Switch to 'npm install joi'
warning react-scripts > workbox-webpack-plugin > workbox-build > rollup-plugin-babel@4.4.0: This package has been deprecated and is no longer maintained. Please use @rollup/plugin-babel.
[2/4] 🚚 Fetching packages...
[3/4] 🔗 Linking dependencies...
warning "react-scripts > @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".
warning "react-scripts > eslint-plugin-testing-library > @typescript-eslint/experimental-utils > @typescript-eslint/typescript-estree > tsutils@3.17.1" 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".
[4/4] 🔨 Building fresh packages...
success Saved lockfile.
success Saved 387 new dependencies.
info Direct dependencies
├─ cra-template-typescript@1.1.2
├─ react-dom@17.0.2
├─ react-scripts@4.0.3
└─ react@17.0.2
info All dependencies
├─ @babel/compat-data@7.14.5
├─ @babel/core@7.14.6
├─ @babel/helper-builder-binary-assignment-operator-visitor@7.14.5
├─ @babel/helper-compilation-targets@7.14.5
├─ @babel/helper-create-class-features-plugin@7.14.6
├─ @babel/helper-explode-assignable-expression@7.14.5
├─ @babel/helper-get-function-arity@7.14.5
├─ @babel/helper-module-imports@7.14.5
├─ @babel/helper-wrap-function@7.14.5
├─ @babel/helpers@7.14.6
├─ @babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining@7.14.5
├─ @babel/plugin-proposal-async-generator-functions@7.14.5
├─ @babel/plugin-proposal-class-properties@7.14.5
├─ @babel/plugin-proposal-class-static-block@7.14.5
├─ @babel/plugin-proposal-dynamic-import@7.14.5
├─ @babel/plugin-proposal-export-namespace-from@7.14.5
├─ @babel/plugin-proposal-json-strings@7.14.5
├─ @babel/plugin-proposal-logical-assignment-operators@7.14.5
├─ @babel/plugin-proposal-nullish-coalescing-operator@7.14.5
├─ @babel/plugin-proposal-numeric-separator@7.14.5
├─ @babel/plugin-proposal-object-rest-spread@7.14.5
├─ @babel/plugin-proposal-optional-catch-binding@7.14.5
├─ @babel/plugin-proposal-private-methods@7.14.5
├─ @babel/plugin-proposal-private-property-in-object@7.14.5
├─ @babel/plugin-proposal-unicode-property-regex@7.14.5
├─ @babel/plugin-syntax-class-properties@7.12.13
├─ @babel/plugin-syntax-jsx@7.14.5
├─ @babel/plugin-syntax-logical-assignment-operators@7.10.4
├─ @babel/plugin-syntax-numeric-separator@7.10.4
├─ @babel/plugin-syntax-top-level-await@7.14.5
├─ @babel/plugin-transform-arrow-functions@7.14.5
├─ @babel/plugin-transform-async-to-generator@7.14.5
├─ @babel/plugin-transform-block-scoped-functions@7.14.5
├─ @babel/plugin-transform-block-scoping@7.14.5
├─ @babel/plugin-transform-classes@7.14.5
├─ @babel/plugin-transform-computed-properties@7.14.5
├─ @babel/plugin-transform-destructuring@7.14.5
├─ @babel/plugin-transform-dotall-regex@7.14.5
├─ @babel/plugin-transform-duplicate-keys@7.14.5
├─ @babel/plugin-transform-exponentiation-operator@7.14.5
├─ @babel/plugin-transform-for-of@7.14.5
├─ @babel/plugin-transform-function-name@7.14.5
├─ @babel/plugin-transform-literals@7.14.5
├─ @babel/plugin-transform-member-expression-literals@7.14.5
├─ @babel/plugin-transform-modules-amd@7.14.5
├─ @babel/plugin-transform-modules-commonjs@7.14.5
├─ @babel/plugin-transform-modules-systemjs@7.14.5
├─ @babel/plugin-transform-modules-umd@7.14.5
├─ @babel/plugin-transform-named-capturing-groups-regex@7.14.5
├─ @babel/plugin-transform-new-target@7.14.5
├─ @babel/plugin-transform-object-super@7.14.5
├─ @babel/plugin-transform-property-literals@7.14.5
├─ @babel/plugin-transform-react-constant-elements@7.14.5
├─ @babel/plugin-transform-react-display-name@7.14.5
├─ @babel/plugin-transform-react-jsx-development@7.14.5
├─ @babel/plugin-transform-react-pure-annotations@7.14.5
├─ @babel/plugin-transform-regenerator@7.14.5
├─ @babel/plugin-transform-reserved-words@7.14.5
├─ @babel/plugin-transform-shorthand-properties@7.14.5
├─ @babel/plugin-transform-spread@7.14.6
├─ @babel/plugin-transform-sticky-regex@7.14.5
├─ @babel/plugin-transform-template-literals@7.14.5
├─ @babel/plugin-transform-typeof-symbol@7.14.5
├─ @babel/plugin-transform-unicode-escapes@7.14.5
├─ @babel/plugin-transform-unicode-regex@7.14.5
├─ @babel/preset-env@7.14.5
├─ @babel/preset-modules@0.1.4
├─ @babel/preset-react@7.14.5
├─ @babel/runtime-corejs3@7.14.6
├─ @bcoe/v8-coverage@0.2.3
├─ @eslint/eslintrc@0.4.2
├─ @hapi/joi@15.1.1
├─ @istanbuljs/load-nyc-config@1.1.0
├─ @jest/core@26.6.3
├─ @jest/globals@26.6.2
├─ @jest/reporters@26.6.2
├─ @jest/test-sequencer@26.6.3
├─ @nodelib/fs.scandir@2.1.5
├─ @nodelib/fs.stat@2.0.5
├─ @nodelib/fs.walk@1.2.7
├─ @npmcli/move-file@1.1.2
├─ @pmmmwh/react-refresh-webpack-plugin@0.4.3
├─ @rollup/plugin-node-resolve@7.1.3
├─ @rollup/plugin-replace@2.4.2
├─ @rollup/pluginutils@3.1.0
├─ @sinonjs/commons@1.8.3
├─ @sinonjs/fake-timers@6.0.1
├─ @surma/rollup-plugin-off-main-thread@1.4.2
├─ @svgr/babel-plugin-add-jsx-attribute@5.4.0
├─ @svgr/babel-plugin-remove-jsx-attribute@5.4.0
├─ @svgr/babel-plugin-remove-jsx-empty-expression@5.0.1
├─ @svgr/babel-plugin-replace-jsx-attribute-value@5.0.1
├─ @svgr/babel-plugin-svg-dynamic-title@5.4.0
├─ @svgr/babel-plugin-svg-em-dimensions@5.4.0
├─ @svgr/babel-plugin-transform-react-native-svg@5.4.0
├─ @svgr/babel-plugin-transform-svg-component@5.5.0
├─ @svgr/babel-preset@5.5.0
├─ @svgr/core@5.5.0
├─ @svgr/hast-util-to-babel-ast@5.5.0
├─ @svgr/plugin-svgo@5.5.0
├─ @svgr/webpack@5.5.0
├─ @tootallnate/once@1.1.2
├─ @types/babel__core@7.1.14
├─ @types/eslint@7.2.13
├─ @types/graceful-fs@4.1.5
├─ @types/html-minifier-terser@5.1.1
├─ @types/istanbul-reports@3.0.1
├─ @types/json-schema@7.0.7
├─ @types/json5@0.0.29
├─ @types/normalize-package-data@2.4.0
├─ @types/prettier@2.3.0
├─ @types/resolve@0.0.8
├─ @types/source-list-map@0.1.2
├─ @types/stack-utils@2.0.0
├─ @types/tapable@1.0.7
├─ @types/uglify-js@3.13.0
├─ @types/webpack-sources@2.1.0
├─ @types/webpack@4.41.29
├─ @typescript-eslint/eslint-plugin@4.27.0
├─ @typescript-eslint/experimental-utils@4.27.0
├─ @typescript-eslint/parser@4.27.0
├─ @webassemblyjs/floating-point-hex-parser@1.9.0
├─ @webassemblyjs/helper-code-frame@1.9.0
├─ @webassemblyjs/helper-fsm@1.9.0
├─ @webassemblyjs/helper-wasm-section@1.9.0
├─ @webassemblyjs/wasm-edit@1.9.0
├─ @webassemblyjs/wasm-opt@1.9.0
├─ abab@2.0.5
├─ acorn-globals@6.0.0
├─ acorn-jsx@5.3.1
├─ acorn-walk@7.2.0
├─ acorn@7.4.1
├─ adjust-sourcemap-loader@3.0.0
├─ anymatch@3.1.2
├─ aria-query@4.2.2
├─ array-includes@3.1.3
├─ array.prototype.flat@1.2.4
├─ array.prototype.flatmap@1.2.4
├─ arrify@2.0.1
├─ astral-regex@2.0.0
├─ at-least-node@1.0.0
├─ axe-core@4.2.2
├─ axobject-query@2.2.0
├─ babel-eslint@10.1.0
├─ babel-plugin-jest-hoist@26.6.2
├─ babel-plugin-macros@2.8.0
├─ babel-plugin-polyfill-corejs2@0.2.2
├─ babel-plugin-polyfill-corejs3@0.2.3
├─ babel-plugin-polyfill-regenerator@0.2.2
├─ babel-preset-react-app@10.0.0
├─ bfj@7.0.2
├─ browser-process-hrtime@1.0.0
├─ builtin-modules@3.2.0
├─ cacache@15.2.0
├─ char-regex@1.0.2
├─ check-types@11.1.2
├─ cjs-module-lexer@0.6.0
├─ cliui@6.0.0
├─ combined-stream@1.0.8
├─ confusing-browser-globals@1.0.10
├─ core-js-pure@3.14.0
├─ core-js@3.14.0
├─ cra-template-typescript@1.1.2
├─ cross-spawn@7.0.3
├─ crypto-random-string@1.0.0
├─ css-loader@4.3.0
├─ cssom@0.4.4
├─ cssstyle@2.3.0
├─ damerau-levenshtein@1.0.7
├─ data-urls@2.0.0
├─ decimal.js@10.2.1
├─ dedent@0.7.0
├─ deep-is@0.1.3
├─ detect-newline@3.1.0
├─ diff-sequences@26.6.2
├─ domexception@2.0.1
├─ ejs@2.7.4
├─ electron-to-chromium@1.3.752
├─ emittery@0.7.2
├─ enhanced-resolve@4.5.0
├─ enquirer@2.3.6
├─ error-stack-parser@2.0.6
├─ escalade@3.1.1
├─ escape-string-regexp@2.0.0
├─ escodegen@2.0.0
├─ eslint-config-react-app@6.0.0
├─ eslint-import-resolver-node@0.3.4
├─ eslint-module-utils@2.6.1
├─ eslint-plugin-flowtype@5.7.2
├─ eslint-plugin-import@2.23.4
├─ eslint-plugin-jest@24.3.6
├─ eslint-plugin-jsx-a11y@6.4.1
├─ eslint-plugin-react-hooks@4.2.0
├─ eslint-plugin-react@7.24.0
├─ eslint-plugin-testing-library@3.10.2
├─ eslint-utils@2.1.0
├─ eslint-webpack-plugin@2.5.4
├─ eslint@7.28.0
├─ espree@7.3.1
├─ esquery@1.4.0
├─ estree-walker@0.6.1
├─ fast-levenshtein@2.0.6
├─ fastq@1.11.0
├─ file-entry-cache@6.0.1
├─ file-loader@6.1.1
├─ filesize@6.1.0
├─ flat-cache@3.0.4
├─ flatted@3.1.1
├─ fork-ts-checker-webpack-plugin@4.1.6
├─ form-data@3.0.1
├─ fs-extra@9.1.0
├─ fsevents@2.3.2
├─ get-package-type@0.1.0
├─ glob-parent@5.1.2
├─ globby@11.0.4
├─ has-bigints@1.0.1
├─ hoopy@0.1.4
├─ html-encoding-sniffer@2.0.1
├─ html-webpack-plugin@4.5.0
├─ http-parser-js@0.5.3
├─ http-proxy-agent@4.0.1
├─ https-proxy-agent@5.0.0
├─ human-signals@1.1.1
├─ immer@8.0.1
├─ internal-slot@1.0.3
├─ is-bigint@1.0.2
├─ is-boolean-object@1.1.1
├─ is-module@1.0.0
├─ is-negative-zero@2.0.1
├─ is-number-object@1.0.5
├─ is-potential-custom-element-name@1.0.1
├─ istanbul-lib-instrument@4.0.3
├─ istanbul-lib-source-maps@4.0.0
├─ istanbul-reports@3.0.2
├─ jest-changed-files@26.6.2
├─ jest-circus@26.6.0
├─ jest-cli@26.6.3
├─ jest-docblock@26.0.0
├─ jest-each@26.6.2
├─ jest-environment-jsdom@26.6.2
├─ jest-environment-node@26.6.2
├─ jest-jasmine2@26.6.3
├─ jest-leak-detector@26.6.2
├─ jest-resolve-dependencies@26.6.3
├─ jest-serializer@26.6.2
├─ jest-watch-typeahead@0.6.1
├─ jest-watcher@26.6.2
├─ jest@26.6.0
├─ jsdom@16.6.0
├─ json3@3.3.3
├─ jsx-ast-utils@3.2.0
├─ klona@2.0.4
├─ language-subtag-registry@0.3.21
├─ language-tags@1.0.5
├─ lodash.clonedeep@4.5.0
├─ lodash.debounce@4.0.8
├─ lodash.merge@4.6.2
├─ lodash.truncate@4.4.2
├─ loglevel@1.7.1
├─ magic-string@0.25.7
├─ mini-css-extract-plugin@0.11.3
├─ minizlib@2.1.2
├─ nanoid@3.1.23
├─ native-url@0.2.6
├─ node-forge@0.10.0
├─ node-notifier@8.0.2
├─ node-releases@1.1.73
├─ nwsapi@2.2.0
├─ object-inspect@1.10.3
├─ object.fromentries@2.0.4
├─ object.values@1.1.4
├─ open@7.4.2
├─ optimize-css-assets-webpack-plugin@5.0.4
├─ optionator@0.9.1
├─ p-each-series@2.2.0
├─ parse5@6.0.1
├─ picomatch@2.3.0
├─ pkg-up@3.1.0
├─ pnp-webpack-plugin@1.6.4
├─ portfinder@1.0.28
├─ postcss-flexbugs-fixes@4.2.1
├─ postcss-modules-local-by-default@3.0.3
├─ postcss-modules-scope@2.2.0
├─ postcss-safe-parser@5.0.2
├─ pretty-bytes@5.6.0
├─ promise@8.1.0
├─ psl@1.8.0
├─ queue-microtask@1.2.3
├─ react-app-polyfill@2.0.0
├─ react-dev-utils@11.0.4
├─ react-dom@17.0.2
├─ react-error-overlay@6.0.9
├─ react-refresh@0.8.3
├─ react-scripts@4.0.3
├─ react@17.0.2
├─ read-pkg@5.2.0
├─ regenerate-unicode-properties@8.2.0
├─ regenerator-transform@0.14.5
├─ regex-parser@2.2.11
├─ regexp.prototype.flags@1.3.1
├─ regexpu-core@4.7.1
├─ regjsgen@0.5.2
├─ regjsparser@0.6.9
├─ require-from-string@2.0.2
├─ resolve-cwd@3.0.0
├─ resolve-url-loader@3.1.3
├─ reusify@1.0.4
├─ rollup-plugin-babel@4.4.0
├─ rollup-plugin-terser@5.3.1
├─ rollup-pluginutils@2.8.2
├─ rollup@1.32.1
├─ run-parallel@1.2.0
├─ sass-loader@10.2.0
├─ saxes@5.0.1
├─ scheduler@0.20.2
├─ selfsigned@1.10.11
├─ serialize-javascript@5.0.1
├─ shebang-command@2.0.0
├─ shebang-regex@3.0.0
├─ sisteransi@1.0.5
├─ slice-ansi@4.0.0
├─ sockjs-client@1.5.1
├─ sockjs@0.3.21
├─ source-map-js@0.6.2
├─ sourcemap-codec@1.4.8
├─ spdy@4.0.2
├─ ssri@8.0.1
├─ stackframe@1.2.0
├─ string-natural-compare@3.0.1
├─ string.prototype.matchall@4.0.5
├─ string.prototype.trimend@1.0.4
├─ string.prototype.trimstart@1.0.4
├─ strip-final-newline@2.0.0
├─ strip-json-comments@3.1.1
├─ style-loader@1.3.0
├─ supports-hyperlinks@2.2.0
├─ svg-parser@2.0.4
├─ symbol-tree@3.2.4
├─ table@6.7.1
├─ tar@6.1.0
├─ temp-dir@1.0.0
├─ tempy@0.3.0
├─ terminal-link@2.1.1
├─ terser-webpack-plugin@4.2.3
├─ test-exclude@6.0.0
├─ tough-cookie@4.0.0
├─ tr46@2.1.0
├─ tryer@1.0.1
├─ ts-pnp@1.2.0
├─ tsconfig-paths@3.9.0
├─ type-detect@4.0.8
├─ typedarray-to-buffer@3.1.5
├─ unbox-primitive@1.0.1
├─ unicode-match-property-value-ecmascript@1.2.0
├─ unique-string@1.0.0
├─ url-loader@4.1.1
├─ url-parse@1.5.1
├─ v8-to-istanbul@7.1.2
├─ w3c-hr-time@1.0.2
├─ w3c-xmlserializer@2.0.0
├─ watchpack-chokidar2@2.0.1
├─ watchpack@1.7.5
├─ webpack-dev-server@3.11.1
├─ webpack@4.44.2
├─ websocket-driver@0.7.4
├─ whatwg-fetch@3.6.2
├─ whatwg-url@8.6.0
├─ which-boxed-primitive@1.0.2
├─ word-wrap@1.2.3
├─ workbox-broadcast-update@5.1.4
├─ workbox-build@5.1.4
├─ workbox-cacheable-response@5.1.4
├─ workbox-expiration@5.1.4
├─ workbox-google-analytics@5.1.4
├─ workbox-navigation-preload@5.1.4
├─ workbox-precaching@5.1.4
├─ workbox-range-requests@5.1.4
├─ workbox-streams@5.1.4
├─ workbox-sw@5.1.4
├─ workbox-webpack-plugin@5.1.4
├─ workbox-window@5.1.4
├─ wrap-ansi@6.2.0
├─ write-file-atomic@3.0.3
├─ xmlchars@2.2.0
├─ yaml@1.10.2
├─ yargs-parser@18.1.3
└─ yocto-queue@0.1.0
✨ Done in 33.18s.
Installing template dependencies using yarnpkg...
yarn add v1.22.10
[1/4] 🔍 Resolving packages...
[2/4] 🚚 Fetching packages...
[3/4] 🔗 Linking dependencies...
warning " > @testing-library/user-event@12.8.3" has unmet peer dependency "@testing-library/dom@>=7.21.4".
[4/4] 🔨 Building fresh packages...
success Saved lockfile.
success Saved 23 new dependencies.
info Direct dependencies
├─ @testing-library/jest-dom@5.14.1
├─ @testing-library/react@11.2.7
├─ @testing-library/user-event@12.8.3
├─ @types/jest@26.0.23
├─ @types/node@12.20.15
├─ @types/react-dom@17.0.7
├─ @types/react@17.0.11
├─ react-dom@17.0.2
├─ react@17.0.2
├─ typescript@4.3.3
└─ web-vitals@1.1.2
info All dependencies
├─ @testing-library/dom@7.31.2
├─ @testing-library/jest-dom@5.14.1
├─ @testing-library/react@11.2.7
├─ @testing-library/user-event@12.8.3
├─ @types/aria-query@4.2.1
├─ @types/jest@26.0.23
├─ @types/node@12.20.15
├─ @types/prop-types@15.7.3
├─ @types/react-dom@17.0.7
├─ @types/react@17.0.11
├─ @types/scheduler@0.16.1
├─ @types/testing-library__jest-dom@5.14.0
├─ css.escape@1.5.1
├─ css@3.0.0
├─ csstype@3.0.8
├─ lz-string@1.4.4
├─ min-indent@1.0.1
├─ react-dom@17.0.2
├─ react@17.0.2
├─ redent@3.0.0
├─ strip-indent@3.0.0
├─ typescript@4.3.3
└─ web-vitals@1.1.2
✨ Done in 9.50s.
We detected TypeScript in your project (src/App.test.tsx) and created a tsconfig.json file for you.
Your tsconfig.json has been populated with default values.
Removing template package using yarnpkg...
yarn remove v1.22.10
[1/2] 🗑 Removing module cra-template-typescript...
[2/2] 🔨 Regenerating lockfile and installing missing dependencies...
warning " > @testing-library/user-event@12.8.3" has unmet peer dependency "@testing-library/dom@>=7.21.4".
success Uninstalled packages.
✨ Done in 10.31s.
Success! Created sample-3.3.1 at /Users/hayato94087/sample-3.3.1
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 sample-3.3.1
yarn start
Happy hacking!
package.jsonの中身は下記です．こちらは3.3.1と4.0.3と同じ内容になりました．
{
"name": "sample-3.3.1",
"version": "0.1.0",
"private": true,
"dependencies": {
"@testing-library/jest-dom": "^5.11.4",
"@testing-library/react": "^11.1.0",
"@testing-library/user-event": "^12.1.10",
"@types/jest": "^26.0.15",
"@types/node": "^12.0.0",
"@types/react": "^17.0.0",
"@types/react-dom": "^17.0.0",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-scripts": "4.0.3",
"typescript": "^4.1.2",
"web-vitals": "^1.0.1"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}