Prop id did not match. Server: "toggle--gxfg3t7xwo" Client: "toggle--ki0j10p2l"

[nicholaschiang]

It seems like Next.js isn't correctly rendering my ScheduleInput component such that it keeps throwing this warning on page load:

Warning: Prop `id` did not match. Server: "toggle--gxfg3t7xwo" Client: "toggle--ki0j10p2l"
    in input (created by Function)
    in div (created by ForwardRef(Tag))
    in ForwardRef(Tag) (created by ForwardRef(CheckboxRoot))
    in ForwardRef(CheckboxRoot) (created by withRipple(Object))
    in Ripple (created by class_1)
    in class_1 (created by withRipple(Object))
    in withRipple(Object) (created by Function)
    in Function (at schedule-input.tsx:154)
    in td (created by ForwardRef(Tag))
    in ForwardRef(Tag) (created by Function)
    in Function (at schedule-input.tsx:153)
    in tr (created by ForwardRef(Tag))
    in ForwardRef(Tag) (created by Function)
    in Function (at schedule-input.tsx:139)
    in tbody (created by ForwardRef(Tag))
    in ForwardRef(Tag) (created by Function)
    in Function (at schedule-input.tsx:136)
    in table (created by ForwardRef(Tag))
    in ForwardRef(Tag) (created by Function)
    in Function (at schedule-input.tsx:127)
    in div (created by ForwardRef(Tag))
    in ForwardRef(Tag) (created by Function)
    in Function (at schedule-input.tsx:126)
    in div (created by ForwardRef(Tag))
    in ForwardRef(Tag) (created by Function)
    in PortalChild (created by Function)
    in Function (at schedule-input.tsx:121)
    in div (created by ForwardRef(Tag))
    in ForwardRef(Tag) (created by Function)
    in Function (at schedule-input.tsx:120)
    in ScheduleInput (at covid-form.tsx:124)
    in form (at covid-form.tsx:197)
    in div (created by ForwardRef(Tag))
    in ForwardRef(Tag) (created by Function)
    in Function (at covid-form.tsx:184)
    in Form (at hero-form.tsx:24)
    in div (at hero-form.tsx:23)
    in div (at hero-form.tsx:22)
    in HeroForm (at pages/index.tsx:13)
    in IndexPage (at _app.tsx:10)
    in DBProvider (at _app.tsx:9)
    in App
    in Container (created by AppContainer)
    in AppContainer

To Reproduce

Steps to reproduce the behavior, please provide code snippets or a repository:

1. Clone this repository:

$ git clone https://github.com/tutorbookapp/covid-tutoring

2. Install our dependencies (you must have Lerna to do this):

$ npm i && lerna bootstrap --hoist

3. Start our development server and visit http://localhost:3000/:

$ npm run dev

4. See error in console logs.

Expected behavior

A clear and concise description of what you expected to happen.

Those two props should match. That ScheduleInput component is correctly defined in src/schedule-input/lib/schedule-input.tsx; I have no idea why it's throwing this error.

System information

• OS: Ubuntu 18.04.2
  Browser (if applies): Firefox
• Version of Next.js: ^9.3.4
• Version of Node.js: 12.16.1

[timneutkens]

Just investigated this but it seems related to some component somewhere using a css-in-js solution for which you don't have the server-side component implemented. I couldn't find exactly where but it seems related to the checkbox (because there's a toggle class) https://github.com/tutorbookapp/covid-tutoring/blob/fece458c9928e975584d2a8f51882ab061a6bc71/src/schedule-input/lib/schedule-input.tsx#L2

I've converted this to a discussion as it's not a bug in Next.js.