0

I'm trying to implement airbnbs react-dates datepicker for my react-redux app.

Error I'm receiving from webpack:

ERROR in ./node_modules/react-dates/lib/css/_datepicker.css
Module parse failed: C:\my-app\node_modules\react-dates\lib\css\_
datepicker.css Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
| .CalendarDay {
|   border: 1px solid #e4e7e7;
|   padding: 0;
 @ ./src/components/ExpenseForm.js 15:0-46
 @ ./src/components/AddExpense.js
 @ ./src/routers/AppRouter.js
 @ ./src/app.js
 @ multi (webpack)-dev-server/client?http://localhost:8080 ./src/app.js

Versions of packages I'm using:

react-dates@12.7.0 react-addons-shallow-compare@15.6.0

How I'm importing them (in my component):

import { SingleDatePicker } from 'react-dates'
import 'react-dates/lib/css/_datepicker.css'

Should I upgrade to the latest version - will this break my app again?

Errors in client (chrome: console log):

Uncaught Error: Module parse failed: C:\my-app\node_modules\react-dates\lib\css\_datepicker.css Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
| .CalendarDay {
|   border: 1px solid #e4e7e7;
|   padding: 0;
    at eval (553:1)
    at Object.<anonymous> (bundle.js:3558)
    at __webpack_require__ (bundle.js:20)
    at eval (ExpenseForm.js?8c50:3)
    at Object.<anonymous> (bundle.js:3146)
    at __webpack_require__ (bundle.js:20)
    at eval (AddExpense.js?a8b4:2)
    at Object.<anonymous> (bundle.js:3139)
    at __webpack_require__ (bundle.js:20)
    at eval (AppRouter.js?e39b:5)
cala
  • 767
  • 4
  • 11
  • 28
  • 1
    Did you configure [css-loader](https://github.com/webpack-contrib/css-loader) in your webpack.config? – Or B Jan 22 '18 at 18:27
  • @OrB no? I thougth once you install required packages it should work? How do I go about doing this? I'm already using these `test: /\.scss$/, use: [ 'style-loader', 'css-loader', 'sass-loader' ]` – cala Jan 22 '18 at 18:43
  • 1
    Change it to `test: /\.s?css$/` to it will cover .css files as well. – Or B Jan 22 '18 at 18:45
  • Nice one, it's working! Why did I have to do this though? Is it because I was only testing `.scss` files whereas react-dates was using `.css` files and the 2 were clashing? Thanks! – cala Jan 22 '18 at 18:48
  • 1
    When importing files of some type, you have to tell webpack how to handle them. Your config defined how to handle .scss files, but not .css (be them part of `react-dates` or not). – Or B Jan 22 '18 at 18:52

0 Answers0