React-select: SSR classNames not matching when using Style Object

Created on 17 Oct 2018  路  7Comments  路  Source: JedWatson/react-select

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.

Most helpful comment

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: Propiddid 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

All 7 comments

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

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;

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

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.

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: Propiddid 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

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

Did you find a solution @bmsuseluda?

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);
  });
Was this page helpful?
0 / 5 - 0 ratings