Broken layout on SSR in Next,.js

[onair-lena]

Describe the bug I am making an app with react-multi-carousel in Next.js v.9.4.4 Since Next.js 9.2 the`s no need in @zeit/next-css plugin as it has native support for importing stylesheets into an app. I import styles to _app.js and it works well except for styles in SSR . On dev server the layout breaks, but looks good on production server. I gues styles could be suppurted in development as well if it was possible to import carousel css as module (according to Next.js docs)

To Reproduce Steps to reproduce the behavior:

1. add "import Carousel from 'react-multi-carousel'" to Component js file
2. add "import 'react-multi-carousel/lib/styles.css'" to pages/_app.js
3. run the app in development server
4. disable JavaScript

Expected behavior Layout same as in production server and with Java Script enabled

Screenshots Layout with JS enabled:

Layout with JS disabled:

Desktop (please complete the following information):

• OS: Windows 10
• Browser Chrome
• Version 83.0.4103.116

[binaryartifex]

I don't suppose anyone has a solution to this for the interim until a fix is realised?

EDIT: this might not be a react-multi-carousel issue. This might well be by design via NextJs fast refresh functionality. Specific details at the bottom of the page of the below link -

https://nextjs.org/docs/basic-features/built-in-css-support

[sanderkooger]

@onair-lena IS the issue resolved? And do we still need an answer? Otherwise, please close the issue