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

[tomeraz]

Using Webpack 2 with postcss-loader 1.0 produces:

TypeError: Cannot read property 'config' of null
    at .../node_modules/postcss-load-config/index.js:50:22

Is my webpack.config.js syntax in order?

  module: {
    rules: [
      {
        test: /\.jsx?$/,
        include: paths.src,
        use: {
          loader: 'babel'
        }
      },
      {
        test: /\.s?css/,
        use: [
          {
            loader: 'style-loader',
            options: {
              sourceMap: true
            }
          },
          {
            loader: 'css-loader',
            options: {
              importLoaders: 1,
              modules: true,
              localIdentName: '[path]_[name]_[local]_[hash:base64:5]'
            }
          },
          {
            loader: 'postcss-loader',
            options: {
              sourceMap: true,
              plugins: () => []
          },
          {
            loader: 'sass-loader',
            options: {
              sourceMap: true
            }
          }
        ]
      }

[azat-io]

Same problem:

import webpack from 'webpack'
import path from 'path'

import cssnext from 'postcss-cssnext'
import easyImport from 'postcss-easy-import'

export default {
    entry: path.join(process.cwd(), './components/App/index.jsx'),
    output: {
        path: path.join(process.cwd(), './public'),
        filename: 'main.js',
    },
    plugins: [
        new webpack.LoaderOptionsPlugin({
            postcss: () => [
                easyImport,
                cssnext({
                    browsers: ['last 2 versions', 'IE > 10'],
                }),
            ],
        }),
    ],

    module: {
        loaders: [{
            test: /\.jsx?$/,
            exclude: /node_modules/,
            loader: 'babel',
        }, {
            test: /\.css$/,
            loader:
                'css-loader?modules&localIdentName=[local]--[hash:base64:5]' +
                '!postcss-loader',
        }],
    },
}

[ai]

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.

[gaastonsr]

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.

[lourd]

I also just ran into this problem. Using the recommended Webpack 2 configuration does not work. The plugins key of options is not being passed to the loader. It appears that this.query only does not keys that are functions. It works fine when I make a postcss.config.js file. Otherwise I get the very cryptic:

[TypeError: Cannot read property 'config' of null]

Here is my config file:

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const autoprefixer = require('autoprefixer')

module.exports = {
  devtool: 'eval-source-map',
  entry: {
    app: './src',
  },
  output: {
    path: path.join(__dirname, './build'),
    filename: "[name].[hash:6].js",
    chunkFilename: "chunk.[id].[hash:6].js"
  },
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        loader: 'babel-loader',
      },
      {
        test: /\.css$/,
        use: [
          {
            loader: 'style-loader',
            options: {
              sourceMap: true
            }
          },
          {
            loader: 'css-loader',
            options: {
              importLoaders: 1,
              modules: true,
              localIdentName: '[name]_[local]_[hash:base64:5]'
            },
          },
        ],
      },
      {
        test: /\.scss$/,
        use: [
          {
            loader: 'style-loader',
            options: {
              sourceMap: true
            }
          },
          {
            loader: 'css-loader',
            options: {
              importLoaders: 1,
              modules: true,
              localIdentName: '[name]_[local]_[hash:base64:5]'
            },
          },
          {
            loader: 'postcss-loader',
            options: {
              sourceMap: true,
              plugins: () => [autoprefixer],
            },
          },
          {
            loader: 'sass-loader',
            options: {
              sourceMap: true,
            },
          },
        ],
      },
    ],
  },
  resolve: {
    extensions: ['.js', '.jsx'],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: 'src/index.html',
    }),
  ],
}

The exception is being thrown from loadConfig on line 60. The returned object from loaderUtils.parseQuery includes sourceMap but not plugins.

It's not crashing the build, but Autoprefixer is not running. The CSS contains no vendor prefixes. If I use a postcss.config.js file for configuration, it does.

Test case here https://github.com/lourd/react-learning/tree/style, on the style branch.

[lourd]

I'm also getting the same error if I give the configuration using webpack's LoaderOptionsPlugin.

new webpack.LoaderOptionsPlugin({
      postcss: {
        sourceMap: true,
        plugins: () => [autoprefixer],
      }
    })

[ai]

@michael-ciniawsky let’s release new version ;)

[ai]

@lourd don’t use LoaderOptionsPlugin ;) postcss-loader supports webpack 2

[ai]

@lourd did you try PostCSS Common Config? It is on the top in docs, because it is recommended way to use postcss-loader.

[lourd]

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.

[michael-ciniawsky]

@ai released 👍
@lourd

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

[lourd]

Ah, right, thanks @michael-ciniawsky. I submitted a PR to fix the example on your README, too.

I'm confused, should the new version of postcss-load-config fix this problem of webpack 2 not passing the config as expected?

[michael-ciniawsky]

@lourd yep, yep I missed that als a few times myself 😋

You mean e.g looking for the config in another dir then process.cwd()? Should be resolved now, postcss-loader will look in the dir of the file currently processed for config and move upwards if none is found.

[ai]

postcss-loader 1.1 is now released and it doesn’t show this warning anymore.

[tomeraz]

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 ?

[michael-ciniawsky]

@tomeraz This should be the correct warning, when loading fails, if you don't use postcss.config.js etc. at all, postcss-load-config shouldn't be executed. Can you show/describe your current setup?

[tomeraz]

Here:

  module: {
    rules: [
      {
        test: /\.jsx?$/,
        include: paths.src,
        use: {
          loader: 'babel'
        }
      },
      {
        test: /\.s?css/,
        use: [
          {
            loader: 'style-loader',
            options: {
              sourceMap: true
            }
          },
          {
            loader: 'css-loader',
            options: {
              importLoaders: 1,
              modules: true,
              localIdentName: '[path]_[name]_[local]_[hash:base64:5]'
            }
          },
          {
            loader: 'postcss-loader',
            options: {
              sourceMap: true,
              plugins: () => []
          },
          {
            loader: 'sass-loader',
            options: {
              sourceMap: true
            }
          }
        ]
      }

[albertogasparin]

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'] })
    ],
  },
}

[gaastonsr]

We shouldn't be using the query key insted of options in the config?

Docs for reference.

[albertogasparin]

The options key is part of some new webpack2 changes.

module.loaders –> module.rules
loaders –> use
query –> options

[gaastonsr]

Oh thanks for that. Great info in there. I will try to debug this tonight if I have some time.

[michael-ciniawsky]

hmm.. :) I will take a look at postcss-loader later, when query/options are set, postcss-loader shouldn't trigger postcss-load-config at all and no warning popping up either. Otherwise the warning is right there. @tomeraz @albertogasparin does the CSS get transformed? Because normally when postcss-load-config gets executed without config plugins === [] options === {} and the PostCSS instance should run with this 'setup'.

[tomeraz]

@michael-ciniawsky yes, the CSS gets transformed.
Compilation works well, the error seems to have no effect on it.

[michael-ciniawsky]

@tomeraz kk, but it's still buggy, because has metioned before postcss-load-coni8g shouldn't be executed and that the inline options are applied is even wierder. Seems just to be a missing/falsy check in postcss-loader I patch it later, just ignore the warning for now :)

[gaastonsr]

@tomeraz did you load the plugins through the webpack 2 config?

[tomeraz]

@gaastonsr haven't used any plugins

[gaastonsr]

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)

[marcelaraujo]

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'),
        },
      },
    }),

[BerndWessels]

@marcelaraujo not working for me. Anything else you did other than

config.plugins.push(new webpack.LoaderOptionsPlugin({

I still get PostCSS Config could not be loaded. Please check your PostCSS Config.

[gaastonsr]

Here's his full config file for reference

http://pastebin.com/Lmka3rju

[gaastonsr]

But you will still get the PostCSS Config could not be loaded. Please check your PostCSS Config. warning.

The only way to get rid of that message at the moment is to create one config file for postcss.

See response below. Apparently this will also prevent the warning from showing up.

[BerndWessels]

Great, thank you @gaastonsr .

[albv]

Solution @marcelaraujo mentioned works for me with webpack 2.1.0-beta.25. No PostCSS Config could not be loaded. Please check your PostCSS Config. warning.

[marcelaraujo]

Probably after this fix #3306 on Webpack, solves this issue.

[ImranAhmed]

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

I am still seeing this in v2.1.0-beta.27, tried @marcelaraujo solution too with no luck.

[soluml]

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.

[chopfitzroy]

@soluml same issue.

[chopfitzroy]

Using webpack v2.2.0-rc.1

[ai]

@CrashyBang please show you PostCSS common config and webpack config.

[chopfitzroy]

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"
  }
}

[ai]

@CrashyBang please check postcss-loader docs. You need to put plugins into separated postcss.config.js config.

[DylanPiercey]

@ai do you know if there is a way to change the config file path?

[michael-ciniawsky]

@DylanPiercey

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

[ai]

@michael-ciniawsky did we already release config option?

[michael-ciniawsky]

@ai Yep 😛 #145 but without being able to handle/set context, released in 1.2.0. I can add docs for it in PR for ctx

[ai]

“1 month ago” 😅

Yeap, we need a Config section in options docs.

[LoganBarnett]

For posterity: I just ran into this issue and the fix for me was downgrading file-loader from 0.11.2 to 0.11.1. I've seen nothing to indicate the degree or method of involvement.