diff --git a/.changeset/lucky-lemons-serve.md b/.changeset/lucky-lemons-serve.md new file mode 100644 index 0000000000..254b63cc1f --- /dev/null +++ b/.changeset/lucky-lemons-serve.md @@ -0,0 +1,5 @@ +--- +'@backstage/cli': patch +--- + +Switched to only apply `@hot-loader/react-dom` [Webpack aliasing](https://github.com/hot-loader/react-dom/tree/master/source#webpack) when using React 16. diff --git a/.changeset/nice-lobsters-tie.md b/.changeset/nice-lobsters-tie.md new file mode 100644 index 0000000000..cfe5ff07e8 --- /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 sure you have updated to the latest version of `@backstage/cli`, and 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/cli/src/lib/bundler/config.ts b/packages/cli/src/lib/bundler/config.ts index 35c5be8bb7..f4810722bc 100644 --- a/packages/cli/src/lib/bundler/config.ts +++ b/packages/cli/src/lib/bundler/config.ts @@ -173,6 +173,18 @@ export async function createConfig( }), ); + const resolveAliases: Record = {}; + try { + // eslint-disable-next-line import/no-extraneous-dependencies + const { version: reactDomVersion } = require('react-dom/package.json'); + // Only apply the alias for hook support if we're running with React 16 + if (reactDomVersion.startsWith('16.')) { + resolveAliases['react-dom'] = '@hot-loader/react-dom'; + } + } catch (error) { + console.warn(`WARNING: Failed to read react-dom version, ${error}`); + } + return { mode: isDev ? 'development' : 'production', profile: false, @@ -211,9 +223,7 @@ export async function createConfig( [paths.targetPackageJson], ), ], - alias: { - 'react-dom': '@hot-loader/react-dom', - }, + alias: resolveAliases, }, module: { rules: loaders, 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 3fae97ddbc..1800400d6e 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2296,20 +2296,6 @@ "@babel/helper-validator-identifier" "^7.16.7" to-fast-properties "^2.0.0" -"@backstage/app-defaults@^0.1.3": - version "0.1.4" - resolved "https://registry.npmjs.org/@backstage/app-defaults/-/app-defaults-0.1.4.tgz#bf81accd4448c6c6b4b7d3185232c3cd4014b58b" - integrity sha512-fm+pM0BqAqLdO/4EB+n1FOnMLImiJthusz68imUWXqheBUDL4oVKbHRhc/+mh/HZvh6Wfdc6kKV+EwpiPMtXyQ== - dependencies: - "@backstage/core-app-api" "^0.4.0" - "@backstage/core-components" "^0.8.4" - "@backstage/core-plugin-api" "^0.5.0" - "@backstage/plugin-permission-react" "^0.2.2" - "@backstage/theme" "^0.2.14" - "@material-ui/core" "^4.12.2" - "@material-ui/icons" "^4.9.1" - react-router-dom "6.0.0-beta.0" - "@backstage/catalog-client@^0.5.4": version "0.5.4" resolved "https://registry.npmjs.org/@backstage/catalog-client/-/catalog-client-0.5.4.tgz#6162bf460ac0f041d4f0f906172733e7a59df6f9" @@ -2343,7 +2329,7 @@ "@backstage/types" "^0.1.1" lodash "^4.17.21" -"@backstage/core-app-api@*", "@backstage/core-app-api@^0.4.0": +"@backstage/core-app-api@*": version "0.4.0" resolved "https://registry.npmjs.org/@backstage/core-app-api/-/core-app-api-0.4.0.tgz#55fcf880e4b589aaa5d24906de482f1e0bc1ffe6" integrity sha512-lqDO0Zl60Rc+INGuj+olLB8yK5zuSbQTiff0Jbg1jlGsFef0GLNTBT2UlNA+dq0esg8KY4CR4a9uDsdPzT4sJw== @@ -2359,28 +2345,7 @@ zen-observable "^0.8.15" zod "^3.11.6" -"@backstage/core-app-api@^0.3.0": - version "0.3.1" - resolved "https://registry.npmjs.org/@backstage/core-app-api/-/core-app-api-0.3.1.tgz#eceee31852908fcc35edf198f4b06424b8cad2c9" - integrity sha512-q0Nm9lNghMMaHWG32MjTkfeHUWMMzDZ5EJIfxwXmizMoO6bmiyMja8sRuQznZHPEP0kzwe3cZwPvwafgY4UU/g== - dependencies: - "@backstage/app-defaults" "^0.1.3" - "@backstage/config" "^0.1.11" - "@backstage/core-components" "^0.8.3" - "@backstage/core-plugin-api" "^0.4.1" - "@backstage/theme" "^0.2.14" - "@backstage/types" "^0.1.1" - "@backstage/version-bridge" "^0.1.1" - "@material-ui/core" "^4.12.2" - "@material-ui/icons" "^4.9.1" - "@types/prop-types" "^15.7.3" - prop-types "^15.7.2" - react-router-dom "6.0.0-beta.0" - react-use "^17.2.4" - zen-observable "^0.8.15" - zod "^3.11.6" - -"@backstage/core-components@*", "@backstage/core-components@^0.8.0", "@backstage/core-components@^0.8.3", "@backstage/core-components@^0.8.4": +"@backstage/core-components@*", "@backstage/core-components@^0.8.0", "@backstage/core-components@^0.8.4": version "0.8.4" resolved "https://registry.npmjs.org/@backstage/core-components/-/core-components-0.8.4.tgz#104aac09effb7e8eae8667b5eaf44bbe9cc2f285" integrity sha512-XpjWB5L7z8/IZU6fdpvpNcugHIttq6WXoaOCbmFoi87urVC0Z0E7beL8qCK2VFKl6eJna7xT5Bz0o0hw4MtsIQ== @@ -2437,7 +2402,7 @@ react-use "^17.2.4" zen-observable "^0.8.15" -"@backstage/core-plugin-api@^0.4.0", "@backstage/core-plugin-api@^0.4.1": +"@backstage/core-plugin-api@^0.4.0": version "0.4.1" resolved "https://registry.npmjs.org/@backstage/core-plugin-api/-/core-plugin-api-0.4.1.tgz#c0a13504bdfa61ae3d0db96934cd6c32a7574446" integrity sha512-IIb7XTcquTPaSIlamMKUgeTs5uLqkKN0Nw32QdTZhKgFkFFVzWC0AwN+henkaMNBZFdGb0ttPzrvNXGj5E6dGg== @@ -2526,29 +2491,6 @@ react-router "6.0.0-beta.0" react-use "^17.2.4" -"@backstage/plugin-permission-common@^0.3.1": - version "0.3.1" - resolved "https://registry.npmjs.org/@backstage/plugin-permission-common/-/plugin-permission-common-0.3.1.tgz#210353ac7a6d0af2352741f2efc31967ead79896" - integrity sha512-RfUpEs+N/FMWWd2Jc84I0qJfsPKC3KK7KGAf4aLoE9T2Ks9ljhNGOLx44uZfKPkN4So41fl+9/kCZVApXc2q6Q== - dependencies: - "@backstage/config" "^0.1.12" - "@backstage/errors" "^0.2.0" - cross-fetch "^3.0.6" - uuid "^8.0.0" - zod "^3.11.6" - -"@backstage/plugin-permission-react@^0.2.2": - version "0.2.2" - resolved "https://registry.npmjs.org/@backstage/plugin-permission-react/-/plugin-permission-react-0.2.2.tgz#d78fb8c9ef617f4b0431b58bd11c360870087280" - integrity sha512-B2PUswAs2fTOHJvx01gH03AZwux+In6Ymd++w6kdKZEZHB+EklfdP2agTIIOj2xzFJhKReBKU44IO3P8T5AOkg== - dependencies: - "@backstage/config" "^0.1.12" - "@backstage/core-plugin-api" "^0.5.0" - "@backstage/plugin-permission-common" "^0.3.1" - cross-fetch "^3.0.6" - react-router "6.0.0-beta.0" - react-use "^17.2.4" - "@bcoe/v8-coverage@^0.2.3": version "0.2.3" resolved "https://registry.npmjs.org/@bcoe/v8-coverage/-/v8-coverage-0.2.3.tgz#75a2e8b51cb758a7553d6804a5932d7aace75c39" @@ -5586,9 +5528,9 @@ integrity sha512-8UiDeDbjCImFSfOegGu13otQ7OdP9FOYpcLjeouppnhs+MPeIEAtYS+jCcBKmi3reyTagC15/KVSRhde1wS1vg== "@roadiehq/backstage-plugin-buildkite@^1.3.4": - version "1.3.4" - resolved "https://registry.npmjs.org/@roadiehq/backstage-plugin-buildkite/-/backstage-plugin-buildkite-1.3.4.tgz#ca58983aa3af5bec7aa72c0f7a8433dcf725da3f" - integrity sha512-Cye44GXopAhYiC6QSx/sDgtnBOPD+D4DAydasKjOmt59NJVbgltbDsLXq9oMeFez1OphypU7lWUecVnhYFze4g== + version "1.3.5" + resolved "https://registry.npmjs.org/@roadiehq/backstage-plugin-buildkite/-/backstage-plugin-buildkite-1.3.5.tgz#c8dd8390c4ca39dd522e481410d2be7fa79c0aec" + integrity sha512-KSITwXNK/sU//yHHrVizgGaHLXRDD2SVRDpwk35PFtY+iDM5msDVTcaGwNWJBOGVkegVTcq3cbHlGnEqm9AtNQ== dependencies: "@backstage/catalog-model" "^0.9.7" "@backstage/core-components" "^0.8.0" @@ -5600,16 +5542,14 @@ "@material-ui/lab" "4.0.0-alpha.57" history "^5.0.0" moment "^2.29.1" - react "^16.13.1" - react-dom "^16.13.1" react-router "6.0.0-beta.0" react-router-dom "6.0.0-beta.0" react-use "^17.2.4" "@roadiehq/backstage-plugin-github-insights@^1.4.2": - version "1.4.3" - resolved "https://registry.npmjs.org/@roadiehq/backstage-plugin-github-insights/-/backstage-plugin-github-insights-1.4.3.tgz#c83fd94dc7266330b464686c5f283fa07f5f2be9" - integrity sha512-khvXVgp+GTwXULTG4jfzB6uQtzPbjgZhfudE04hc/O3FWU4Wyrcmc/UTTu1nFah7m6yL6pwfEdC3auKXPr07lQ== + version "1.4.4" + resolved "https://registry.npmjs.org/@roadiehq/backstage-plugin-github-insights/-/backstage-plugin-github-insights-1.4.4.tgz#a77671015cebae9a31133f07e7daa693f391b35c" + integrity sha512-867aiiP7w0mKHONHGgQaMKv3iczi+YGck4apUEj4UyRQkJd+D2W94bK2z3HI6fw0RInpqo383d5VE6Yq1TEJ2A== dependencies: "@backstage/catalog-model" "^0.9.7" "@backstage/core-components" "^0.8.0" @@ -5624,18 +5564,15 @@ "@octokit/rest" "^18.5.3" "@octokit/types" "^6.14.2" history "^5.0.0" - react "^16.12.0" - react-dom "^16.12.0" react-router "^6.0.0-beta.0" react-use "^17.2.4" "@roadiehq/backstage-plugin-github-pull-requests@^1.3.2": - version "1.3.2" - resolved "https://registry.npmjs.org/@roadiehq/backstage-plugin-github-pull-requests/-/backstage-plugin-github-pull-requests-1.3.2.tgz#1804206853dd5305c98e571112f87b85ae1ebcfd" - integrity sha512-oUZVcBjOtEWKKzV4JyoDYL11m2evUAxlB/D/MyMvNZaKc/rk4VtXMSRtP9ceh9mRusC2aKwJItYqByQWHXwXdg== + version "1.3.4" + resolved "https://registry.npmjs.org/@roadiehq/backstage-plugin-github-pull-requests/-/backstage-plugin-github-pull-requests-1.3.4.tgz#3e6be41fe81909b28a3d517aadcc7ae6b70d7d7a" + integrity sha512-F1y3CmMZOiNiam3zt6TBaJ5+NqAhPwS3HkWbUsMvJq1PKAzYdSeDBPhoTBwhYOu3uV36EtKjfog4r4wVHOf7EA== dependencies: "@backstage/catalog-model" "^0.9.7" - "@backstage/core-app-api" "^0.3.0" "@backstage/core-components" "^0.8.0" "@backstage/core-plugin-api" "^0.4.0" "@backstage/plugin-catalog-react" "^0.6.5" @@ -5647,18 +5584,15 @@ history "^5.0.0" moment "^2.27.0" node-fetch "^2.6.1" - react "^16.12.0" - react-dom "^16.12.0" react-router "6.0.0-beta.0" react-use "^17.2.4" "@roadiehq/backstage-plugin-travis-ci@^1.3.2": - version "1.3.2" - resolved "https://registry.npmjs.org/@roadiehq/backstage-plugin-travis-ci/-/backstage-plugin-travis-ci-1.3.2.tgz#f49d46475cd09776a6cb8c10c07805bb003d7e75" - integrity sha512-weaUg8s6oQ4x2FtH3ruKjhgi6+bBkYPoRmAbVBRxtMvB+sPNuSUmbliuwJbA9wEyrXxsPyi0VYHbAj6CKCf+Tg== + version "1.3.3" + resolved "https://registry.npmjs.org/@roadiehq/backstage-plugin-travis-ci/-/backstage-plugin-travis-ci-1.3.3.tgz#317c9280d8dd404794ad5aa057ce457bfd459706" + integrity sha512-f5RhuG681iwiRa9/WvwhV4pI0KHv6oAHlgOXG3/pbOcONN9w9RaQIITgTyc6hpm9MzAkFQWV8qc3yPFcojza+A== dependencies: "@backstage/catalog-model" "^0.9.7" - "@backstage/core-app-api" "^0.3.0" "@backstage/core-components" "^0.8.0" "@backstage/core-plugin-api" "^0.4.0" "@backstage/plugin-catalog-react" "^0.6.5" @@ -5670,8 +5604,6 @@ date-fns "^2.18.0" history "^5.0.0" moment "^2.29.1" - react "^16.13.1" - react-dom "^16.13.1" react-router "6.0.0-beta.0" react-router-dom "6.0.0-beta.0" react-use "^17.2.4" @@ -23992,15 +23924,14 @@ react-docgen@^5.0.0: node-dir "^0.1.10" strip-indent "^3.0.0" -react-dom@^16.12.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" @@ -24350,14 +24281,13 @@ react-window@^1.8.6: "@babel/runtime" "^7.0.0" memoize-one ">=3.1.1 <6" -react@^16.12.0, 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" @@ -25447,6 +25377,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"