Next.JS issue with build vs local dev

[toughyear]

Bug description I am working with react-carousel in NextJS. Even when I am using dynamic import with ssr:false, The build UI looks strange but the dev UI is perfectly fine.

dev UI -

I have recreated it in Codesandbox too (this one is for dev environment is running npm run dev)- https://codesandbox.io/embed/suspicious-volhard-460q8?fontsize=14&hidenavigation=1&theme=dark

However when I build it and then run the build by using npm run build && npm run start -

To recreate this in codesandbox -

1. In bottom right click on + sign for a new terminal
2. npm run build
3. npm run start (I have already added "start": "next start -p 8080" in the package.json file so a new tab will be created for the sandbox and can be accessed as https://460q8-8080.sse.codesandbox.io/ where 8080 signifies the port number )

Expected behavior UI should be same as when seen with npm run dev.

Screenshots added above

[piotr-s-brainhub]

hi @toughyear

thanks for reporting this,

could you create a repo on GitHub with that code so I could clone it and run locally these commands?

[toughyear]

@piotr-s-brainhub Here is the repo - https://github.com/toughyear/curate

I am importing the react-carousel in components > About.JS and it's rendered in page> index.js on NextJS project

[piotr-s-brainhub]

@toughyear I see something other than you on yarn start after yarn build:

However, on yarn start I see a large empty space between the top and the bottom of the site when scrolling in contrary to the yarn dev.

This issue might be due to react-carousel not supporting SSR so you could try this approach https://github.com/brainhubeu/react-carousel#ssr in order to work around this issue.

Another good news is we're going to release a new major version soon which maybe will support SSR.

[toughyear]

@piotr-s-brainhub I tried using the instructions from https://github.com/brainhubeu/react-carousel#ssr but to no avail. Can you point to a example Github repo where the react-carousel is working with NextJS after build?

[piotr-s-brainhub]

@toughyear

Sorry but I don't have enough time for that.

Could you open a separate issue about creating such an example repo?

[toughyear]

You can close this issue, I have found a solution. There was a conflict with PurgeCSS.

[toughyear]

Solved - added relevant CSS files (both, styles.css and styles.css.map into the whitelist of PurgeCSS).

[piotr-s-brainhub]

nice to hear that