loader issue with react-day-picker

Question

While using react-day-picker, i get the following error:

You may need an appropriate loader to handle this file type.  
| /* DayPicker styles */ |  
 | .DayPicker { | display: -webkit-box; |  

display: -ms-flexbox; @  
 ./src/components/portfolio/RecordInvestorDetail.react.js 47:0-41  

Module parse failed: /home/yash/Documents/CRONJ/waccal/node_modules/react-day-picker/lib/style.css Line 3: Unexpected token .

_

Could you share your webpack config? – Geraint Jun 03 '17 at 08:37 — Geraint, Jun 03 '17 at 08:37

score 2 · Answer 1 · answered Jun 03 '17 at 08:37

You must install and enable style-loader and css-loader for Webpack:

npm install style-loader css-loader --save-dev

Then add those loaders in webpack.config.js:

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

score 1 · Accepted Answer · answered Jun 03 '17 at 08:55

I resolved the error by adding

loaders : [
'style',
]

I already had

loaders : [
          'style-loader',
          'css-loader',
          'autoprefixer?browsers=last 2 version',
          'sass-loader?includePaths[]=' + paths.src('styles')
        ]

Now the loaders are

loaders : [
          'style',
          'style-loader',
          'css-loader',
          'autoprefixer?browsers=last 2 version',
          'sass-loader?includePaths[]=' + paths.src('styles')
        ]

score 0 · Answer 3 · answered May 31 '21 at 19:24

I had this configuration before:

{
    test: /\.css$/,
    exclude: /node_modules/,
    use: ["style-loader", "css-loader"],
}

And got the issue fixed by removing the line: exclude: /node_modules/

I wasnt allowing webpack to compile the files from react-day-picker by having this.

the correct:

{
    test: /\.css$/,
    use: ["style-loader", "css-loader"],
}

loader issue with react-day-picker

3 Answers3