postcss-assets
postcss-assets copied to clipboard
TypeError: [object Object] must be a function, did you require() it ? with Webpack 2
Hi there,
First of all, great plugin, I found it really handy to use in a previous gulp based setup, does exactly what it says on the tin!
I seem to be having an issue with it in Webpack 2 though, the error:
'TypeError: [object Object] must be a function, did you require() it ?' referencing '/node_modules/postcss-load-plugins/lib/plugins.js' in the stack trace as the call site of the problem.
I have had no problems with the other postcss modules I use, seems to be either an issue specifically with post-css assets.
Without knowing much about the internals of postcss-load-plugins, as the error suggests it would seem to be expecting a function and not an object.
Is this a known issue or am I doing something wrong?
For reference (parts omitted for brevity):
webpack.config.js
...
module: {
rules: [
...
{
test: /\.(sass|scss|css)$/,
loader: ExtractTextPlugin.extract({
fallbackLoader: 'style-loader',
loader: [
{
loader: 'css-loader',
options: {
importLoaders: 1
}
},
{
loader: 'postcss-loader'
},
{
loader: 'sass-loader',
options: {
includePaths: [
paths.styles.main
]
}
}
]
})
}],
},
...
postcss.config.js
...
const assets = require('postcss-assets'),
autoprefixer = require('autoprefixer'),
cssnano = require('cssnano'),
inlineSVG = require('postcss-inline-svg'),
mqpacker = require('css-mqpacker');
const paths = require('./config/paths'),
dev = process.env.NODE_ENV === 'development';
module.exports = {
plugins: [
assets({
cacheBuster: true,
loadPaths: [
paths.images.main
]
}),
autoprefixer({
browsers: 'last 2 versions'
}),
inlineSVG({
path: paths.images.main
}),
mqpacker
].concat(dev ? [] : [
cssnano
])
}
Try to describe plugins as a Object. https://github.com/michael-ciniawsky/postcss-load-plugins#object it worked to me.
Thanks @FourwingsY it does work with the object configuration. Issue probably still remains around the array though potentially.