React-responsive-carousel: Import styles error: react-responsive-carousel/lib/styles/carousel.css or carousel.min.css

[anoush-soghomonyan]

ERROR in ./node_modules/react-responsive-carousel/lib/styles/carousel.css
Module parse failed: Unexpected token (10:0)
You may need an appropriate loader to handle this file type.
| COLOURS
| **************/
| .carousel .control-arrow, .carousel.carousel-slider .control-arrow {
| -webkit-transition: all 0.25s ease-in;
| -moz-transition: all 0.25s ease-in;

[leandrowd]

Hi @AnoushS,

Are you using webpack to build your app? The error message you got means that you haven't configured your bundler to load css properly. You can find one example of how to do at https://github.com/leandrowd/demo-react-responsive-carousel-es6/blob/master/index.js

Also, look at https://github.com/webpack-contrib/css-loader

Let me know how it goes.

[anoush-soghomonyan]

I did include "css-loader" and "style-loader" and finally, I was able to use it. Thank you!)

[Tapudp]

I'm using Next.js so can someone please tell me how will I be able to add those css and style loaders?

My next.config.js file includes the following code:

const withSass = require('@zeit/next-sass');

module.exports = withSass({
  webpack: config => {
    // Fixes npm packages that depend on `fs` module
    config.node = {
      fs: 'empty'
    };

    return config;
  }
});

[jbergeron03]

Hey @Tapudp

This is working for me:

const withSass = require("@zeit/next-sass");
const withCSS = require("@zeit/next-css");

module.exports = withSass(withCSS());

[MarlonAEC]

I did include "css-loader" and "style-loader" and finally, I was able to use it. Thank you!)

how did you do it??? how did you configure webpack... I'm getting the same issue here... :(

[sailor95]

@MarlonAEC firstly npm install style-loader & css-loader, then within your webpack.config.js

module: {
  ..., // other configc
  rules: [
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
    }
  ]
}