-
-
Notifications
You must be signed in to change notification settings - Fork 211
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
Comments
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',
}],
},
} |
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. |
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. |
I also just ran into this problem. Using the recommended Webpack 2 configuration does not work. The
Here is my config file:
The exception is being thrown from It's not crashing the build, but Autoprefixer is not running. The CSS contains no vendor prefixes. If I use a Test case here https://github.com/lourd/react-learning/tree/style, on the |
I'm also getting the same error if I give the configuration using webpack's
|
@michael-ciniawsky let’s release new version ;) |
@lourd don’t use |
@lourd did you try PostCSS Common Config? It is on the top in docs, because it is recommended way to use |
It works when I use a
It does not work when I export a function, as
It also does not work when I put the config file somewhere other than the top level directory, such as in |
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 |
@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. |
postcss-loader 1.1 is now released and it doesn’t show this warning anymore. |
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 ? |
@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? |
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 } } ] } |
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'] })
],
},
} |
We shouldn't be using the |
The
|
Oh thanks for that. Great info in there. I will try to debug this tonight if I have some time. |
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 |
@michael-ciniawsky yes, the CSS gets transformed. |
@tomeraz kk, but it's still buggy, because has metioned before |
@tomeraz did you load the plugins through the webpack 2 config? |
@gaastonsr haven't used any plugins |
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:
|
This is working! Webpack 2.1.0-beta.25
|
@marcelaraujo not working for me. Anything else you did other than
I still get |
Here's his full config file for reference |
See response below. Apparently this will also prevent the warning from showing up. |
Great, thank you @gaastonsr . |
Solution @marcelaraujo mentioned works for me with webpack 2.1.0-beta.25. No |
Probably after this fix #3306 on Webpack, solves this issue. |
I am still seeing this in v2.1.0-beta.27, tried @marcelaraujo solution too with no luck. |
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
Which is weird, because I'd expect it to fail regardless of whether or not style-loader is in the chain. |
@soluml same issue. |
Using webpack |
@CrashyBang please show you PostCSS common config and webpack config. |
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"
}
} |
@CrashyBang please check postcss-loader docs. You need to put plugins into separated |
@ai do you know if there is a way to change the config file path? |
{
loader: 'postcss-loader', options: { config: 'alternative/path/to/postcss.config.js' }
} |
@michael-ciniawsky did we already release |
“1 month ago” 😅 Yeap, we need a Config section in options docs. |
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. |
Uh oh!
There was an error while loading. Please reload this page.
Using Webpack 2 with postcss-loader 1.0 produces:
Is my webpack.config.js syntax in order?
The text was updated successfully, but these errors were encountered: