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 ?