SSR classNames not matching when using Style Object

[wagnerjsilva]

Hello,

I'm integrating react-select to my SSR implementation, and currently I'm having issues with classNames not matching:

Warning: Prop className did not match. Server: "css-1u7qna3" Client: "css-6xc8cw"

My Select declaration is as follows:

<Select
    instanceId={this.props.elementConfig.name}
    value={selectedOption}
    onChange={this.handleChange}
    options={options}
    styles={customStyles}
    className='Occupation'
    classNamePrefixunion='Option--'
/>

The problem seems to happen when I try to use the styling object, as per the documentation below:

https://react-select.com/styles

I was wondering if someone else has experienced this issue and would care to help.

[horaciosystem]

Same here. I'm using in a project with styled-components.

[andrevenancio]

I have a similar problem when using className + classNamePrefix.
Warning: Prop 'id' did not match. Server: "react-select-8-input" Client: "react-select-2-input"
Even more interesting is that this value increased by 2 (since I have 2 selects on my page) on every page refresh.
So not sure where the nodes are being saved.

"react-select-8-input" Client: "react-select-2-input"
// REFRESH PAGE
"react-select-10-input" Client: "react-select-2-input"
// REFRESH PAGE
"react-select-12-input" Client: "react-select-2-input"
// REFRESH PAGE
"react-select-14-input" Client: "react-select-2-input"
// REFRESH PAGE

Example:

import React, { PureComponent } from 'react';
import PropTypes from 'prop-types';
import Select from 'react-select';

class Example extends PureComponent {

    static propTypes = {
        department: PropTypes.array,
    }

    static defaultProps = {
        department: [
            { "value": "all", "label": "All" },
            { "value": "design", "label": "Design" },
            { "value": "accounting", "label": "Accounting" },
            { "value": "business", "label": "New Business" },
            { "value": "development", "label": "Development" },
        ]
    }

    render() {
        const { department } = this.props;
        return (
            <Select
                name="department"
                className="select"
                classNamePrefix="select"
                options={department}
                defaultValue={department[0]}
            />
        );
    }
}

export default Example;

[adamsoffer]

I also was having this issue. Giving it an instanceId seemed to fix it for me.

[gwyneplaine]

Hi @wagnerjsilva and @andrevenancio we added the instanceId prop primarily to solve this problem.
Using it in conjunction with className and classNamePrefix should resolve this issue when SSRing.

[bmsuseluda]

The instanceId doesn't fix it for me.

<ReactSelect
        instanceId={label}
        className={styles.dropdown}
        classNamePrefix="pcc-dropdown"
        options={options}
        value={value}
        defaultValue={defaultValue}
        isLoading={isLoading}
        isDisabled={isDisabled}
        onChange={handleOnChange}
        placeholder={placeholder}
        components={{ DropdownIndicator, Menu }}
        isSearchable={false}
        ariaLabel={label}
      />

Without instanceId i'm getting the error:
Warning: Prop id did not match. Server: "react-select-24-input" Client: "react-select-2-input"

In another issue i learned that i have to set the instanceId. With id instanceId the prop id warning is away but now i'm getting the className prop warning.

Is there something i'm missing? thanks

[focux]

Same here, I tried setting an instanceId and still getting the warning.

Did you find a solution @bmsuseluda?

[murshidazher]

Had the same issue but this resetId seemed to resolve the issue. This happens because of server and client id mismatch.

  const idGenerator = require('react-id-generator');

  server.get('*', (req, res) => {
      idGenerator.resetId(); 
      return handle(req, res);
  });

[stnwk]

Hey @gwyneplaine I think you closed this too early… :/

[mattvb91]

Having the same issue on nextjs and styled components

[trangchongcheng]

Having the same issue on nextjs, how can fix it?

[JClackett]

Still having the same issue

[mthines]

Even though this REALLY isn't an ideal solution, it fixes the problem temporarily until the styles works when using SSR (Nextjs, etc)

I've copied most of the styles not being applied to a *.module.scss file which you can import and use.

This is a fix for people using SCSS Modules for React-Select

1. Download and import the react-select_overrides.module.scss file and put it next to your styles.module.scss file.

Like so.

Your styles file

@use './react-select_overrides.module.scss' as *;

.reactSelect {
  // your custom styling
}

2. Add the SCSS Module classNames to the project

return (
  <ReactSelect
    className={styles.reactSelect}
    classNamePrefix="react-select"
  />
)

https://gist.github.com/mthines/fa2a1b8bb5058b9ca2e793934ab1918b

[delivey]

Having the same issue on Remix. Anyone have a fix?

[honia19]

#5710 (comment)