Skip to content

Bump react-intl to v10 #288

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
bradenmacdonald wants to merge 3 commits into
base: main
Choose a base branch
from
Open

Bump react-intl to v10 #288

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
3b7dd23
chore: bump react-intl to v10. Removes deprecated `injectIntl`+`intlS…
bradenmacdonald Aug 13, 2026
f2c8523
chore: fix a TypeScript error
bradenmacdonald Aug 13, 2026
a9780b6
fix: address review comments
bradenmacdonald Aug 21, 2026
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
348 changes: 57 additions & 291 deletions package-lock.json
View file
Open in desktop

Large diffs are not rendered by default.

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 @@ -116,7 +116,7 @@
"prop-types": "^15.8.1",
"react-dev-utils": "12.0.1",
"react-focus-on": "^3.10.2",
"react-intl": "^6.6.6",
"react-intl": "^10.1.20",
"react-refresh": "0.18.0",
"react-refresh-typescript": "^2.0.9",
"react-responsive": "^10.0.0",
Expand Down Expand Up @@ -160,7 +160,7 @@
"nodemon": "^3.1.4"
},
"peerDependencies": {
"@openedx/paragon": "^23.20.0",
"@openedx/paragon": "^23.22.2",

@arbrandes arbrandes Aug 20, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Paragon only started allowing react-intl 10 in 23.23.0, I think.

@bradenmacdonald bradenmacdonald Aug 21, 2026

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

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

Paragon only started allowing react-intl 10 in 23.23.0, I think.

And I should have known that, since it was my PR 😛 . Fixed! Thank you.

"@tanstack/react-query": "^5.81.2",
"react": "^18.3.1",
"react-dom": "^18.3.1",
Expand Down
72 changes: 5 additions & 67 deletions runtime/i18n/index.js → runtime/i18n/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,66 +23,6 @@
*
*/

/**
* @name createIntl
* @kind function
* @see {@link https://formatjs.io/docs/react-intl/api#createIntl Intl}
*/

/**
* @name FormattedDate
* @kind class
* @see {@link https://formatjs.io/docs/react-intl/components/#formatteddate Intl}
*/

/**
* @name FormattedTime
* @kind class
* @see {@link https://formatjs.io/docs/react-intl/components/#formattedtime Intl}
*/

/**
* @name FormattedRelativeTime
* @kind class
* @see {@link https://formatjs.io/docs/react-intl/components/#formattedrelativetime Intl}
*/

/**
* @name FormattedNumber
* @kind class
* @see {@link https://formatjs.io/docs/react-intl/components/#formattednumber Intl}
*/

/**
* @name FormattedPlural
* @kind class
* @see {@link https://formatjs.io/docs/react-intl/components/#formattedplural Intl}
*/

/**
* @name FormattedMessage
* @kind class
* @see {@link https://formatjs.io/docs/react-intl/components/#formattedmessage Intl}
*/

/**
* @name IntlProvider
* @kind class
* @see {@link https://formatjs.io/docs/react-intl/components/#intlprovider Intl}
*/

/**
* @name defineMessages
* @kind function
* @see {@link https://formatjs.io/docs/react-intl/api#definemessagesdefinemessage Intl}
*/

/**
* @name useIntl
* @kind function
* @see {@link https://formatjs.io/docs/react-intl/api#useIntl Intl}
*/

export {
createIntl,
defineMessages,
Expand All @@ -93,7 +33,10 @@ export {
FormattedRelativeTime,
FormattedTime,
IntlProvider,
useIntl
useIntl,
type IntlConfig,
type ResolvedIntlConfig,
type IntlShape,
} from 'react-intl';

export {
Expand All @@ -104,14 +47,9 @@ export {
getPrimaryLanguageSubtag,
getSupportedLanguageList,
handleRtl,
intlShape,

@arbrandes arbrandes Aug 20, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

runtime/i18n/lib.ts still declares it. Worth deleting there too, along with the then-unused prop-types import at the top.

@bradenmacdonald bradenmacdonald Aug 21, 2026

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

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

Ah good catch. Done.

isRtl,
LOCALE_CHANGED,
LOCALE_TOPIC,
mergeMessages,
updateLocale
updateLocale,
} from './lib';

export {
default as injectIntl
} from './injectIntlWithShim';
48 changes: 0 additions & 48 deletions runtime/i18n/injectIntlWithShim.jsx
View file
Open in desktop

This file was deleted.

7 changes: 4 additions & 3 deletions runtime/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -67,15 +67,16 @@ export {
getPrimaryLanguageSubtag,
getSupportedLanguageList,
handleRtl,
injectIntl,
IntlProvider,
intlShape,
isRtl,
LOCALE_CHANGED,
LOCALE_TOPIC,
mergeMessages,
updateLocale,
useIntl
useIntl,
type IntlConfig,
type ResolvedIntlConfig,
type IntlShape,
} from './i18n';

export {
Expand Down
2 changes: 1 addition & 1 deletion runtime/jest.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ module.exports = {
'<rootDir>/setupTest.js',
],
transformIgnorePatterns: [
'/node_modules/(?!(@openedx|@edx)/)',
'/node_modules/(?!(@openedx|@edx|react-intl|@formatjs|intl-messageformat)/)',
],
modulePathIgnorePatterns: [
'/dist/',
Expand Down
2 changes: 2 additions & 0 deletions shell/header/helpButtonSlotOperation.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,8 @@ describe('helpButtonSlotOperation', () => {
mergeAppConfig(TEST_APP_ID, { SUPPORT_URL: 'https://help.example.com/test' });

const op = helpButtonSlotOperation({ appId: TEST_APP_ID, role: TEST_ROLE });
// The following is for TypeScript, since `WidgetRendererProps` sometimes has 'element' and sometimes 'component'.
if (!('element' in op)) throw new Error(`Expected ${op} to have an 'element'.`);

@bradenmacdonald bradenmacdonald Aug 13, 2026

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

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

This fix is totally unrelated, but npm run dev wasn't working until I fixed this. I think our CI is not properly checking the shell for TypeScript errors!

@arbrandes arbrandes Aug 20, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Nice catch! #294

Otherwise, ${op} renders as [object Object], so... JSON.stringify(op)?

@bradenmacdonald bradenmacdonald Aug 21, 2026

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

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

Thanks for creating the issue. I've updated this to JSON.stringify().

expect(isValidElement(op.element)).toBe(true);

const getUrl = (op.element as React.ReactElement<{ getUrl: () => string | undefined }>).props.getUrl;
Expand Down
2 changes: 1 addition & 1 deletion shell/jest.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ module.exports = {
'setupTest.js',
],
transformIgnorePatterns: [
'/node_modules/(?!(@openedx|@edx)/)',
'/node_modules/(?!(@openedx|@edx|react-intl|@formatjs|intl-messageformat)/)',
],
testPathIgnorePatterns: [
'/site.config.test.tsx',
Expand Down
2 changes: 1 addition & 1 deletion tools/jest.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ module.exports = {
'cli/**/*.{js,jsx,ts,tsx}',
],
transformIgnorePatterns: [
'/node_modules/(?!(@openedx|@edx)/)',
'/node_modules/(?!(@openedx|@edx|react-intl|@formatjs|intl-messageformat)/)',
],
modulePathIgnorePatterns: [
'/dist/',
Expand Down
2 changes: 1 addition & 1 deletion tools/jest/jest.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ module.exports = {
'/node_modules/',
],
transformIgnorePatterns: [
'/node_modules/(?!(@openedx|@edx)/)',
'/node_modules/(?!(@openedx|@edx|react-intl|@formatjs|intl-messageformat)/)',
],
modulePathIgnorePatterns: [
'/dist/',
Expand Down