BUG: Prop `id` did not match. Server: "rc-editable-input-17" Client: "rc-editable-input-2" (on CompactPicker)

[chenasraf]

trafficstars

I am getting the error below, using Next.js, with @mui and @emotion properly configured for SSR. The functionality does not break, the error in the console is the only sign (I've seen) of a problem.

Warning: Prop `id` did not match. Server: "rc-editable-input-17" Client: "rc-editable-input-2"
    at input
    at div
    at EditableInput (webpack-internal:///./node_modules/react-color/es/components/common/EditableInput.js:39:5)
    at div
    at CompactFields (webpack-internal:///./node_modules/react-color/es/components/compact/CompactFields.js:15:18)
    at div
    at div
    at div
    at Raised (webpack-internal:///./node_modules/react-color/es/components/common/Raised.js:17:21)
    at Compact (webpack-internal:///./node_modules/react-color/es/components/compact/Compact.js:28:23)
    at ColorPicker (webpack-internal:///./node_modules/react-color/es/components/common/ColorWrap.js:28:7)
    at div
    at eval (webpack-internal:///./node_modules/@emotion/react/dist/emotion-element-cbed451f.browser.esm.js:57:66)
    at Grid (webpack-internal:///./node_modules/@mui/material/Grid/Grid.js:313:87)
    at div
    at eval (webpack-internal:///./node_modules/@emotion/react/dist/emotion-element-cbed451f.browser.esm.js:57:66)
    at Grid (webpack-internal:///./node_modules/@mui/material/Grid/Grid.js:313:87)
    at div
    at eval (webpack-internal:///./node_modules/@emotion/react/dist/emotion-element-cbed451f.browser.esm.js:57:66)
    at Container (webpack-internal:///./node_modules/@mui/material/Container/Container.js:93:82)
    at div
    at eval (webpack-internal:///./node_modules/@emotion/react/dist/emotion-element-cbed451f.browser.esm.js:57:66)
    at Box (webpack-internal:///./node_modules/@mui/system/esm/createBox.js:36:72)
    at ImageBuilder (webpack-internal:///./components/ImageBuilder/ImageBuilder.tsx:147:27)
    at div
    at eval (webpack-internal:///./node_modules/@emotion/react/dist/emotion-element-cbed451f.browser.esm.js:57:66)
    at Grid (webpack-internal:///./node_modules/@mui/material/Grid/Grid.js:313:87)
    at div
    at eval (webpack-internal:///./node_modules/@emotion/react/dist/emotion-element-cbed451f.browser.esm.js:57:66)
    at Grid (webpack-internal:///./node_modules/@mui/material/Grid/Grid.js:313:87)
    at div
    at eval (webpack-internal:///./node_modules/@emotion/react/dist/emotion-element-cbed451f.browser.esm.js:57:66)
    at Container (webpack-internal:///./node_modules/@mui/material/Container/Container.js:93:82)
    at div
    at Home (webpack-internal:///./pages/index.tsx:26:70)
    at InnerThemeProvider (webpack-internal:///./node_modules/@mui/system/esm/ThemeProvider/ThemeProvider.js:21:70)
    at ThemeProvider (webpack-internal:///./node_modules/@mui/private-theming/ThemeProvider/ThemeProvider.js:47:5)
    at ThemeProvider (webpack-internal:///./node_modules/@mui/system/esm/ThemeProvider/ThemeProvider.js:41:5)
    at MyApp (webpack-internal:///./pages/_app.tsx:60:27)
    at ErrorBoundary (webpack-internal:///./node_modules/next/dist/compiled/@next/react-dev-overlay/client.js:8:20584)
    at ReactDevOverlay (webpack-internal:///./node_modules/next/dist/compiled/@next/react-dev-overlay/client.js:8:23125)
    at Container (webpack-internal:///./node_modules/next/dist/client/index.js:357:9)
    at AppContainer (webpack-internal:///./node_modules/next/dist/client/index.js:791:26)
    at Root (webpack-internal:///./node_modules/next/dist/client/index.js:915:27) 

Here are the pickers I am using at the moment:

<>
<CompactPicker
  key="bgColorPicker"
  color={bgColor.value}
  onChange={(c) => {
    bgColor.toggle(true)
    bgColor.set(c.hex)
  }}
/>

<CompactPicker
  key="fgColorPicker"
  color={fgColor.value}
  onChange={(c) => {
    fgColor.toggle(true)
    fgColor.set(c.hex)
  }}
/>
</>

The values come from a state hook, wrapped by a custom hook, like so:

export function useTogglableValue<T>(
  value: T,
  defaultState = false
): {
  value: T
  set: React.Dispatch<React.SetStateAction<T>>
  enabled: boolean
  toggle: React.Dispatch<React.SetStateAction<boolean>>
} {
  const [get, set] = React.useState(value)
  const [enabled, toggle] = React.useState(defaultState)
  return {
    value: get,
    set,
    enabled,
    toggle,
  }
}

// ...

const bgColor = useTogglableValue("#999999", false)
const fgColor = useTogglableValue("#000000", false)

Versions:

Yarn         1.22.15
TypeScript   4.5.5
Next.JS      12.1.0

package.json:

{
  "dependencies": {
    "@emotion/react": "^11.8.1",
    "@emotion/server": "^11.4.0",
    "@emotion/styled": "^11.8.1",
    "@mui/material": "^5.4.4",
    "@mui/system": "^5.4.4",
    "next": "12.1.0",
    "react": "^17.0.2",
    "react-color": "^2.19.3",
    "react-dom": "17.0.2"
  },
  "devDependencies": {
    "@types/node": "17.0.21",
    "@types/react": "17.0.39",
    "@types/react-color": "^3.0.6",
    "eslint": "8.10.0",
    "eslint-config-next": "12.1.0",
    "typescript": "4.5.5"
  }
}