Skip to content

[v5] Add support for React 16 and 17#8461

Merged
jo-arroyo merged 26 commits intodevfrom
feature/react-16-17-support
Mar 26, 2026
Merged

[v5] Add support for React 16 and 17#8461
jo-arroyo merged 26 commits intodevfrom
feature/react-16-17-support

Conversation

@jo-arroyo
Copy link
Copy Markdown
Contributor

No description provided.

@jo-arroyo jo-arroyo changed the title Add support for React 16 and 17 [v5] Add support for React 16 and 17 Mar 20, 2026
@jo-arroyo jo-arroyo marked this pull request as ready for review March 23, 2026 16:31
@jo-arroyo jo-arroyo requested a review from a team as a code owner March 23, 2026 16:31
Copilot AI review requested due to automatic review settings March 23, 2026 16:31
Copy link
Copy Markdown
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

Updates @azure/msal-react v5 metadata, docs, and CI configuration to advertise and validate compatibility with React 16.8+ and React 17 (in addition to React 18/19).

Changes:

  • Extend @azure/msal-react peer dependency range for react to >=16.8.0 <20.0.0.
  • Update msal-react documentation to reflect React 16/17 support and provide React 16/17 rendering guidance.
  • Add a compatibility E2E pipeline matrix intended to run samples against multiple React majors.

Reviewed changes

Copilot reviewed 11 out of 12 changed files in this pull request and generated 5 comments.

Show a summary per file
File Description
samples/msal-react-samples/typescript-sample/package.json Broaden React/ReactDOM dependency ranges in the TS sample
samples/msal-react-samples/react-router-sample/package.json Broaden React/ReactDOM dependency ranges in the router sample
samples/msal-react-samples/b2c-sample/package.json Broaden React/ReactDOM dependency ranges in the B2C sample
package-lock.json Update lockfile to reflect peer/dependency range changes
lib/msal-react/package.json Update react peer dependency range for msal-react v5
lib/msal-react/docs/migration-guide-v4-v5.md Document updated React support and peer dependency meaning
lib/msal-react/docs/getting-started.md Update React support statement and add React 16/17 render example
lib/msal-react/README.md Update supported React version table for v5
lib/msal-react/AGENTS.md Update supported environments guidance for contributors
change/@azure-msal-react-fc1bd3a1-c1c1-43f6-b654-5934d367b063.json Beachball changefile for msal-react peer dependency update
.pipelines/templates/msal-react-compat-e2e.yml New/updated matrix pipeline template for React version compatibility runs
.pipelines/3p-e2e.yml Wire up the new compat template into 3P E2E pipeline
Comments suppressed due to low confidence (3)

.pipelines/templates/msal-react-compat-e2e.yml:30

  • The compatibility matrix includes React 16, but the samples being tested depend on MUI v5, which (per package-lock) declares peerDependencies requiring React ^17/^18/^19. Running the E2E jobs with React 16 is therefore expected to hit peer dependency resolution issues unless additional dependency adjustments are made. Consider removing React 16 from the default matrix for these samples, or splitting the matrix so React 16 is only used with samples/dependency sets that actually support it.
    .pipelines/templates/msal-react-compat-e2e.yml:94
  • The override step sets react/react-dom/@types/* overrides at the repo root and reruns npm install. The repo currently uses @testing-library/react@16.3.0, which has peerDependencies on React 18/19 (see package-lock), so forcing React 16/17 is likely to cause npm install resolution failures. Consider scoping the overrides to the sample workspace only, or also overriding dev/test dependencies (e.g., @testing-library/react) to versions compatible with the targeted React major for these compatibility jobs.
    .pipelines/templates/msal-react-compat-e2e.yml:145
  • The screenshot folder creation uses backslashes in the path (replace(..., '/', '\') plus \test\...). On linux agents (the default in this template), backslashes are treated as literal characters, so this will create a different directory than later steps reference (which use forward slashes). Consider using $(samplePath)/test/screenshots/react${{ rv.version }} on linux and a separate windows-specific path if needed.

hectormmg
hectormmg previously approved these changes Mar 23, 2026
peterzenz
peterzenz previously approved these changes Mar 23, 2026
Copy link
Copy Markdown
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

Copilot reviewed 122 out of 126 changed files in this pull request and generated 10 comments.

Copy link
Copy Markdown
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

Copilot reviewed 119 out of 123 changed files in this pull request and generated 11 comments.

hectormmg
hectormmg previously approved these changes Mar 25, 2026
Comment on lines +18 to +34
## Updated React version support
MSAL React v5 supports React 18.0.0 or greater and React 19.2.1 or greater. It no longer supports React 16 or 17.
MSAL React v5 supports React 16.8.0 or greater through React 19.x. This includes React 16 (16.8+), 17, 18, and 19.

## Peer dependency ranges

MSAL React v5 declares its `react` peer dependency as `"^18.0.0 || ^19.2.1"`. This means:
MSAL React v5 declares its `react` peer dependency as `">=16.8.0 <20.0.0"`. This means:

- Applications using React 18.x will satisfy the peer dependency without errors or warnings.
- Applications using React 19.2.1 or newer (within the React 19.x line) will satisfy the peer dependency without errors or warnings.
- No `--legacy-peer-deps` flag is required for either version.
- Applications using React 16.8 or newer (including 17.x, 18.x, and 19.x) will satisfy the peer dependency without errors or warnings.
- No `--legacy-peer-deps` flag is required for any supported version.

### Known considerations

- **`@types/react`**: If you use TypeScript, install the `@types/react` version matching your React major version (`@types/react@^18` for React 18, `@types/react@^19` for React 19). Both are compatible with the MSAL React v5 public API surface.
- **`@testing-library/react`**: v14+ supports React 18; v16+ supports both React 18 and 19. Choose the version that matches your React version.
- **`react-dom`**: Install the same major version of `react-dom` as `react` (e.g., `react-dom@^18` with `react@^18`).
- **React 16/17 note**: React hooks are required. Minimum supported version is React 16.8.0.
- **`@types/react`**: If you use TypeScript, install the `@types/react` version matching your React major version (`@types/react@^16` for React 16, `@types/react@^17` for React 17, `@types/react@^18` for React 18, `@types/react@^19` for React 19). All are compatible with the MSAL React v5 public API surface.
- **`@testing-library/react`**: v12 supports React 16/17; v14+ supports React 18; v16+ supports both React 18 and 19. Choose the version that matches your React version.
- **`react-dom`**: Install the same major version of `react-dom` as `react` (e.g., `react-dom@^16` with `react@^16`).
- **Rendering API**: React 16 and 17 use `ReactDOM.render()`. React 18+ uses `createRoot()`. MSAL React itself does not call either API — your application chooses the rendering method.
Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think all of this can actually just be removed from the migration guide as there's no longer a breaking change between v4 and v5

lalimasharda
lalimasharda previously approved these changes Mar 25, 2026
tnorling
tnorling previously approved these changes Mar 25, 2026
@jo-arroyo jo-arroyo dismissed stale reviews from tnorling and lalimasharda via 2c0355a March 25, 2026 21:51
@jo-arroyo jo-arroyo merged commit 29f55fa into dev Mar 26, 2026
7 checks passed
@jo-arroyo jo-arroyo deleted the feature/react-16-17-support branch March 26, 2026 04:23
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

6 participants