Importing plain css within preprocessor errors out with PostCSS

• Laravel Mix Version: 1.0.3
• Node Version (node -v): 6.11.0
• NPM Version (npm -v): 5.0.3
• OS: Ubuntu 16.04

Description:

I’m importing a plain CSS file from node_modules within a .styl file. In 0.12.1, this worked just fine.

Now it throws an error relating to PostCSS Module build failed: TypeError: Cannot read property 'postcss' of null

Commenting out the import statement, the project compiles fine.

Full terminal output of error

$ yarn dev           
yarn dev v0.24.6
$ npm run development 

@ development {{…project path…}}
cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js

10% building modules 0/1 modules 1 active …mary/resources/assets/stylus/app. 10% building modules 1/2 modules 1 active …laravel-mix/src/builder/mock-entr 10% building modules 2/3 modules 1 active …mary/resources/assets/stylus/app. 10% building modules 3/4 modules 1 active …mary/resources/assets/stylus/app. 10% building modules 3/5 modules 2 active …modules/style-loader/lib/addStyle 10% building modules 4/5 modules 1 active …mary/resources/assets/stylus/app. 10% building modules 4/6 modules 2 active …node_modules/style-loader/lib/url 10% building modules 5/6 modules 1 active …mary/resources/assets/stylus/app. 10% building modules 6/7 modules 1 active …e_modules/normalize.css/normalize 10% building modules 7/8 modules 1 active …de_modules/css-loader/lib/css-bas 10% building modules 8/9 modules 1 active …mary/resources/assets/stylus/app. 95% emitting
ERROR  Failed to compile with 2 errors                             12:45:24 AM
error  in ./node_modules/normalize.css/normalize.css
Module build failed: TypeError: Cannot read property ‘postcss’ of null
at Processor.normalize ({{…project path…}}/node_modules/postcss-loader/node_modules/postcss/lib/processor.js:136:12)
at new Processor ({{…project path…}}/node_modules/postcss-loader/node_modules/postcss/lib/processor.js:51:25)
at postcss ({{…project path…}}/node_modules/postcss-loader/node_modules/postcss/lib/postcss.js:73:10)
at Promise.resolve.then.then ({{…project path…}}/node_modules/postcss-loader/lib/index.js:137:12)
at process._tickCallback (internal/process/next_tick.js:109:7)
@ ./node_modules/css-loader?{“url”:true,“sourceMap”:false,“importLoaders”:1}!./node_modules/postcss-loader/lib?{“sourceMap”:false,“plugins”:[null]}!./node_modules/stylus-loader?{“sourceMap”:false}!./resources/assets/stylus/app.styl 3:10-238
@ ./resources/assets/stylus/app.styl
@ multi ./node_modules/laravel-mix/src/builder/mock-entry.js ./resources/assets/stylus/app.styl
error  in ./resources/assets/stylus/app.styl
Module build failed: ModuleBuildError: Module build failed: TypeError: Cannot read property ‘postcss’ of null
at Processor.normalize ({{…project path…}}/node_modules/postcss-loader/node_modules/postcss/lib/processor.js:136:12)
at new Processor ({{…project path…}}/node_modules/postcss-loader/node_modules/postcss/lib/processor.js:51:25)
at postcss ({{…project path…}}/node_modules/postcss-loader/node_modules/postcss/lib/postcss.js:73:10)
at Promise.resolve.then.then ({{…project path…}}/node_modules/postcss-loader/lib/index.js:137:12)
at process._tickCallback (internal/process/next_tick.js:109:7)
at runLoaders ({{…project path…}}/node_modules/webpack/lib/NormalModule.js:193:19)
at {{…project path…}}/node_modules/loader-runner/lib/LoaderRunner.js:364:11
at {{…project path…}}/node_modules/loader-runner/lib/LoaderRunner.js:230:18
at context.callback ({{…project path…}}/node_modules/loader-runner/lib/LoaderRunner.js:111:13)
at Promise.resolve.then.then.catch ({{…project path…}}/node_modules/postcss-loader/lib/index.js:176:71)
at process._tickCallback (internal/process/next_tick.js:109:7)
Asset     Size  Chunks             Chunk Names
mix.js  3.99 kB       0  [emitted]  mix
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! @ development: cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the @ development script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR!     /{{…snip…}}/.npm/_logs/2017-06-21T04_45_24_417Z-debug.log
error Command failed with exit code 2.

Steps To Reproduce:

// webpack.mix.js

const { mix } = require('laravel-mix');
mix.stylus('resources/assets/stylus/app.styl', 'public/css');

# cli
yarn add normalize.css

// app.styl

// ... more styles & imports
@import "~normalize.css"
// ... more styles & imports

# cli
yarn dev

[ruchernchong]

@JeffreyWay I have narrowed down the error to this https://github.com/JeffreyWay/laravel-mix/blob/master/src/builder/webpack-rules.js#L132

{
                        loader: 'postcss-loader',
                        options: {
                            sourceMap: (type === 'sass' && Config.processCssUrls) ? true : Mix.isUsing('sourcemaps'),
                            plugins: [
                                require('autoprefixer') <-- Problematic line
                            ].concat(Config.postCss)
                        }
                    },

As I do not use postcss myself, commenting this line of code resulted in a successful build. I hope this is good information for you to look further into it as I am not very familiar with whatever autoprefixer does.

[ruchernchong]

Got the same issue all of a sudden. Not sure what broke though.

Removing .css while importing into a .scss file worked.