Upgrade main dependencies to newest major versions and fix widget build system

[Copilot]

This PR upgrades all major dependencies to their newest major versions as requested in the issue, bringing the codebase up to date with modern tooling and improving security, performance, and developer experience.

Major Upgrades Completed

Framework & Core Libraries

• React: ^17.0.2 → ^19.1.1 (latest major)
• React DOM: ^17.0.2 → ^19.1.1
• Next.js: ^12.1.0 → ^15.4.6 (latest major)
• TypeScript: ^4.4.3 → ^5.9.2 (latest major)

Development Tools

• ESLint: ^7.32.0 → ^8.57.1 (latest stable major)
• Sass: ^1.43.4 → ^1.90.0
• fs-extra: ^10.0.0 → ^11.3.1

Component Libraries & Utilities

• Monaco Editor React: ^4.3.1 → ^4.7.0 (React 19 compatible)
• React Markdown: ^7.1.0 → ^10.1.0 (React 19 compatible)
• React Syntax Highlighter: ^15.4.5 → ^15.6.1
• rehype-raw: ^6.1.0 → ^7.0.0 (compatibility update)
• copy-text-to-clipboard: ^3.2.0 (replaced react-copy-to-clipboard for React 19 compatibility)

Type Definitions

• @types/node: ^17.0.27 → ^22.0.0
• @types/react: ^17.0.27 → ^19.0.2
• @types/react-dom: ^17.0.11 → ^19.0.2

Breaking Changes Addressed

React 19 Migration

• Migrated from deprecated ReactDOM.render to createRoot API in widget system
• Fixed useRef typing to require initial values (React 19 strictness)
• Updated React element props typing for strict mode compatibility
• Fixed component children prop access patterns
• Replaced react-copy-to-clipboard: The original library doesn't support React 19 due to peer dependency constraints. Replaced with modern copy-text-to-clipboard library that provides the same functionality without React dependencies.

Next.js 15 Updates

• Updated widget build script to use new loadConfig API signature
• Fixed Monaco Editor import paths for new module structure
• Updated ESLint configuration for Next.js 15 compatibility
• Fixed widget build script: Made defensive against missing static asset directories (chunks, media) that may not be generated in Next.js 15

TypeScript 5 Compatibility

• Resolved strict type checking issues with React component props
• Updated callback function parameter typing
• Fixed implicit any type errors

Widget Build System Fixes

The widget build system required significant updates to work with the upgraded dependencies:

Webpack Compilation Result Handling

Fixed the runCompiler result handling in widgets/build.js to properly destructure the compilation result array:

// Before: const result = await runCompiler(webpackConfig, { runWebpackSpan })
// After: const [result] = await runCompiler(webpackConfig, { runWebpackSpan })

This change enables proper error reporting and webpack stats access in Next.js 15.

Module Resolution

Added comprehensive webpack aliases to resolve import paths that were broken by Next.js 15 changes:

• components → ./components
• hooks → ./hooks
• apis → ./apis
• utils → ./utils
• public → ./public

TypeScript Compilation

Updated the widget TypeScript compilation to use ES6 target with proper library support:

tsc loader.ts --target es6 --lib es6,dom --skipLibCheck

SASS Import Resolution

Fixed SASS imports in widgets/host.scss to use relative paths instead of tilde notation:

// Before: @import '~utils/index.scss';
// After: @import '../utils/index.scss';

Copy-to-Clipboard Migration

The original react-copy-to-clipboard library was replaced with copy-text-to-clipboard to resolve React 19 compatibility issues:

• Before: Wrapper component with render props pattern
• After: Direct function call with modern browser Clipboard API
• Benefits: Smaller bundle size (0.2kB), no dependencies, React version agnostic
• Behavior: Identical user experience with improved reliability

Testing & Verification

✅ Build: Successfully compiles with only minor Sass deprecation warnings
✅ Lint: No ESLint errors or warnings
✅ Development: Dev server starts and runs without issues
✅ Dependencies: npm install works without peer dependency conflicts
✅ Deployment: Fixes Vercel build failures caused by dependency incompatibilities
✅ Types: TypeScript compilation clean
✅ Widget Build: Successfully builds all widgets (code, footer, header) with proper module resolution and error reporting

The application maintains full functionality while running on the latest major versions of all core dependencies. The widget build system now works correctly with Next.js 15 and provides proper error reporting for debugging.

Fixes #118.

---

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.