React-select: Some css styles are not created in production but work in development

[jjlauer]

Hello,

We are hitting an odd css/emotion issue in production, while the component works great in development. We've tried this on v2.0.0-v.2.2.0 and its the same issue with all of them.

The dynamic css rules for the outer divs never get created in the emotion stylesheet. They are, however, set on the divs in the DOM. The rest of the dynamic css rules (e.g. on the options when you click on the control) do get created in the emotion stylesheet. This only happens on a few pages in our app, while other parts work as expected. Here is a screenshot of the the DOM when the page loads.

You'll notice that the select outermost div was assigned a classname of css-10nd86i, but that css rule does not actually exist in the DOM. Using the javascript console to dump out the emotion stylesheet, you'll notice in this screenshot that the rules are totally empty in the stylesheet.

Now if you click on the select control to open it, the css rules for the options list all get created:

So the options get styled correctly, but the primary select component does not. I've tried various versions of emotion, react-select, react, etc., but the issue still persists. We've had to swap out this component in production for the time being, but would like to figure this out. Any help would be greatly appreciated.

[gwyneplaine]

@jjlauer are there any key similarities between the pages where this happens? Any information you could provide us to narrow down a reproducible case for this would be helpful; and if possible a codesandbox reproduction.

This usually happens when you're trying to instantiate emotion across contexts, like in an iframe or through server side rendering for example.

[jjlauer]

Made some headway. On the page in our app that works, it's a very complicated page and the user would only see the Select component if they were already on the page for a few seconds (e.g. javascript all loaded, before Select ever rendered).

On the page this issue occurs the Select component is rendered immediately when the browser loads the page. If I delay the Select from being rendered for even just 100ms (via setTimeout) then it renders correctly. Any ideas on what could be causing something like that and why even just 100ms delay in React rendering the Select component would fix it?

[ryanrombough]

@jjlauer Did you ever figure this out? I'm having the same issue. The selector is properly styled in a development environment, but in a production build none of the emotion stylesheets get injected into the head.

[jjlauer]

@ryanrombough Unfortunately no. Only workaround is what i mentioned above -- you have to delay rendering of the widget so it doesn't occur on the first react render().

[ryanrombough]

@jjlauer I just tried implementing a 500ms delay on rendering but it did not solve the issue for me. Guess I'll keep digging. Thanks!

[ryanrombough]

I have narrowed the cause of my issue down to the minification step in my Webpack v4 build. Here's the stack overflow question I created to try to find out why this is happening.

[jjlauer]

Hmm.. did turning off minimize in webpack fix your production issue?

I also had issues w/ the css not being injected into the header, but adding
a delay (of any use of react-select) on the initial react render fixed it.
It feels like a race condition between Emotion fully initializing before
react-select uses it.

On Wed, Apr 3, 2019 at 6:10 PM Ryan Rombough [e-mail]
wrote:

I have narrowed the cause of my issue down to the minification step in my
Webpack v4 build. Here's the stack overflow question
https://stackoverflow.com/questions/55505056/why-would-webpack-4-minification-prevent-styles-for-react-select-component
.

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/JedWatson/react-select/issues/3309#issuecomment-479677022,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AAjwAtXg0d-2BhpFcJqVxX0oGVuaiV4Dks5vdSbOgaJpZM4ZmF0W
.

[ryanrombough]

Yea, but that's not really a solution for us because our bundle is too large when not minified. I tried implementing the delay you suggested but could not get it to work.

[ChayanJana1233]

Hi @jjlauer I am facing the same CSS not being applied in Production. If you can kindly help me with the code snippet for setting the delay in rendering the react-select it would be extremely helpful!!
Thank you.

[hemedani]

I have the same issues

[NearHuscarl]

I managed to fix the issue by adding classNamePrefix which seems to force react-select to add the classNames to the sub-components in production

<Select
  classNamePrefix='select'
  {...}
/>

Before

<div class=" css-1hwfws3">
  ...
</div>

After

<div class="select__value-container select__value-container--is-multi select__value-container--has-value css-1hwfws3">
  ...
</div>

[bladey]

Thanks for letting us know @NearHuscarl!

[kunambi]

@NearHuscarl's solution didn't solve my problem. Have used classNamePrefix for a while, and the issue remains the same.

@jjlauer how did you implement the delay?

@bladey is there a way to "force" the CSS to be loaded programatically?

Getting desperate here 😅

[jjlauer]

Here is how I implemented a very simple delay to rendering. Here's the main react component (e.g. top-level entrypoint). I originally was rendering the ReportsPanel component, but developed a simple wrapper component i called DelayedRender that is now responsible for rendering it instead.

class ReportsPage extends Component {

  constructor() {
    super();
  }

  render() {
    const { dispatch, query, user, accounts } = this.props;

    return (
      <DelayedRender>
        <ReportsPanel
          dispatch={dispatch}
          query={query}
          user={user}
          accounts={accounts}
          active={true}
        />
      </DelayedRender>
    );
  }
}

Here is DelayedRender:

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

export default class DelayedRender extends PureComponent {

  constructor() {
    super();

    this.state = {
      render: false
    };
  }

  componentDidMount() {
    const { time } = this.props;

    setTimeout(() => this.setState({ render: true }), (time || 400));
  }

  render() {
    const { children } = this.props;
    const { render } = this.state;

    if (!render) {
      return null;
    }

    return children;
  }
}