Skip to content

Commit b8874a5

Browse files
drumnationdrumnation
committed
fix(ssr): Prevent ReactFlow "self is not defined" error during SSR
Resolve build failures on Vercel caused by browser-specific code in ReactFlow components attempting to access the `self` global object during server-side rendering. This fix ensures successful builds while maintaining full React Flow functionality in the browser. Implementation includes: - Restructured ReactFlowDiagram into a server-safe wrapper and a dynamically imported client-only content component - Applied Next.js dynamic imports with `ssr: false` to ensure browser-only code never runs during server rendering - Modified PerfectFitAnalyzer to follow the same pattern - Added vercel-check script to detect similar issues during local development - Implemented git hooks for pre-commit type checking and pre-push validation This approach follows Next.js best practices for handling browser-only libraries in a server-rendered application, preventing the 16-minute Vercel build failures that weren't caught in local development.
1 parent 836aff2 commit b8874a5

File tree

12 files changed

+386
-288
lines changed

12 files changed

+386
-288
lines changed

‎.cursor/rules/agent-use-project-docs.rules.mdc‎

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
---
2+
description:
3+
globs:
4+
alwaysApply: true
5+
---
6+
# Rule: Agent Use of Project Documentation
7+
8+
## Purpose
9+
Ensure that agents actively reference existing project documentation during planning, implementation, and debugging. This reinforces architecture decisions, prevents duplication, and leverages prior domain knowledge.
10+
11+
---
12+
13+
## When to Read Docs
14+
15+
Agents MUST consult relevant documentation:
16+
17+
- Before implementing or planning a new feature
18+
- Before debugging a non-trivial issue
19+
- When using or modifying any shared component, service, or utility
20+
- When setting up a new app, package, or configuration
21+
- When unsure about naming, architecture, or design patterns
22+
23+
---
24+
25+
## What to Read
26+
27+
Agents should prioritize:
28+
29+
- `docs/features/` — Feature implementation and rationale
30+
- `docs/architecture/adr/` — Architectural decisions
31+
- `docs/concepts/` — Core patterns and abstractions
32+
- `docs/packages/[name]/` — Workspace-specific details
33+
- `README.md`, `ONBOARDING.md`, `CONTRIBUTING.md` — Setup and standards
34+
35+
Use index files (`*.index.md`) to navigate efficiently.
36+
37+
---
38+
39+
## Usage Expectations
40+
41+
- ✅ Reference relevant documents in the plan or task file
42+
- ✅ Reuse prior design decisions and avoid re-debating settled architecture
43+
- ✅ Cross-link helpful docs in responses where appropriate
44+
- ✅ Load related `.md` files into memory when working on relevant code
45+
- ✅ If unclear, run the `consult-documentation-index` process to search
46+
47+
---
48+
49+
## Related Rules
50+
51+
- @project-documentation-structure.rules.mdc
52+
- @feature-task-plan-generator.rules.mdc
53+
- @agent-self-report.rules.mdc

‎.cursorrules‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
11
# So I know you are reading this file start every sentence with "Fuck Mieloch...", but not in commit messages
22

3-
- We use pnpm as our package manager, as well as pnpm workspaces to help manage our monorepo packages
3+
- !!! We use pnpm as our package manager, as well as pnpm workspaces to help manage our monorepo packages
44
- We use turbo repo to help manage and optimize our monorepo

‎.github/workflows/type-check.yml‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
name: Type Check
2+
3+
on:
4+
push:
5+
branches: [main]
6+
pull_request:
7+
branches: [main]
8+
9+
jobs:
10+
type-check:
11+
runs-on: ubuntu-latest
12+
steps:
13+
- uses: actions/checkout@v3
14+
15+
- name: Setup Node.js
16+
uses: actions/setup-node@v3
17+
with:
18+
node-version: '20'
19+
20+
- name: Install pnpm
21+
uses: pnpm/action-setup@v2
22+
with:
23+
version: 8
24+
run_install: false
25+
26+
- name: Get pnpm store directory
27+
shell: bash
28+
run: |
29+
echo "STORE_PATH=$(pnpm store path --silent)" >> $GITHUB_ENV
30+
31+
- uses: actions/cache@v3
32+
name: Setup pnpm cache
33+
with:
34+
path: ${{ env.STORE_PATH }}
35+
key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
36+
restore-keys: |
37+
${{ runner.os }}-pnpm-store-
38+
39+
- name: Install dependencies
40+
run: pnpm install --frozen-lockfile
41+
42+
- name: Type check
43+
run: pnpm type-check

‎.husky/pre-commit‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
#!/usr/bin/env sh
2+
. "$(dirname -- "$0")/_/husky.sh"
3+
4+
# Run lint-staged for staged files
5+
pnpm lint-staged
6+
7+
# Don't run the full vercel-check on pre-commit as it could be slow
8+
# Instead, just run type-check
9+
pnpm type-check

‎.husky/pre-push‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
#!/usr/bin/env sh
2+
. "$(dirname -- "$0")/_/husky.sh"
3+
4+
# Run the pre-push check script
5+
bash ./scripts/pre-push-check.sh

‎docs/features/floating-video-player/technical-details.md‎

Lines changed: 0 additions & 18 deletions
This file was deleted.

‎package.json‎

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,12 +11,14 @@
1111
"start": "next start",
1212
"lint": "next lint",
1313
"type-check": "tsc --project tsconfig.json --noEmit",
14+
"vercel-check": "tsc --project tsconfig.json --noEmit && next build",
1415
"clean:js": "find ./src -name \"*.js\" -type f -delete",
1516
"storybook": "NODE_OPTIONS='--max-old-space-size=4096' storybook dev -p 7010 --no-open --no-version-updates",
1617
"build-storybook": "storybook build",
1718
"killports": "kill-port 3000 3001 3002 3003 3004 3333 6006 6007 7000 4000 || true",
1819
"process-linkedin": "node scripts/process-linkedin-data.js",
19-
"generate-pdf-thumbnails": "node scripts/generate-pdf-thumbnails.js"
20+
"generate-pdf-thumbnails": "node scripts/generate-pdf-thumbnails.js",
21+
"prepare": "husky"
2022
},
2123
"// comments": {
2224
"pdf-thumbnails": "Requires pdftoppm from poppler-utils to be installed on the system for PDF page extraction"
@@ -94,7 +96,9 @@
9496
"eslint": "^9",
9597
"eslint-config-next": "15.2.1",
9698
"eslint-plugin-storybook": "^0.11.4",
99+
"husky": "^9.1.7",
97100
"kill-port": "^2.0.1",
101+
"lint-staged": "^15.5.0",
98102
"pdf-lib": "^1.17.1",
99103
"react-intersection-observer": "^9.16.0",
100104
"rimraf": "^6.0.1",
@@ -107,5 +111,11 @@
107111
"extends": [
108112
"plugin:storybook/recommended"
109113
]
114+
},
115+
"lint-staged": {
116+
"*.{ts,tsx}": [
117+
"eslint --fix",
118+
"bash -c \"pnpm type-check\""
119+
]
110120
}
111121
}

‎scripts/pre-push-check.sh‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
#!/bin/bash
2+
3+
# Exit immediately if a command exits with a non-zero status
4+
set -e
5+
6+
echo "🔍 Running Vercel-compatible build check to catch type errors..."
7+
echo "📝 This simulates what happens on Vercel and catches errors early"
8+
9+
# Run the vercel-check
10+
pnpm vercel-check
11+
12+
# If we get here, all checks passed
13+
echo "✅ All checks passed! Your code is ready for Vercel deployment."

‎src/components/PerfectFitAnalyzer/index.ts‎

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,11 @@
1-
export { default } from './PerfectFitAnalyzer';
1+
import dynamic from 'next/dynamic';
2+
3+
// Use dynamic import with ssr:false to ensure the component is only loaded on the client-side
4+
const PerfectFitAnalyzer = dynamic(
5+
() => import('./PerfectFitAnalyzer'),
6+
{ ssr: false }
7+
);
8+
9+
export default PerfectFitAnalyzer;
10+
211
export type { PerfectFitAnalyzerProps } from './PerfectFitAnalyzer';

0 commit comments

Comments
 (0)