I'm trying to use react-responsive-carousel library and in order to appear correctly it requires the import of

import 'react-responsive-carousel/lib/styles/carousel.min';

When I load up my app I'm not seeing the styles applied to the component. I'm guessing it had something to do with my webpack configuration but I haven't found a solution yet

webpack.config.common.js

module.exports = {
    entry: ['core-js/stable', 'regenerator-runtime/runtime', paths.appIndexJs],
    output: {
        filename: '[name].[contenthash].js',
        path: paths.appBuild,
        publicPath: './'
    },
    resolve: {
        extensions: ['.js', '.jsx', '.ts', '.tsx', '.scss','.css'],
        modules: ['node_modules']
    },
    plugins: [
        new CleanWebpackPlugin(),
        new HtmlWebPackPlugin({
            filename: 'index.html',
            inject: true,
            template: paths.appHtml
        }),
        new ESLintPlugin({
            formatter: eslintFormatter,
            eslintPath: 'eslint',
            resolvePluginsRelativeTo: __dirname
        })
    ],
    module: {
        rules: [
            {
                test: /\.(js|ts)x?$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        cacheDirectory: true
                    }
                }
            },
            {
                test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/],
                loader: require.resolve('url-loader'),
                options: {
                  limit: imageInlineSizeLimit,
                  name: 'static/media/[name].[hash:8].[ext]',
                },
            },
            {
                loader: require.resolve('file-loader'),
                exclude: [/\.(js|mjs|jsx|ts|tsx|scss)$/, /\.html$/, /\.json$/],
                options: {
                    name: 'static/media/[name].[hash:8].[ext]',
                },
            }
        ]
    }
}

webpack.config.dev.js

module.exports = merge(commonConfig, {
    mode: 'development',
    devtool: 'inline-source-map',
    devServer: {
        static: './dist',
        port: 3001,
        historyApiFallback: true
    },
    output: {
        publicPath: '/'
    },
    module: {
        rules: [
            {
                test:/\.css$/,
                include: /node_modules/,
                use: [
                    'style-loader',
                    {
                        loader: 'css-loader',
                        options: {
                            modules: false
                        },
                    },
                ]
            },
            {
                test:/\.(scss|sass|css)$/,
                use: [
                    'style-loader', 
                    {
                        loader: 'css-loader',
                        options: {
                            importLoaders: 2,
                            modules: {
                                getLocalIdent: getCSSModuleLocalIdent
                            }
                        },
                    },
                    {
                        loader: 'postcss-loader',
                        options: {
                            //ident: 'postcss',
                            postcssOptions: {
                                plugins: () => [
                                    require('postcss-flextbugs-fixes'),
                                    require('postcss-preset-env')({
                                        autoprefixer: {
                                            flexbox: 'no-2009',
                                          },
                                          stage: 3
                                    }),
                                    postcssNormalize()
                                ]
                            }
                        }
                    },
                    'resolve-url-loader', 
                    'sass-loader'
                ],
                sideEffects: true
            },
        ]
    }
})

TestimonialsComponent.tsx

import React from 'react';
import { Carousel } from 'react-responsive-carousel';

import { testimonialsList, Testimonial } from '../Common/precious-testimonials';

import 'react-responsive-carousel/lib/styles/carousel.min.css';

type TestimonialElementProp = {
    testimonial: Testimonial
}


const TestimonialElement = ({ testimonial }: TestimonialElementProp) => {
    return <div>
        <img src={testimonial.Image} />
        <p>{testimonial.Quote}</p>
        <h5>{testimonial.PersonName}</h5>
        <h6>{testimonial.Title}</h6>
    </div>
}

export const TestimonialsComponent = () => {
    return <Carousel>
        {testimonialsList.map((testmol) => {
            return <TestimonialElement testimonial={testmol} />
        })}
    </Carousel>
}

CodePudding user response：

Following the its npm page

Using webpack or parcel with a style loader

import styles from'react-responsive-carousel/lib/styles/carousel.min.css';

usually css files are imported in top level page of your application so that it will be loaded globally

import styles from'react-responsive-carousel/lib/styles/carousel.min.css';

import { Carousel } from  'react-responsive-carousel';

CodePudding user response：

The issue here was that the css-loader was configured to not use the modules option. This meant that the css-loader was not applying the css classes correctly, because the modules option should be set to false when importing 3rd party css.

To fix this, the webpack config should be updated as follows:

module: {
    rules: [
        {
            test:/\.css$/,
            include: /node_modules/,
            use: [
                'style-loader',
                {
                    loader: 'css-loader',
                    options: {
                        modules: false
                    },
                }
            ]
        }
    ]
}