Fixed comments-ui iframe React type errors

[PedroMarianoAlmeida]

Why I am making it

This clears all TypeScript errors from apps/comments-ui/src/components/iframe.tsx.

The original error made it look like this.forceUpdate() was the problem, but the same pattern exists elsewhere in the codebase without triggering that error. By comparison, the missing piece in comments-ui was that the package did not declare React type dependencies locally, so TypeScript could not understand that IFrame extends React.Component and therefore has inherited members like forceUpdate and props.

What it does

Adds @types/react and @types/react-dom to comments-ui using the existing pnpm catalog, and refreshes the lockfile importer entries.

Why developers need it

This cleans up the type-checking path for comments-ui so developers see the real remaining package type issues instead of misleading React declaration and class inheritance errors in iframe.tsx.

Errors no longer present

Running node_modules/.bin/tsc -p apps/comments-ui/tsconfig.json --noEmit --pretty false no longer reports any errors from apps/comments-ui/src/components/iframe.tsx, including:

• Could not find a declaration file for module 'react'
• Could not find a declaration file for module 'react-dom'
• Property 'forceUpdate' does not exist on type 'IFrame'
• Property 'props' does not exist on type 'IFrame'
• JSX element class does not support attributes because it does not have a 'props' property
• 'IFrame' cannot be used as a JSX component

Testing

• node_modules/.bin/tsc -p apps/comments-ui/tsconfig.json --noEmit --pretty false

This still fails on existing unrelated comments-ui strict TypeScript errors, but none are in apps/comments-ui/src/components/iframe.tsx.

Checklist

• I've read and followed the Contributor Guide
• I've explained my change
• I've written an automated test to prove my change works

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: aa429fd6-0a8c-4941-ad3c-a6ee9d9cca8f

📥 Commits

Reviewing files that changed from the base of the PR and between 45e4e94 and 2c43c01.

📒 Files selected for processing (1)

• apps/comments-ui/package.json

---

Walkthrough

pnpm-workspace.yaml was updated to pin @types/react and @types/react-dom in catalogs.react17. apps/comments-ui/package.json was updated to bump the package version and add the same two packages to devDependencies using catalog:react17.

🚥 Pre-merge checks | ✅ 4

✅ Passed checks (4 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly summarizes the main change: fixing comments-ui React type errors.
Description check	✅ Passed	The description is directly related to the change and accurately explains the TypeScript fix.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with 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.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}

[nx-cloud]

🤖 Nx Cloud AI Fix

Ensure the fix-ci command is configured to always run in your CI pipeline to get automatic fixes in future runs. For more information, please see https://nx.dev/ci/features/self-healing-ci

---

View your CI Pipeline Execution ↗ for commit 45e4e94

Command	Status	Duration	Result
nx run @tryghost/admin-x-settings:test:acceptance	✅ Succeeded	10m 27s	View ↗
nx run-many --target=build --projects=tag:publi...	✅ Succeeded	2s	View ↗
nx run-many -t test:unit -p @tryghost/comments-...	✅ Succeeded	8m 31s	View ↗
nx run ghost:test:ci:integration	✅ Succeeded	2m 37s	View ↗
nx run ghost:test:integration	✅ Succeeded	2m 42s	View ↗
nx run @tryghost/admin:build	✅ Succeeded	4m 26s	View ↗
nx run ghost:test:legacy	✅ Succeeded	2m 48s	View ↗
nx run ghost:test:e2e	✅ Succeeded	2m 30s	View ↗
Additional runs (7)	✅ Succeeded	...	View ↗

💡 Verify your cache is correct by running tasks in a sandbox. Read docs ↗

---

☁️ Nx Cloud last updated this comment at 2026-06-26 16:49:22 UTC

[9larsons]

Hey, sorry for the merge noise. Concurrent /apps/ PRs all fight over the package.json version bump check in CI... we need a better solution for that.

The way you had this was going to use the React 18 types when comments is on React 17, so I made an adjustment to the catalog entries. 👍

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 74.37%. Comparing base (65d3685) to head (2c43c01).
⚠️ Report is 3 commits behind head on main.

Additional details and impacted files

@@            Coverage Diff             @@
##             main   #28935      +/-   ##
==========================================
+ Coverage   74.34%   74.37%   +0.02%     
==========================================
  Files        1559     1559              
  Lines      135002   135002              
  Branches    16403    16408       +5     
==========================================
+ Hits       100362   100402      +40     
+ Misses      33613    33573      -40     
  Partials     1027     1027              

Flag	Coverage Δ
admin-tests	55.21% <ø> (ø)
e2e-tests	76.52% <ø> (+0.03%)	⬆️

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Harness.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[PedroMarianoAlmeida]

Thanks for fixing that. I missed that comments-ui is still on the React 17 catalog, so it makes sense for the React type packages to use catalog:react17 too. Also understood on the version bump noise.