From b5402d6d72f59ad0b12a5b09232b93bafcefb982 Mon Sep 17 00:00:00 2001 From: Patrik Oldsberg Date: Wed, 19 Jan 2022 17:18:11 +0100 Subject: [PATCH] switch to React 17 Signed-off-by: Patrik Oldsberg --- .changeset/nice-lobsters-tie.md | 25 +++++++++++++++++ packages/app/package.json | 4 +-- .../default-app/packages/app/package.json.hbs | 4 +-- packages/embedded-techdocs-app/package.json | 4 +-- packages/storybook/package.json | 4 +-- yarn.lock | 28 +++++++++++-------- 6 files changed, 50 insertions(+), 19 deletions(-) create mode 100644 .changeset/nice-lobsters-tie.md diff --git a/.changeset/nice-lobsters-tie.md b/.changeset/nice-lobsters-tie.md new file mode 100644 index 0000000000..b531255023 --- /dev/null +++ b/.changeset/nice-lobsters-tie.md @@ -0,0 +1,25 @@ +--- +'@backstage/create-app': patch +--- + +Migrated the app template to React 17. + +To apply this change to an existing app, make the following change to `packages/app/package.json`: + +```diff + "history": "^5.0.0", +- "react": "^16.13.1", +- "react-dom": "^16.13.1", ++ "react": "^17.0.2", ++ "react-dom": "^17.0.2", + "react-router": "6.0.0-beta.0", +``` + +Since we have recently moved over all `react` and `react-dom` dependencies to `peerDependencies` of all packages, and included React 17 in the version range, this should be all you need to do. If you end up with duplicate React installations, first make sure that all of your plugins are up-to-date, including ones for example from `@roadiehq`. If that doesn't work, you may need to fall back to adding [Yarn resolutions](https://classic.yarnpkg.com/lang/en/docs/selective-version-resolutions/) in the `package.json` of your project root: + +```diff ++ "resolutions": { ++ "react": "^17.0.2", ++ "react-dom": "^17.0.2" ++ }, +``` diff --git a/packages/app/package.json b/packages/app/package.json index 7239554fb4..f65b221dbe 100644 --- a/packages/app/package.json +++ b/packages/app/package.json @@ -60,8 +60,8 @@ "@roadiehq/backstage-plugin-buildkite": "^1.3.4", "history": "^5.0.0", "prop-types": "^15.7.2", - "react": "^16.13.1", - "react-dom": "^16.13.1", + "react": "^17.0.2", + "react-dom": "^17.0.2", "react-hot-loader": "^4.12.21", "react-router": "6.0.0-beta.0", "react-router-dom": "6.0.0-beta.0", diff --git a/packages/create-app/templates/default-app/packages/app/package.json.hbs b/packages/create-app/templates/default-app/packages/app/package.json.hbs index 68848d2de9..f968a076d7 100644 --- a/packages/create-app/templates/default-app/packages/app/package.json.hbs +++ b/packages/create-app/templates/default-app/packages/app/package.json.hbs @@ -26,8 +26,8 @@ "@material-ui/core": "^4.12.2", "@material-ui/icons": "^4.9.1", "history": "^5.0.0", - "react": "^16.13.1", - "react-dom": "^16.13.1", + "react": "^17.0.2", + "react-dom": "^17.0.2", "react-router": "6.0.0-beta.0", "react-router-dom": "6.0.0-beta.0", "react-use": "^15.3.3" diff --git a/packages/embedded-techdocs-app/package.json b/packages/embedded-techdocs-app/package.json index 6b79121cf9..c103ae224c 100644 --- a/packages/embedded-techdocs-app/package.json +++ b/packages/embedded-techdocs-app/package.json @@ -19,8 +19,8 @@ "@material-ui/core": "^4.11.0", "@material-ui/icons": "^4.9.1", "history": "^5.0.0", - "react": "^16.13.1", - "react-dom": "^16.13.1", + "react": "^17.0.2", + "react-dom": "^17.0.2", "react-router": "6.0.0-beta.0", "react-router-dom": "6.0.0-beta.0", "react-use": "^17.2.4" diff --git a/packages/storybook/package.json b/packages/storybook/package.json index 7071c0cc82..2be72eee9f 100644 --- a/packages/storybook/package.json +++ b/packages/storybook/package.json @@ -12,8 +12,8 @@ "@backstage/test-utils": "^0.2.3-next.0", "@backstage/core-app-api": "^0.5.0-next.0", "@backstage/core-plugin-api": "^0.6.0-next.0", - "react": "^16.13.1", - "react-dom": "^16.13.1" + "react": "^17.0.2", + "react-dom": "^17.0.2" }, "devDependencies": { "@storybook/addon-a11y": "^6.3.4", diff --git a/yarn.lock b/yarn.lock index 975f78cb0e..156aef23d0 100644 --- a/yarn.lock +++ b/yarn.lock @@ -23948,15 +23948,14 @@ react-docgen@^5.0.0: node-dir "^0.1.10" strip-indent "^3.0.0" -react-dom@^16.13.1: - version "16.13.1" - resolved "https://registry.npmjs.org/react-dom/-/react-dom-16.13.1.tgz#c1bd37331a0486c078ee54c4740720993b2e0e7f" - integrity sha512-81PIMmVLnCNLO/fFOQxdQkvEq/+Hfpv24XNJfpyZhTRfO0QcmQIF/PgCa1zCOj2w1hrn12MFLyaJ/G0+Mxtfag== +react-dom@^17.0.2: + version "17.0.2" + resolved "https://registry.npmjs.org/react-dom/-/react-dom-17.0.2.tgz#ecffb6845e3ad8dbfcdc498f0d0a939736502c23" + integrity sha512-s4h96KtLDUQlsENhMn1ar8t2bEa+q/YAtj8pPPdIjPDGBDIVNsrD9aXNWqspUe6AzKCIG0C1HZZLqLV7qpOBGA== dependencies: loose-envify "^1.1.0" object-assign "^4.1.1" - prop-types "^15.6.2" - scheduler "^0.19.1" + scheduler "^0.20.2" react-double-scrollbar@0.0.15: version "0.0.15" @@ -24306,14 +24305,13 @@ react-window@^1.8.6: "@babel/runtime" "^7.0.0" memoize-one ">=3.1.1 <6" -react@^16.13.1: - version "16.13.1" - resolved "https://registry.npmjs.org/react/-/react-16.13.1.tgz#2e818822f1a9743122c063d6410d85c1e3afe48e" - integrity sha512-YMZQQq32xHLX0bz5Mnibv1/LHb3Sqzngu7xstSM+vrkE5Kzr9xE0yMByK5kMoTK30YVJE61WfbxIFFvfeDKT1w== +react@^17.0.2: + version "17.0.2" + resolved "https://registry.npmjs.org/react/-/react-17.0.2.tgz#d0b5cc516d29eb3eee383f75b62864cfb6800037" + integrity sha512-gnhPt75i/dq/z3/6q/0asP78D0u592D5L1pd7M8P+dck6Fu/jJeL6iVVK23fptSUZj8Vjf++7wXA8UNclGQcbA== dependencies: loose-envify "^1.1.0" object-assign "^4.1.1" - prop-types "^15.6.2" read-cmd-shim@^2.0.0: version "2.0.0" @@ -25403,6 +25401,14 @@ scheduler@^0.19.0, scheduler@^0.19.1: loose-envify "^1.1.0" object-assign "^4.1.1" +scheduler@^0.20.2: + version "0.20.2" + resolved "https://registry.npmjs.org/scheduler/-/scheduler-0.20.2.tgz#4baee39436e34aa93b4874bddcbf0fe8b8b50e91" + integrity sha512-2eWfGgAqqWFGqtdMmcL5zCMK1U8KlXv8SQFGglL3CEtd0aDVDWgeF/YoCmvln55m5zSk3J/20hTaSBeSObsQDQ== + dependencies: + loose-envify "^1.1.0" + object-assign "^4.1.1" + schema-utils@2.7.0: version "2.7.0" resolved "https://registry.npmjs.org/schema-utils/-/schema-utils-2.7.0.tgz#17151f76d8eae67fbbf77960c33c676ad9f4efc7"