Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
tomeraz opened this issue Oct 26, 2016 · 46 comments
Closed

Comments

@tomeraz
Copy link

tomeraz commented Oct 26, 2016

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
Copy link

azat-io commented Oct 26, 2016

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
Copy link
Contributor

ai commented Oct 26, 2016

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.

@ai ai closed this as completed Oct 26, 2016
@gaastonsr
Copy link

gaastonsr commented Oct 27, 2016

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
Copy link

lourd commented Oct 27, 2016

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
Copy link

lourd commented Oct 27, 2016

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
Copy link
Contributor

ai commented Oct 27, 2016

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

@ai
Copy link
Contributor

ai commented Oct 27, 2016

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

@ai
Copy link
Contributor

ai commented Oct 27, 2016

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

@lourd
Copy link

lourd commented Oct 27, 2016

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
Copy link
Member

@ai released 👍
@lourd

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

@lourd
Copy link

lourd commented Oct 27, 2016

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
Copy link
Member

michael-ciniawsky commented Oct 28, 2016

@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
Copy link
Contributor

ai commented Oct 28, 2016

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

@tomeraz
Copy link
Author

tomeraz commented Oct 28, 2016

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
Copy link
Member

michael-ciniawsky commented Oct 28, 2016

@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
Copy link
Author

tomeraz commented Oct 28, 2016

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
Copy link

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
Copy link

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

Docs for reference.

@albertogasparin
Copy link

The options key is part of some new webpack2 changes.

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

@gaastonsr
Copy link

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

@michael-ciniawsky
Copy link
Member

michael-ciniawsky commented Oct 28, 2016

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
Copy link
Author

tomeraz commented Oct 28, 2016

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

@michael-ciniawsky
Copy link
Member

@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
Copy link

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

@tomeraz
Copy link
Author

tomeraz commented Oct 29, 2016

@gaastonsr haven't used any plugins

@gaastonsr
Copy link

gaastonsr commented Oct 30, 2016

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
Copy link

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
Copy link

@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
Copy link

Here's his full config file for reference

http://pastebin.com/Lmka3rju

@gaastonsr
Copy link

gaastonsr commented Nov 1, 2016

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
Copy link

Great, thank you @gaastonsr .

@albv
Copy link

albv commented Nov 2, 2016

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
Copy link

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

@ImranAhmed
Copy link

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
Copy link

soluml commented Dec 9, 2016

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
Copy link

@soluml same issue.

@chopfitzroy
Copy link

Using webpack v2.2.0-rc.1

@ai
Copy link
Contributor

ai commented Dec 20, 2016

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

@chopfitzroy
Copy link

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
Copy link
Contributor

ai commented Dec 20, 2016

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

@DylanPiercey
Copy link

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

@michael-ciniawsky
Copy link
Member

@DylanPiercey

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

@ai
Copy link
Contributor

ai commented Jan 8, 2017

@michael-ciniawsky did we already release config option?

@michael-ciniawsky
Copy link
Member

michael-ciniawsky commented Jan 8, 2017

@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
Copy link
Contributor

ai commented Jan 8, 2017

“1 month ago” 😅

Yeap, we need a Config section in options docs.

@LoganBarnett
Copy link

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.

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

No branches or pull requests