casesandberg / casesandberg/react-color
NextJS SSR, client not matching server
Open
- Dominant language
- JavaScript
- Stars
- 12.3k
- Forks
- 920
- PR merge metrics
- No merged PRs in 30d
Description
I am trying to use the `ChromePicker` in my Next project but it seems to crap out on me when trying to render a page.
Error in console:
```
Warning: Did not expect server HTML to contain a
in
. react-dom.development.js:67
Uncaught ReferenceError: exports is not defined
color.js:80
NextJS 3
ColorWrap.js:1
NextJS 3
index.js:1
NextJS 3
Alpha.js:1
NextJS 3
index.js:1
NextJS 3
index.tsx:15
index.tsx:315
NextJS 3
next-client-pages-loader.js:5
_callee$ page-loader.ts:345
Babel 8
registerPage page-loader.ts:417
promise callback*registerPage page-loader.ts:416
register index.tsx:124
next-client-pages-loader.js:2
NextJS 5
```
Uncaught ReferenceError: exports is not defined
color.js:80
NextJS 3
ColorWrap.js:1
NextJS 3
index.js:1
NextJS 3
Alpha.js:1
NextJS 3
index.js:1
NextJS 3
index.tsx:15
index.tsx:315
NextJS 3
next-client-pages-loader.js:5
_callee$ page-loader.ts:345
Babel 8
registerPage page-loader.ts:417
promise callback*registerPage page-loader.ts:416
register index.tsx:124
next-client-pages-loader.js:2
NextJS 5
```
Very easy to replicate:
1. Scaffold NextJS app
2. Add this package
3. Slap it right in the example page
Is there something in here that prevents SSR from working?
Contributor guide
Research direction
Reproduce the issue in a scaffolded NextJS app using ChromePicker on the example page. Start with the stack locations in color.js, ColorWrap.js, Alpha.js, and index.js; the work is done when the page renders through SSR without the hydration mismatch or the “exports is not defined” error.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript, next.js, react
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100