Laravel-mix: Importing plain css within preprocessor errors out with PostCSS

[gMagicScott]

• 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

[gMagicScott]

This error is not thrown when done within SCSS files. I haven't tried other preprocessers

[ankurk91]

@gMagicScott
I faced this issue when upgrading to v1.0.0,
i fixed this by removing the .css extension from paths.

// see there is no .css in last
@import "~bootstrap/dist/css/bootstrap";
@import '~font-awesome/css/font-awesome';

 mix.styles(['./resources/assets/css/app.css'],  'public/css/app.css')

I was working fine till v0.12.1

[JeffreyWay]

Yeah I can't figure out why this is the case. I know there's a Sass GitHub repo issue related to importing files that have a .css extension, but that doesn't explain why it worked in earlier versions of Mix and not now.

Can anyone figure out why?

[gMagicScott]

@ankurk91
Removing the extension doesn't work with Stylus. Without an extension it will only grab .styl files

@JeffreyWay
From my testing, S(A|C)SS seems to work correctly in that scenario. Some of the research I've done before creating an issue here seemed to point at ExtractTextPlugin. There was a suggestion I wanted to try to wrap all CSS related compilation in ExtractText, but I couldn't totally follow how all the rules are defined in Mix.

In the latest 0.* version, normal css was imported into Stylus files, but it was hoisted to the top of the output instead of being inline where the @import was.

With the way Webpack pulls and processes everything, I don't see why there should be an issue pulling any type of preprocessor format, compiling, and inserting where it was referenced.

[ruchern-chong]

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

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

[mforcer]

@gMagicScott This error was thrown when importing a .css inside a .scss file. I needed to remove the .css extension from those imports to get it compiling again.

Not sure if I've misunderstood whats going on.

[ruchern-chong]

@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.

[ipa1981]

Faced the same with LESS

[ruchern-chong]

@ipa1981 Just temporary remove ".css" file extension while importing to your LESS file. It should work.

[ipa1981]

@ruchern when .css is removed from xxx.css it tries to resolve to xxx.less, and some modules have no less version. That's the problem.

[Braunson]

Anyone still getting this error?

[ipa1981]

Hard to reproduce now as probably workaround was found. But it seems I don't get same problem now.