postcss-loader: Webpack2/postcss-loader1.1.0 [object Object] must be a function

I’m trying to upgrade my project to Webpack2, and I receive the error in the subject for each import in my project for my production config. [TypeError: [object Object] must be a function, did you require() it ?]

My imports look like import styles from 'App/SearchSuggestions/SuggestedTerms/SuggestedTerms.css';

My webpack config is:

{
                test: /\.css$/,
                loader: ExtractTextPlugin.extract({
                    fallbackLoader: 'style-loader',
                    loader: [{
                        loader: 'css',
                        options: {
                            modules: true,
                            importLoaders: 1,
                            sourceMap: true
                        }
                    }, {
                        loader: 'postcss-loader',
                        options: {
                            plugins: function () {
                                return [
                                    require('postcss-smart-import')(),
                                    require('postcss-url')(),
                                    require('postcss-cssnext')(),
                                    require('postcss-inline-comment')(),
                                    require('postcss-mixins')()
                                ]
                            },
                            sourceMap: 'inline'
                        }
                    }]
                })
            }

I have a postcss.config.js, because without I received errors that postcss config was not found. PostCSS Config could not be loaded. Please check your PostCSS Config. It looks like

module.exports = {
    plugins: [
        require('postcss-smart-import')(),
        require('postcss-url')(),
        require('postcss-cssnext')(),
        require('postcss-inline-comment')(),
        require('postcss-mixins')()
    ],
    sourceMap: 'inline'
};

I have tried adding es-css-modules and postcss-modules in various combinations, but received the error [TypeError: require(...) is not a function] with all combinations.

I know I’m missing something to allow my css modules to work, I’m just not sure what. I appreciate any guidance you can provide.

About this issue

  • Original URL
  • State: closed
  • Created 8 years ago
  • Comments: 18 (5 by maintainers)

Most upvoted comments

This appears to be closed, but FWIW I got this message to go away by adding a postcss property to my webpack config object that requires the postcss config file:

webpack.config.js:

module.exports = {
    ...
    postcss: require('./postcss.config.js'),
    ...
}