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)
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: