postcss-loader: Webpack 2 + postcss-loader 1: TypeError: Cannot read property 'config' of null

Same “Config could not be loaded” error here. I don’t have an external config file but I’m adding plugins inline:

// bunch of other loaders...
{
  loader: 'postcss-loader',
  options: {
    plugins: () => [
      autoprefixer({ browsers: ['last 3 versions'] })
    ],
  },
}

It is just a warning, when you didn’t provide any plugins to PostCSS.

Both your config had no plugins, just set plugins and warning will be removed 😊.

We fixed this issue, just waiting for postcss-load-config release.

This is working!

Webpack 2.1.0-beta.25

new webpack.LoaderOptionsPlugin({
      test: /\.css$/,
      debug: true,
      options: {
        postcss: [
          precss(),
          autoprefixer({
            browsers: [
              'last 3 version',
              'ie >= 10',
            ],
          }),
          mqpacker(),
        ],
        context: path.join(__dirname, 'src'),
        output: {
          path: path.join(__dirname, 'dist'),
        },
      },
    }),

Right. Loading plugins with webpack2 doesn’t work yet.

I took the time to investigate more why it’s not working and found it’s because of a bug when style-loader is in the loader chain.

webpack/webpack#3136 for reference.

Possible solutions:

• Load plugins with a config file (e.g. postcss.config.js)
• Use weback 2.1.0-beta22 and use the webpack 1 config style.
• Maybe use webpack.LoaderOptionsPlugin to load the plugins (not sure if this will work)

Using webpack2 + postcss-loader 1.1, warning is now:

PostCSS Config could not be loaded. Please check your PostCSS Config.

How do I fix this ?

@DylanPiercey

{
  loader: 'postcss-loader', options: { config: 'alternative/path/to/postcss.config.js' }
}

PostCSS config:

{
    test: /\.scss$/,
    exclude: ['/node_modules/'],
    use: [{
        loader: 'style-loader',
        query: {
            plugins: [],
        },
    }, {
        loader: 'css-loader',
        query: {
            sourceMap: true,
            plugins: [],
        },
    }, {
        loader: 'postcss-loader',
        query: {
            plugins: () => ([
                require('autoprefixer')({
                    browsers: ['last 2 versions', 'ie > 8'],
                }),
            ]),
            // If you disable the style-loader
            // the below will work but styles
            // will not actually be compiled
            // plugins: [
            //     require('autoprefixer')({
            //         browsers: ['last 2 versions', 'ie > 8'],
            //     }),
            // ],
        }
    }, {
        loader: 'sass-loader',
        query: {
            sourceMap: true,
            plugins: [],
        },
    }]
},

Package details:

{
  "name": "hassle",
  "version": "0.0.0",
  "description": "Hassle an event organisation app",
  "main": "index.js",
  "scripts": {
    "dev": "NODE_ENV=development node build/server.js",
    "build": "NODE_ENV=production webpack --config build/webpack.prod.js",
    "test": "echo 'lets implement'"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/Shipwrecked/Hassle.git"
  },
  "author": "Otis Wright",
  "license": "MIT",
  "bugs": {
    "url": "https://github.com/Shipwrecked/Hassle/issues"
  },
  "homepage": "https://github.com/Shipwrecked/Hassle#readme",
  "dependencies": {},
  "devDependencies": {
    "autoprefixer": "^6.5.4",
    "babel-core": "^6.2",
    "babel-loader": "^6.2",
    "babel-preset-env": "^1.0",
    "css-loader": "^0.26",
    "debug": "git://github.com/visionmedia/debug#master",
    "file-loader": "^0.9",
    "node-sass": "^4.0",
    "postcss-loader": "^1.2.1",
    "rimraf": "^2.5",
    "sass-loader": "^4.1",
    "style-loader": "^0.13",
    "webpack": "^2.2.0-rc.1",
    "webpack-dev-server": "^2.2.0-rc.0"
  }
}

I’m seeing the same warning in v2.1.0-beta.27 but only when style-loader is in my chain.

I also noticed that if I set plugins: to [] instead of () => [] everything works as expected without style-loader, but completely blows up the build when style-loader is in the chain and I get a more cryptic warning:

Module build failed: TypeError: Cannot read property 'postcss' of null

Which is weird, because I’d expect it to fail regardless of whether or not style-loader is in the chain.

Here’s his full config file for reference

http://pastebin.com/Lmka3rju

@ai released 👍 @lourd

module.exports = (ctx) => {
 return { // <-- ;)
    plugins: [
      require('autoprefixer')(ctx.plugin)
    ]
  }
}

It works when I use a postcss.config.js or .postcssrc file in the top directory of my project, using these formats:

// js
module.exports = {
  plugins: [
    require('autoprefixer')
  ]
}

// rc
{
  "plugins": {
    "autoprefixer": {}
  }
}

It does not work when I export a function, as postcss-load-config would lead me to believe

module.exports = (ctx) => {
  plugins: [
    require('autoprefixer')(ctx.plugin)
  ]
}
// [TypeError: Cannot read property 'plugins' of undefined]

It also does not work when I put the config file somewhere other than the top level directory, such as in config/. I thought that might “just work” after reading the cosmiconfig docs, but it looks like they’re swapping what I normally think of as “lower” or “higher” in the filesystem – no “just working” there. If I’m going to have to specify my postcss config separately from my webpack config, I would strongly prefer to at least keep it out of the main directory.

Are you sure this is just a warning? because I tried to setup webpack 2 + postcss-loader 1 and couldn’t get it to work.