Nextjs and react-multi-carousel - Production build not rendering correctly

Question

Hope you can help me as this issue is driving me crazy. I'm using react-multi-carousel in NextJs for my landing page, and to render 2 more carousels in another page, and while in dev environment is rendering correctly applying the styles, in production is not working.

I'm importing the stylesheet in the main CSS as well as in _app.js. I have tried "everything" and it's driving me totally crazy. I'm attaching some parts of my code.

I had a similar problem with react-datepicker that I have solved by linking the cdnjs in the head of _app.js but react-multi-carousel doesn't seem to have cdnjs.

This is the _app.js

import React from 'react'
import Head from 'next/head';
import '@fortawesome/fontawesome-free/js/fontawesome';
import '@fortawesome/fontawesome-free/js/solid';
import '@fortawesome/fontawesome-free/js/regular';
import '@fortawesome/fontawesome-free/js/brands';
import 'react-multi-carousel/lib/styles.css';
import 'react-datepicker/dist/react-datepicker.css';
import '../public/styles/index.css';


function MyApp({ Component, pageProps, router }) {
  return (
    <>
      <Head>
        <title>Title</title>
        <meta name="viewport" content="initial-scale=1.0, width=device-width" />
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/react-datepicker/2.14.1/react-datepicker.min.css" />
      </Head>
      <div key={router.route}>
        <Component {...pageProps} />
      </div>
    </>
  )
}

export default MyApp;

index.css (I have it in the path public/styles/index.css)

@import 'tailwindcss/base';

@import 'tailwindcss/components';

@import 'tailwindcss/utilities';

@import '~react-datepicker/dist/react-datepicker.css';

@import '~react-multi-carousel/lib/styles.css';

@import '~react-image-gallery/styles/css/image-gallery.css';

@import url('https://fonts.googleapis.com/css2?family=Heebo:wght@600&family=Lobster&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Karma&display=swap');

....

Thank you so much for helping!

Nextjs and react-multi-carousel - Production build not rendering correctly

0 Answers0