Upgrade to React 18.2.0 #43
Conversation
- Upgrade React and React DOM to version 18.2.0 in package.json and package-lock.json. - Fix minor type errors - Add patches for @blueprintjs/core and @blueprintjs/select to support children prop in TypeScript definitions.
|
Important Review skippedDraft detected. Please check the settings in the CodeRabbit UI or the You can disable this status message by setting the WalkthroughThis update includes a package version bump, dependency upgrades (notably React 17 to 18), and dependency removals/additions in Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant TimePanelComponent
participant RoamAPI
User->>TimePanelComponent: Render via command palette
TimePanelComponent->>RoamAPI: Get current page UID
RoamAPI-->>TimePanelComponent: Return UID or fallback
TimePanelComponent->>RoamAPI: Create block with "time-field" under page UID
RoamAPI-->>TimePanelComponent: Return block UID
TimePanelComponent->>User: Display TimePanel UI with selected time
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~15 minutes Poem
✨ Finishing Touches🧪 Generate unit tests
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 3
🧹 Nitpick comments (2)
src/components/ConfigPanels/OauthPanel.tsx (1)
30-31: Good type safety improvement, but remove redundant cast.The explicit event typing is excellent for type safety. However, the cast
(e.target as HTMLInputElement)on line 31 is now redundant since the parameter is already correctly typed.Consider this simplification:
- (e: React.ChangeEvent<HTMLInputElement>) => { - const checked = (e.target as HTMLInputElement).checked; + (e: React.ChangeEvent<HTMLInputElement>) => { + const checked = e.target.checked;src/components.tsx (1)
231-231: Remove console.log statement.Debug logging should be removed from production code.
- console.log(currentPageUid);
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
package-lock.jsonis excluded by!**/package-lock.json
📒 Files selected for processing (9)
package.json(5 hunks)patches/@blueprintjs+core+3.50.4.patch(1 hunks)patches/@blueprintjs+select+3.18.6.patch(1 hunks)src/components.tsx(3 hunks)src/components/BlockErrorBoundary.tsx(1 hunks)src/components/ComponentContainer.tsx(1 hunks)src/components/ConfigPanels/OauthPanel.tsx(1 hunks)src/components/CursorMenu.tsx(1 hunks)src/components/MenuItemSelect.tsx(2 hunks)
🔇 Additional comments (12)
src/components/CursorMenu.tsx (1)
150-150: LGTM! Excellent type safety improvement.The explicit typing of the
itemparameter enhances type safety and is consistent with the component's generic design andProps<T>interface.src/components/BlockErrorBoundary.tsx (1)
4-8: LGTM! Proper children prop typing.Making the
childrenprop explicit in the interface is excellent for type safety and aligns with React 18 best practices. The component was already usingthis.props.children, so this change makes the interface accurately reflect the actual usage.patches/@blueprintjs+select+3.18.6.patch (1)
9-9: LGTM! Necessary React 18 compatibility patch.Adding the optional
childrenprop to the BlueprintJS Select interface is essential for React 18 compatibility and follows standard React component patterns. The optional nature ensures backward compatibility.src/components/MenuItemSelect.tsx (2)
2-7: LGTM! Good import addition for improved UX.Adding the
isCreateNewItemimport supports the logic improvement below for better user experience.
46-46: LGTM! Excellent UX improvement.The additional
!isCreateNewItem(activeItem)check prevents displaying the "create new item" placeholder text as the button text, which would be confusing to users. This ensures the button shows either the actual selected item or the appropriate placeholder text.src/components/ComponentContainer.tsx (1)
11-12: LGTM! Clean implementation of explicit children typing.The addition of optional
children?: React.ReactNodeprop and its proper usage in the component aligns perfectly with React 18 best practices and improves type safety.Also applies to: 40-40
package.json (3)
4-4: Version bump follows proper semver for React upgrade.The alpha version increment is appropriate for this major React upgrade.
81-92: BlueprintJS overrides ensure React 18 compatibility.The overrides section properly forces BlueprintJS packages to use React 18.2.0, preventing version conflicts.
71-71: dotenv Dependency Usage Confirmeddotenv is only imported and invoked in build scripts (e.g. scripts/publishToRoamDepot.ts) to load environment variables for tooling. Runtime code merely references
process.envand relies on the bundler or host environment—so keeping dotenv as a devDependency is correct.• scripts/publishToRoamDepot.ts – imports and calls
dotenv.config()
• All other references toprocess.envoccur in source files (env.ts, runExtension.ts, components) and testsNo changes required.
patches/@blueprintjs+core+3.50.4.patch (1)
1-49: Essential patch for React 18 compatibility.This patch correctly adds explicit
children?: React.ReactNodeproperties to BlueprintJS deprecated interfaces, which is necessary since React 18 removed implicit children fromReact.FC. The patch ensures backward compatibility while maintaining type safety.src/components.tsx (2)
15-15: TimePanel component properly imported and exported.The import and export of TimePanel component maintains consistency with the existing pattern.
Also applies to: 274-274
218-258: TimePanel component demo implementation looks solid.The overall structure and React patterns are correct. The component properly handles async operations, loading states, and component composition.
| "@types/react": "18.2.0", | ||
| "@types/react-dom": "18.2.0", |
There was a problem hiding this comment.
💡 Verification agent
🧩 Analysis chain
React and TypeScript definitions upgraded consistently.
The upgrade to React 18.2.0 with matching TypeScript definitions is properly coordinated.
Also applies to: 43-44
🌐 Web query:
Is React 18.2.0 the latest stable version of React, and are there any known security vulnerabilities?
💡 Result:
As of August 3, 2025, the latest stable version of React is 19.1.0, released on March 28, 2025. (github.com) React 18.2.0, released on June 14, 2022, is not the latest stable version.
Regarding security vulnerabilities, Snyk reports that the latest version, 19.1.1, has no known vulnerabilities. (security.snyk.io) However, earlier versions, such as 0.0.1 to 0.13.0, have been identified with cross-site scripting (XSS) vulnerabilities. It's important to note that these vulnerabilities are present in older versions and have been addressed in subsequent releases.
Therefore, to ensure your application remains secure, it's recommended to use the latest stable version of React, which currently is 19.1.0.
Citations:
- 1: https://github.com/facebook/react/releases?utm_source=openai
- 2: https://security.snyk.io/package/npm/react?utm_source=openai
Upgrade React and TypeScript definitions to latest stable (19.1.0)
React 18.2.0 is no longer the latest stable release. As of August 2025, React 19.1.0 is the current stable version with no known security vulnerabilities. Please update both React and its TypeScript definitions to keep dependencies secure and up-to-date.
Areas to update in package.json:
- Lines 29–30 (
"@types/react","@types/react-dom") - Lines 43–44 (
"react","react-dom")
Suggested diff:
- "react": "18.2.0",
- "react-dom": "18.2.0",
+ "react": "19.1.0",
+ "react-dom": "19.1.0",
- "@types/react": "18.2.0",
- "@types/react-dom": "18.2.0",
+ "@types/react": "19.1.0",
+ "@types/react-dom": "19.1.0",📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| "@types/react": "18.2.0", | |
| "@types/react-dom": "18.2.0", | |
| // … other dependencies … | |
| "react": "19.1.0", | |
| "react-dom": "19.1.0", | |
| // … other devDependencies … | |
| "@types/react": "19.1.0", | |
| "@types/react-dom": "19.1.0", | |
| // … |
🤖 Prompt for AI Agents
In package.json around lines 29 to 30 and 43 to 44, update the versions of
"@types/react" and "@types/react-dom" from "18.2.0" to "19.1.0", and also update
"react" and "react-dom" dependencies to version "19.1.0". This ensures both
React and its TypeScript definitions are upgraded to the latest stable release.
| React.useEffect(() => { | ||
| const createUid = async () => { | ||
| const currentPageUid = | ||
| (await window.roamAlphaAPI.ui.mainWindow.getOpenPageOrBlockUid()) || | ||
| window.roamAlphaAPI.util.dateToPageUid(new Date()); | ||
|
|
||
| if (!currentPageUid) throw new Error("No current page uid"); | ||
| console.log(currentPageUid); | ||
| const newUid = await createBlock({ | ||
| parentUid: currentPageUid, | ||
| node: { text: "time-field" }, | ||
| }); | ||
| setUid(newUid); | ||
| }; | ||
| createUid(); | ||
| }, []); |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Add error handling for block creation.
The async block creation should handle potential failures gracefully.
React.useEffect(() => {
const createUid = async () => {
+ try {
const currentPageUid =
(await window.roamAlphaAPI.ui.mainWindow.getOpenPageOrBlockUid()) ||
window.roamAlphaAPI.util.dateToPageUid(new Date());
if (!currentPageUid) throw new Error("No current page uid");
const newUid = await createBlock({
parentUid: currentPageUid,
node: { text: "time-field" },
});
setUid(newUid);
+ } catch (error) {
+ console.error("Failed to create block:", error);
+ // Consider setting an error state or fallback behavior
+ }
};
createUid();
}, []);📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| React.useEffect(() => { | |
| const createUid = async () => { | |
| const currentPageUid = | |
| (await window.roamAlphaAPI.ui.mainWindow.getOpenPageOrBlockUid()) || | |
| window.roamAlphaAPI.util.dateToPageUid(new Date()); | |
| if (!currentPageUid) throw new Error("No current page uid"); | |
| console.log(currentPageUid); | |
| const newUid = await createBlock({ | |
| parentUid: currentPageUid, | |
| node: { text: "time-field" }, | |
| }); | |
| setUid(newUid); | |
| }; | |
| createUid(); | |
| }, []); | |
| React.useEffect(() => { | |
| const createUid = async () => { | |
| try { | |
| const currentPageUid = | |
| (await window.roamAlphaAPI.ui.mainWindow.getOpenPageOrBlockUid()) || | |
| window.roamAlphaAPI.util.dateToPageUid(new Date()); | |
| if (!currentPageUid) throw new Error("No current page uid"); | |
| console.log(currentPageUid); | |
| const newUid = await createBlock({ | |
| parentUid: currentPageUid, | |
| node: { text: "time-field" }, | |
| }); | |
| setUid(newUid); | |
| } catch (error) { | |
| console.error("Failed to create block:", error); | |
| // Consider setting an error state or fallback behavior | |
| } | |
| }; | |
| createUid(); | |
| }, []); |
🤖 Prompt for AI Agents
In src/components.tsx around lines 224 to 239, the async function createUid does
not handle errors from the createBlock call, which may cause unhandled promise
rejections. Wrap the createBlock call and subsequent setUid in a try-catch block
to catch any errors, and handle them appropriately, such as logging the error or
showing a user-friendly message, to ensure graceful failure.
| <TimePanel | ||
| title="time-field" | ||
| uid={uid} | ||
| parentUid="test-parent-uid" |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Replace hardcoded test value with dynamic or configurable value.
The hardcoded "test-parent-uid" appears to be a placeholder and should be replaced with a proper dynamic value or made configurable.
- parentUid="test-parent-uid"
+ parentUid={currentPageUid}📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| parentUid="test-parent-uid" | |
| parentUid={currentPageUid} |
🤖 Prompt for AI Agents
In src/components.tsx at line 249, replace the hardcoded string
"test-parent-uid" with a dynamic value passed as a prop or derived from
component state or context. Alternatively, make it configurable via component
props or environment variables to avoid using a fixed placeholder.
We can now
rm node_modulesandrm package-lock.jsonthennpm iwithout--legacy-peer-deps.NOTE: Only the Blueprint Components used in roamjs-components were patched.
npm ls reactSummary by CodeRabbit
New Features
Bug Fixes
Refactor
Chores