borodean / postcss-assets

An asset manager for PostCSS
MIT License
537 stars 32 forks source link

TypeError: [object Object] must be a function, did you require() it ? with Webpack 2 #63

Open gearboxdesign opened 7 years ago

gearboxdesign commented 7 years ago

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
  ])
}
FourwingsY commented 7 years ago

Try to describe plugins as a Object. https://github.com/michael-ciniawsky/postcss-load-plugins#object it worked to me.

gearboxdesign commented 7 years ago

Thanks @FourwingsY it does work with the object configuration. Issue probably still remains around the array though potentially.