React-Select V2.0 with Next.JS

Question

I'm trying to use React-Select V2.0 with Next.JS but on server load the select element is not styled and flickers to styled.

I tried using the Emotion example for Next.JS to server render the emotion style (https://github.com/zeit/next.js/tree/master/examples/with-emotion) but it seem to conflict with Styled-JSX which I use and I get the error StyleSheet: insertRule accepts only strings.

I tried using the Emotion babel config options shown here: https://github.com/emotion-js/emotion/blob/master/docs/configurable-imports.md#babel-options

but that causes the whole page to be rendered not styled and then flickers to styled.

Does anyone know how to use React-Select V2 on Next.JS with server rendering?

Thanks.

score 3 · Answer 1 · answered Mar 31 '19 at 18:56

Similar to other answers here, the only way I could get this working was to use a dynamic import. I would encourage you to provide some sort of loading indicator.

const ReactSelectNoSSR = dynamic(() => import('../components/select'), {
    loading: () => <Input />,
    ssr: false
});

If you need to test this component with Jest, here's how you would do that. Hope this helps.

score 2 · Accepted Answer · answered Aug 29 '18 at 23:01

2

A solution to the flickering render with React-Select v2.0 with Next.js is to render the component in client-side only using react-no-ssr

answered Aug 29 '18 at 23:01

moy2010

854
12
18

score 1 · Answer 3 · answered Mar 30 '19 at 15:33

1

I currently use Next.js dynamic component loading without ssr like this:

const Select = dynamic(
  () => import('react-select').then((mod) => mod.default),
  {
    ssr: false,
    loading: () => null,
  },
);

Use select component as usual

answered Mar 30 '19 at 15:33

Dziamid

11,225
12
69
104

React-Select V2.0 with Next.JS

3 Answers3