UI improvements based on UX review:
- Replace textarea with TipTap rich text editor
- Add mic button in editor toolbar (collapsible recorder)
- Remove duplicate type selection (keep only quick action buttons)
- Remove redundant "Nieuwe rapportage:" label
- Add streaming highlight on editor border during recording
- Extend RichTextEditor with toolbarExtra, isStreaming props
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Root cause analysis:
- Next.js 16 Server/Client Component boundary issue
- Webpack module chunking fails with named exports from Client Components
- Error: "Cannot read properties of undefined (reading 'call')"
Solution:
- Created release-sidebar-wrapper.tsx to isolate import boundary
- Server Component (layout.tsx) now imports via wrapper
- Wrapper uses default export, which webpack handles better
Technical details:
- Server Component -> direct import -> Client Component = module undefined
- Wrapper component breaks the problematic import chain
- Default exports handle webpack chunking more reliably than named exports
Documentation:
- Added comprehensive troubleshooting guide
- Documents 4 solution approaches
- Lists best practices to prevent future occurrences
- Identifies other potential problem areas in codebase
Files changed:
- app/(marketing)/releases/layout.tsx (import via wrapper)
- app/(marketing)/releases/components/release-sidebar-wrapper.tsx (new)
- docs/troubleshooting/webpack-module-resolution-error.md (new)
Related: This is a known Next.js 15-16 issue with Server/Client boundaries
