Skip to content

fix(mgt-react): migrates to modern React rendering #3449

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 2 commits into
base: main
Choose a base branch
from
Open

fix(mgt-react): migrates to modern React rendering #3449

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
c01fe97
fix(mgt-react): migrates to modern React rendering (will work in Reac…
tobi1220 May 27, 2025
d5d915e
fix: drops support for React 17
tobi1220 May 27, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file removed .yarn/cache/react-dom-npm-17.0.2-f551215af1-0b3836131a.zip
View file
Open in desktop
Binary file not shown.
Binary file added .yarn/cache/react-dom-npm-18.3.1-a805663f38-3f4b73a3aa.zip
View file
Open in desktop
Binary file not shown.
Binary file removed .yarn/cache/react-npm-17.0.1-98658812fc-23ada2f8fe.zip
View file
Open in desktop
Binary file not shown.
Binary file removed .yarn/cache/react-npm-17.0.2-99ba37d931-ece60c31c1.zip
View file
Open in desktop
Binary file not shown.
Binary file added .yarn/cache/react-npm-18.3.1-af38f3c1ae-261137d3f3.zip
View file
Open in desktop
Binary file not shown.
Binary file removed .yarn/cache/scheduler-npm-0.20.2-90beaecfba-898917fa47.zip
View file
Open in desktop
Binary file not shown.
Binary file added .yarn/cache/scheduler-npm-0.23.2-6d1dd9c2b7-e8d68b89d1.zip
View file
Open in desktop
Binary file not shown.
4 changes: 2 additions & 2 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -127,8 +127,8 @@
"office-ui-fabric-core": "^11.1.0",
"playwright": "^1.49.1",
"prettier": "3.2.5",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"react": "^18.0.0",
"react-dom": "^18.0.0",
"regenerator-runtime": "^0.14.1",
"rollup": "^4.12.0",
"rollup-plugin-postcss": "^4.0.2",
Expand Down
4 changes: 2 additions & 2 deletions packages/mgt-react/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,8 +42,8 @@
"wc-react": "^0.5.1"
},
"peerDependencies": {
"react": "^17.0.1 || ^18.0.0",
"react-dom": "^17.0.1 || ^18.0.0"
"react": "^18.0.0",
"react-dom": "^18.0.0"
},
"publishConfig": {
"access": "public"
Expand Down
5 changes: 3 additions & 2 deletions packages/mgt-react/src/Mgt.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
*/

import React, { ReactNode, ReactElement } from 'react';
import ReactDOM from 'react-dom';
import { createRoot } from 'react-dom/client';
import { Wc, WcProps, WcTypeProps } from 'wc-react';
import { customElementHelper, TemplateRenderedData } from '@microsoft/mgt-element';

Expand Down Expand Up @@ -103,7 +103,8 @@ export class Mgt extends Wc {

if (template) {
template = React.cloneElement(template, { dataContext });
ReactDOM.render(template, element);
const root = createRoot(element);
root.render(template);
}
};

Expand Down
2 changes: 1 addition & 1 deletion packages/mgt-spfx-utils/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@
"dependencies": {
"@microsoft/mgt-components": "*",
"@types/react": "17.0.45",
"react": "17.0.1"
"react": "^18.0.0"
},
"publishConfig": {
"access": "public"
Expand Down
4 changes: 2 additions & 2 deletions samples/react-contoso/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,8 +17,8 @@
"@types/react": "^17.0.0",
"@types/react-dom": "^17.0.0",
"eslint-config-react-app": "^7.0.1",
"react": "^17.0.0",
"react-dom": "^17.0.0",
"react": "^18.0.0",
"react-dom": "^18.0.0",
"react-router-dom": "^6.15.0",
"typescript": "^4.9.5",
"web-vitals": "^2.1.4"
Expand Down
51 changes: 19 additions & 32 deletions yarn.lock
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5164,7 +5164,7 @@ __metadata:
dependencies:
"@microsoft/mgt-components": "npm:*"
"@types/react": "npm:17.0.45"
react: "npm:17.0.1"
react: "npm:^18.0.0"
languageName: unknown
linkType: soft

Expand Down Expand Up @@ -20604,8 +20604,8 @@ __metadata:
"@types/react-dom": "npm:^17.0.0"
"@vitejs/plugin-react": "npm:^4.2.1"
eslint-config-react-app: "npm:^7.0.1"
react: "npm:^17.0.0"
react-dom: "npm:^17.0.0"
react: "npm:^18.0.0"
react-dom: "npm:^18.0.0"
react-router-dom: "npm:^6.15.0"
typescript: "npm:^4.9.5"
vite: "npm:^5.1.4"
Expand All @@ -20614,16 +20614,15 @@ __metadata:
languageName: unknown
linkType: soft

"react-dom@npm:^17.0.0, react-dom@npm:^17.0.1":
version: 17.0.2
resolution: "react-dom@npm:17.0.2"
"react-dom@npm:^18.0.0":
version: 18.3.1
resolution: "react-dom@npm:18.3.1"
dependencies:
loose-envify: "npm:^1.1.0"
object-assign: "npm:^4.1.1"
scheduler: "npm:^0.20.2"
scheduler: "npm:^0.23.2"
peerDependencies:
react: 17.0.2
checksum: 10/0b3836131a64da8b1c2c852cc28b09c21a738c33c7a8d6021ac20d5619d753c8ee5fff8f97c95f2fc33053e44c2cbce9657453e21c55900164e6e0c3e955e826
react: ^18.3.1
checksum: 10/3f4b73a3aa083091173b29812b10394dd06f4ac06aff410b74702cfb3aa29d7b0ced208aab92d5272919b612e5cda21aeb1d54191848cf6e46e9e354f3541f81
languageName: node
linkType: hard

Expand Down Expand Up @@ -20773,23 +20772,12 @@ __metadata:
languageName: node
linkType: hard

"react@npm:17.0.1":
version: 17.0.1
resolution: "react@npm:17.0.1"
"react@npm:^18.0.0":
version: 18.3.1
resolution: "react@npm:18.3.1"
dependencies:
loose-envify: "npm:^1.1.0"
object-assign: "npm:^4.1.1"
checksum: 10/23ada2f8fe9a73460cb849b71ee5bf7ae4d1f856ebf4c3c322546de06a58db9ad69306539ae3ea07056d9408697ff683066cabcea55ecdcbeacbf4bf46a90ad2
languageName: node
linkType: hard

"react@npm:^17.0.0, react@npm:^17.0.1":
version: 17.0.2
resolution: "react@npm:17.0.2"
dependencies:
loose-envify: "npm:^1.1.0"
object-assign: "npm:^4.1.1"
checksum: 10/ece60c31c1d266d132783aaaffa185d2e4c9b4db144f853933ec690cee1e0600c8929a1dd0a9e79323eea8e2df636c9a06d40f6cfdc9f797f65225433e67f707
checksum: 10/261137d3f3993eaa2368a83110466fc0e558bc2c7f7ae7ca52d94f03aac945f45146bd85e5f481044db1758a1dbb57879e2fcdd33924e2dde1bdc550ce73f7bf
languageName: node
linkType: hard

Expand Down Expand Up @@ -21509,8 +21497,8 @@ __metadata:
office-ui-fabric-core: "npm:^11.1.0"
playwright: "npm:^1.49.1"
prettier: "npm:3.2.5"
react: "npm:^17.0.1"
react-dom: "npm:^17.0.1"
react: "npm:^18.0.0"
react-dom: "npm:^18.0.0"
regenerator-runtime: "npm:^0.14.1"
rollup: "npm:^4.12.0"
rollup-plugin-postcss: "npm:^4.0.2"
Expand Down Expand Up @@ -21662,13 +21650,12 @@ __metadata:
languageName: node
linkType: hard

"scheduler@npm:^0.20.2":
version: 0.20.2
resolution: "scheduler@npm:0.20.2"
"scheduler@npm:^0.23.2":
version: 0.23.2
resolution: "scheduler@npm:0.23.2"
dependencies:
loose-envify: "npm:^1.1.0"
object-assign: "npm:^4.1.1"
checksum: 10/898917fa475386953d998add9107c04bf2c335eee86172833995dee126d12a68bee3c29edbd61fa0bcbcb8ee511c422eaab23b86b02f95aab26ecfaed8df5e64
checksum: 10/e8d68b89d18d5b028223edf090092846868a765a591944760942b77ea1f69b17235f7e956696efbb62c8130ab90af7e0949bfb8eba7896335507317236966bc9
languageName: node
linkType: hard

Expand Down
Loading