ERROR in ./~/css-loader!./~/postcss-loader/lib!./~/rc-range-slider/lib/Slider/slider.css

Question

I added the rc-range-slider package to my project and started getting the error messages listed in the next paragraph when I tried to compile my react project using Webpack ^2.5.1. The suggested webpack config in the NPM site for this slider is compatible with the previous versions of webpack. The Webpack configuration in the last paragraph below is my attempt to fit it into the new Webpack configuration constraints. But I am getting the following error messages:

Please see a demo at Github

ERROR in ./~/css-loader!./~/postcss-loader/lib!./~/rc-range-slider/lib/Slider/slider.css
Module build failed: Error: No PostCSS Config found in: \js\node_modules\rc-range-slider\lib\Slider
    at Error (native)
    at \js\node_modules\postcss-load-config\index.js:51:26
 @ ./~/style-loader!./~/css-loader!./~/postcss-loader/lib!./~/rc-range-slider/lib/Slider/slider.css 4:14-105 18:2-22:4 19:20-111
 @ ./~/rc-range-slider/lib/Slider/slider.css
 @ ./~/rc-range-slider/lib/Slider/index.js
 @ ./~/rc-range-slider/lib/index.js
 @ ./src/search-component.jsx
 @ ./src/search-component.jsx
 @ ./src/search-container.js
 @ ./src/routes.js
 @ ./src/index.js
 @ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server babel-polyfill webpack-dev-server/client?http://localhost:8080 webpack/hot/only-dev-server ./src/index.js

ERROR in ./~/css-loader!./~/postcss-loader/lib!./~/rc-tipso/lib/Tipso/BaseTipso/base_tipso.css
Module build failed: Error: No PostCSS Config found in: \js\node_modules\rc-tipso\lib\Tipso\BaseTipso
    at Error (native)
    at \js\node_modules\postcss-load-config\index.js:51:26
 @ ./~/style-loader!./~/css-loader!./~/postcss-loader/lib!./~/rc-tipso/lib/Tipso/BaseTipso/base_tipso.css 4:14-115 18:2-22:4 19:20-121
 @ ./~/rc-tipso/lib/Tipso/BaseTipso/base_tipso.css
 @ ./~/rc-tipso/lib/Tipso/BaseTipso/index.js
 @ ./~/rc-tipso/lib/Tipso/index.js
 @ ./~/rc-tipso/lib/index.js
 @ ./~/rc-range-slider/lib/Slider/Dragger.js
 @ ./~/rc-range-slider/lib/Slider/index.js
 @ ./~/rc-range-slider/lib/index.js
 @ ./src/search-component.jsx
 @ ./src/search-component.jsx
 @ ./src/search-container.js
 @ ./src/routes.js
 @ ./src/index.js
 @ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server babel-polyfill webpack-dev-server/client?http://localhost:8080 webpack/hot/only-dev-server ./src/index.js
webpack: Failed to compile.

Below is my webpack configuration:

var webpack = require( 'webpack' ),
    merge = require( 'lodash/merge' ),
    ExtractTextPlugin = require( 'extract-text-webpack-plugin' ),
    hotModuleReplacement = new webpack.HotModuleReplacementPlugin(),
    constants = {
            process:{
                env: {
                    NODE_ENV: JSON.stringify( 'development' )
                }
            }
        },
    extractSass = new ExtractTextPlugin({
            allChunks: true,
            disable: constants.process.env.NODE_ENV !== 'development',
            filename: 'public/main.css'
        }),
    getStylesheets = function( ...names ){
            const options = {
                    data: '$env: ' + constants.process.env.NODE_ENV + ';',
                    includePaths: [ 'res/main', 'node_modules' ],
                    sourceMap: true
                  },
                  specifics = {
                    css: {
                        modules: true,
                        importLoaders: 1,
                        localIdentName: '[name]__[local]___[hash:base64:5]',
                    },
                    postcss: {
                        postcss: () => [ 
                            require( 'postcss-import' )({ 
                                    addDependencyTo: webpack 
                                }),
                            require( 'postcss-url' )(),
                            require( 'postcss-cssnext' )(),
                                  // add your <plugins> here
                                  // ...
                                  // and if you want to compress,
                                  // just use css-loader option that already use cssnano under the hood
                            require( 'postcss-browser-reporter' )(),
                            require( 'postcss-reporter' )()
                        ]
                    },
                  };
            return names.map( 
                    constants.process.env.NODE_ENV ?
                    n => ({ loader: n + '-loader' }) : 
                    n => ({ loader: n + '-loader', options: merge( {}, options, ( specifics[ n ] | {} ))}));
        },
    getJSX = ( ...names ) => 
        names.map( n => ({
            test: /\.jsx?$/,
            exclude: /node_modules/,
            loader: n + '-loader',
            query: {
                plugins: [ 'transform-decorators-legacy', 'transform-runtime' ],
                presets: [ 'latest', 'react', 'airbnb' ]
            }
        }));

module.exports = {
    entry: [
        'babel-polyfill',
        'webpack-dev-server/client?http://localhost:8080',
        'webpack/hot/only-dev-server',
        './src/index.js'
    ],
    devtool: 'source-map',
    module: {
        rules:[ 
            ...getJSX( 'react-hot', 'babel' ),
            {
                test: /\.css$/,
                use: extractSass.extract({ 
                    use: getStylesheets( 'style', 'css', 'postcss' ),
                    fallbackLoader: 'style-loader'
                })
            }
        ],
    },
    resolve: {
        extensions: ['.jsx', '.js', '.json', 'css']
    },
    output: {
        path: __dirname,
        publicPath: '/',
        filename: 'main.js'
    },
    devServer: {
        historyApiFallback: true,
        contentBase: './webpack_html',
        hot: true
    },
    plugins: [ hotModuleReplacement, extractSass, new webpack.DefinePlugin( constants )]
};

Answer 1

All magic is in getStylesheets. Here

 return names.map( 
                    constants.process.env.NODE_ENV ?
                    n => ({ loader: n + '-loader' }) : 
                    n => ({ loader: n + '-loader', options: merge( {}, options, ( specifics[ n ] | {} ))}));

You have

constants = {
            process:{
                env: {
                    NODE_ENV: JSON.stringify( 'development' )
                }
            }
        }

constants.process.env.NODE_ENV will be always true because only empty string will return false. So you will always map

n => ({ loader: n + '-loader' })

and you miss one line

( specifics[ n ] || {} )

Working example.

return names.map(
        constants.process.env.NODE_ENV !== '"development"' ?
                n => ({ loader: n + '-loader' }) :
    n => ({ loader: n + '-loader', options: merge( {}, options, ( specifics[ n ] || {} ))}));

Also there is no postcss-browser-reporter package in demo