React-dates: You may need an appropriate loader to handle this file type (.css)

[timhecker]

Hi everybody, I have this error

ERROR in ./node_modules/react-dates/lib/css/_datepicker.css
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
| .PresetDateRangePicker_panel {
|   padding: 0 22px 11px
| }

but my webpack config is very similar to yours, except for .pcss extension (I don't use Sass, but directly postcss). Here my config:

javascript module.exports = { devtool: "inline-source-maps", resolve: { extensions: [".jsx", ".css", ".pcss", ".js", ".json"] }, module: { rules: [ { test: /\.(js|jsx)$/, loader: "babel-loader", exclude: /node_modules/, include: path.join(__dirname, "..") }, { test: /\.(pcss|css)$/, use: [ "style-loader", { loader: "css-loader", options: { localIdentName: "[local]___[hash:base64:5]", minimize: true, sourceMap: true, modules: true, importLoaders: 1 } }, { loader: "postcss-loader", options: { context: path.join(__dirname, ".."), ident: "postcss", plugins: () => [ [...] ] } } ], exclude: /node_modules/, include: path.join(__dirname, "..") }, { test: /\.svg$/, loader: "svg-sprite-loader" }, { test: /\.jpe?g$|\.gif$|\.png$|\.woff$|\.ttf$|\.wav$|\.mp3$/, loader: "file-loader" } ] } };

Could anyone help me, please?

[mlg87]

do you have autoprefixer in your options.plugins for the postcss-loader?

[timhecker]

Here my postcss plugins:

              plugins: () => [
                postcssImport,
                postcssMixins,
                postcssNesting,
                postcssSimpleVars,
                postcssStripUnits,
                postcssCustomProperties,
                postcssColorFunction,
                postcssConditionals,
                postcssPresetEnv,
                cssnano
              ]

I removed autoprefixer plugin some weeks ago and instead I added postcss-preset-envwith this configuration and with an internal autoprefixer management:

const postcssPresetEnv = require("postcss-preset-env")({
  browsers: ["last 1 versions", "not ie <= 11", "not op_mini all", "not dead", "not < 0.5%"],
  stage: 1,
  autoprefixer: {
    grid: true
  },
  insertBefore: {
    "nesting-rules": postcssMixins
  }
});

Do you think autoprefixer breaks this stuff?

[mlg87]

i cant say for certain bc im using postcss-loader pretty much out of the box with autoprefixer (the project uses sass), but you should try putting it back in. sorry i cant be more helpful

[pedroabreu]

I was running into the same issue today and the way I've fixed it was including the node_modules

...
test: /\.(s?)css$/,
include: [
    path.resolve(__dirname, "./src"),
    path.resolve(__dirname, "./node_modules")
]
...

Not 100% sure but I think it fixed it because I'm importing the .css file from node_modules that needs to be parsed (wild guess after debugging for a couple of hours, might be wrong and just got lucky)

I'm using webpack v3

[bradwoods]

...
I was running into the same issue today and the way I've fixed it was including the node_modules
...

I used this approach with webpack 4 and it solved the issue.

[vincerubinetti]

Note that the ./node_modules/react-dates/lib/css/_datepicker.css is not a CSS module, so if you're using webpack, you'll need to set the CSS loader modules option to false. You may want to make a separate rules entry just for react-dates in your webpack.config.js file to handle this, since every other library I've used uses CSS modules.

Note to the devs: I feel that the readme / getting started guide should at least have a sentence that mentions this, as I think most libraries these days are assumed to use the module pattern.