Upgrade spec/dummy to React 19

[justin808]

Summary

• Upgraded React and React-DOM to version 19.0.0
• Removed separate @types packages as React 19 includes built-in TypeScript types
• Tests pass successfully with the CSS module fix from the parent PR

Why React 19 works now

The issue wasn't React 19 itself - it was the CSS module import syntax. With the fix applied in the parent PR (changing from default import to namespace import for CSS modules), React 19 works perfectly.

Test Results

..
Finished in 4.11 seconds
2 examples, 0 failures

Both the SSR and client-side rendering work correctly with React 19.

🤖 Generated with Claude Code

[coderabbitai]

Important

Review skipped

Auto reviews are disabled on base/target branches other than the default branch.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

✨ Finishing touches

🧪 Generate unit tests

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch upgrade-to-react-19

---

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 and usage tips.}

[claude]

PR Review: Upgrade to React 19

✅ Overall Assessment

This PR successfully upgrades the spec/dummy application from React 18 to React 19, demonstrating a clean and minimal migration approach.

🎯 Code Quality and Best Practices

Strengths:

• Clean migration: The PR correctly removes the separate @types/react and @types/react-dom packages, as React 19 now includes built-in TypeScript types
• Minimal changes: Only the necessary dependencies are modified, showing a focused approach
• Proper version alignment: Both react and react-dom are upgraded to the same major version (19.0.0)

Observations:

• The TypeScript configuration in tsconfig.json uses "jsx": "react" which is compatible with React 19
• The existing component code using hooks and TypeScript interfaces appears to be compatible without modifications

🐛 Potential Issues

1. Version specificity: The PR uses ^19.0.0 which will accept any 19.x version. Consider using exact versions for test applications to ensure consistency:

   "react": "19.0.0",
   "react-dom": "19.0.0"

2. Breaking changes awareness: React 19 includes several breaking changes that should be documented:

   • Removed deprecated APIs (PropTypes, defaultProps on function components)
   • Changes to Suspense behavior
   • StrictMode behavioral changes

⚡ Performance Considerations

React 19 includes performance improvements:

• Better automatic batching
• Improved Suspense handling
• Optimized reconciliation

The PR correctly maintains the existing code structure, allowing these improvements to be leveraged automatically.

🔒 Security Concerns

No security issues identified. The upgrade moves to a newer, actively maintained version of React which includes security patches.

✅ Test Coverage

According to the PR description, tests pass successfully:

Finished in 4.11 seconds
2 examples, 0 failures

Both SSR and client-side rendering are confirmed working.

📋 Recommendations

1. Add migration notes: Consider adding a comment in the package.json or README about React 19 requirements for future reference

2. Verify parent PR compatibility: Ensure the CSS module fix mentioned in the parent PR is properly integrated

3. Document TypeScript changes: Since React 19 includes built-in types, document this change for developers who might expect separate @types packages

4. Consider adding React 19 feature tests: While existing tests pass, consider adding tests for React 19-specific features to ensure full compatibility

✨ Conclusion

This is a well-executed upgrade that follows best practices for dependency management. The removal of separate type packages is the correct approach for React 19, and the minimal changeset reduces the risk of introducing bugs. The PR is ready for merge once the parent PR's CSS module fix is confirmed.

Great work on keeping the upgrade focused and clean! 🚀

🤖 Generated with Claude Code

[claude]

Code Review for PR #598: Upgrade spec/dummy to React 19

✅ Overall Assessment

This PR successfully upgrades React from v18.3.1 to v19.0.0. The changes are clean, minimal, and well-tested. All CI checks are passing, including tests across multiple Ruby and Rails versions.

📋 Code Quality & Best Practices

• Good: Correctly removed @types/react and @types/react-dom packages since React 19 includes built-in TypeScript types
• Good: The upgrade is isolated to the spec/dummy test application, reducing risk
• Good: Clean dependency updates with proper lockfile regeneration

🔍 Potential Issues

• Minor: The react-on-rails package (v13.3.2) was released before React 19. While tests are passing, consider verifying full compatibility or checking for a newer version that explicitly supports React 19
• Minor: The prop-types package is still included despite React 19 further de-emphasizing PropTypes. This is likely fine for backward compatibility but could be removed if not actively used

⚡ Performance Considerations

• React 19 includes performance improvements like automatic batching enhancements and improved hydration
• The removal of separate TypeScript type packages reduces bundle size slightly
• No performance regressions expected based on the simple component structure

🔒 Security Concerns

• No security vulnerabilities introduced
• Upgrading to the latest React version includes any security patches from v18 to v19
• Dependencies properly locked with package-lock.json

✅ Test Coverage

• System tests in hello_world_spec.rb provide good coverage for the React component functionality
• Tests verify both SSR and client-side rendering
• All CI checks passing across multiple environments (Ruby 2.7-3.4, Rails 6.0-8.0, Node 18-22)
• The PR description confirms tests pass with the CSS module fix from the parent PR

💡 Recommendations

1. Consider adding a comment in package.json noting React 19 compatibility was tested with react-on-rails v13.3.2
2. Monitor for any react-on-rails updates that explicitly support React 19
3. If prop-types is not actively used in the codebase, consider removing it in a follow-up PR

✨ Summary

This is a well-executed upgrade with appropriate testing and minimal risk. The changes are focused and the successful CI runs across multiple environments provide confidence in the compatibility. Approved ✅

[claude]

Code Review for PR #598: Upgrade spec/dummy to React 19

Thank you for this comprehensive upgrade of the spec/dummy application. I've reviewed the changes in detail, and here's my feedback across the requested areas:

✅ Code Quality & Best Practices

Strengths:

• Excellent implementation of dual bundler support with the test-bundler script
• Proper YAML validation and error handling in test-bundler (lines 73-86)
• Good use of safe YAML loading with explicit parameters for security
• Clean separation of webpack/rspack configurations

Minor Issues:

• Missing final newline: rspack.config.js needs a newline at EOF (already fixed in commit cb5ef7f)
• TypeScript types mismatch: Using React 18 types with React 19 runtime in package.json could lead to type inconsistencies

🔒 Security Considerations

Good practices observed:

• Using YAML.safe_load_file with explicit permitted classes (test-bundler lines 18-24, 75-81)
• No hardcoded credentials or sensitive data
• Proper use of environment variables for configuration

Recommendations:

• Consider pinning exact versions for critical dependencies instead of using ^ to avoid unexpected security updates
• The dual bundler setup increases attack surface - ensure both webpack and rspack configs have equivalent security settings

⚡ Performance Implications

Positive changes:

• RSpack integration provides significantly faster build times for development
• Upgrading to React 19 includes performance improvements in the reconciler
• Node.js requirement updated to >=18.0.0, enabling modern V8 optimizations

Concerns:

• Large package-lock.json (8700+ lines) indicates significant dependency bloat
• Having both webpack and rspack dependencies installed increases bundle size
• Consider implementing conditional dependency installation based on chosen bundler

🧪 Test Coverage

Good additions:

• New CI workflow for testing both bundlers in parallel (.github/workflows/test-bundlers.yml)
• Test switching capability between bundlers

Issues identified:

• Tests were temporarily disabled and then re-enabled - ensure all test scenarios are fully covered
• No explicit tests for React 19 specific features or breaking changes
• Consider adding performance benchmarks comparing webpack vs rspack builds

📝 Additional Observations

1. CSS Module Import Issue: The fix for CSS module imports (import * as style) works but indicates a deeper configuration mismatch. The TODO_v9.md correctly identifies this as needing proper resolution in v9.

2. Documentation: Great README updates explaining dual bundler support, but consider adding:

   • Migration guide for users upgrading from React 18 to 19
   • Performance comparison data between webpack and rspack
   • Troubleshooting section for common React 19 issues

3. Dependencies:

   • Removing @types/react while using React 19's built-in types is correct
   • Consider whether maintaining both Hotwire gems and React is necessary for the test app

4. Breaking Changes Risk: While React 19 is marked stable, it's relatively new. Consider:

   • Adding a fallback to React 18 option
   • More comprehensive testing of React 19 features
   • Documenting any known incompatibilities

🎯 Verdict

The PR successfully achieves its goal of upgrading to React 19 and demonstrates good engineering practices with the dual bundler support. The CSS module fix resolves the immediate rendering issue, though a more comprehensive solution is correctly deferred to v9.

Recommended before merge:

1. Align TypeScript types version with React version
2. Add explicit React 19 compatibility tests
3. Consider conditional dependency installation strategy
4. Document performance metrics for webpack vs rspack

Overall, this is a well-executed upgrade with thoughtful implementation of testing infrastructure. The dual bundler support is particularly valuable for ensuring Shakapacker's compatibility across different build tools.

[claude]

Code Review for PR #598: Upgrade spec/dummy to React 19

Summary

This PR successfully upgrades the spec/dummy test application to React 19 while modernizing the entire stack with Rails 8, dual bundler support (Webpack/RSpack), and improved testing infrastructure. The implementation is well-structured and thoughtfully executed.

✅ Strengths

1. Comprehensive Modernization: The PR doesn't just upgrade React - it modernizes the entire test stack:

   • Rails 6.1 → 8.0.3
   • React 18.3.1 → 19.0.0
   • react_on_rails 13.3.3 → 16.1
   • Yarn → npm 10.9.0
   • Ruby 3.1.2 → 3.2

2. Excellent Dual Bundler Support: The test-bundler script is well-implemented with:

   • Clear switching mechanism between Webpack and RSpack
   • YAML validation before copying configs
   • Good error handling and user feedback
   • Status command for checking current configuration

3. Strong CI/CD Setup: Three parallel CI jobs ensure robust testing:

   • test-webpack: Tests with Webpack
   • test-rspack: Tests with RSpack
   • test-switching: Validates bundler switching

4. Problem-Solving Approach: Successfully resolved the CSS modules import issue that was blocking React component rendering. The fix (import * as style) correctly matches the webpack configuration.

5. Good Documentation: Comprehensive README updates and TODO_v9.md tracking future improvements.

🔍 Observations & Suggestions

1. TypeScript Types: React 19 includes built-in TypeScript types, so removing @types/react and @types/react-dom is correct. Good cleanup!

2. Package Manager Migration: The switch from Yarn to npm is well-executed with:

   • Removal of yarn.lock
   • Addition of package-lock.json
   • packageManager field in package.json specifying npm@10.9.0

3. CSS Modules Configuration: The TODO_v9.md correctly identifies the need to address CSS module warnings in v9. The current workaround (import * as style) works but the proper fix would be updating css-loader configuration.

⚠️ Minor Issues

1. Removed Testing Gems: The removal of listen, spring, and spring-watcher-listen is fine for Rails 8, but ensure development experience isn't degraded without file watching capabilities.

2. Node Version Requirement: Changed to >=18.0.0 which is appropriate for modern tooling.

🚀 Performance Considerations

• RSpack support provides faster build times for development
• React 19's improvements (automatic batching, improved SSR) should benefit the application
• Removal of unnecessary Hotwire gems reduces bundle size

🔒 Security

• Using YAML.safe_load_file in test-bundler script ✅
• Proper Ruby version upgrade for Rails 8 security patches ✅
• All dependencies appear to be recent versions without known vulnerabilities

📊 Test Coverage

• Tests properly validate both SSR and client-side rendering
• Good coverage of bundler switching functionality
• CI ensures both bundlers work correctly

Recommendations

1. Consider adding a comment in HelloWorld.tsx explaining why import * as style is used (temporary workaround until v9)
2. The TODO_v9.md is excellent for tracking technical debt - ensure it's referenced in the main project roadmap
3. Consider adding integration tests that specifically validate React 19 features like automatic batching

Conclusion

This is a high-quality PR that successfully achieves its goals. The upgrade to React 19 is working correctly, and the additional modernization improvements (Rails 8, dual bundler support, npm migration) add significant value. The code is clean, well-tested, and properly documented.

The CSS module import issue was handled pragmatically with a working solution and proper documentation of the future improvement needed for v9.

Verdict: Approved ✅

Great work on this comprehensive upgrade! The attention to detail and thorough testing approach are commendable.