Closed toughyear closed 4 years ago
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?
@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
@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.
@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?
@toughyear
Sorry but I don't have enough time for that.
Could you open a separate issue about creating such an example repo?
You can close this issue, I have found a solution. There was a conflict with PurgeCSS.
Solved - added relevant CSS files (both, styles.css and styles.css.map into the whitelist of PurgeCSS).
nice to hear that
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=darkHowever when I build it and then run the build by using
npm run build
&&npm run start
-To recreate this in codesandbox -
Expected behavior UI should be same as when seen with npm run dev.
Screenshots added above