Skip to content
This repository has been archived by the owner on Aug 11, 2022. It is now read-only.

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

Open
gearboxdesign opened this issue Nov 15, 2016 · 2 comments
Labels

Comments

@gearboxdesign
Copy link

gearboxdesign commented Nov 15, 2016

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
  ])
}
@borodean borodean added the bug label Nov 16, 2016
@FourwingsY
Copy link

FourwingsY commented Nov 19, 2016

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

@gearboxdesign
Copy link
Author

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

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
Projects
None yet
Development

No branches or pull requests

3 participants