Issue with sass and postcss/autoprefixer

[lvauvillier]

...
    .visible-print-inline-block {
      display: none !important; }
      @media print {
        .visible-print-inline-block {
          display: inline-block !important; } }
@media print {
      .hidden-print {
        display: none !important; } }
     is not a PostCSS plugin
        at Processor.normalize (/Users/me/Documents/workspace/testproject/node_modules/postcss/lib/processor.js:60:23)
        at new Processor (/Users/me/Documents/workspace/testproject/node_modules/postcss/lib/processor.js:23:29)
        at Object.postcss (/Users/me/Documents/workspace/testproject/node_modules/postcss/lib/postcss.js:55:12)

Here is my webpack config file :

import path from 'path';
import ExtractTextPlugin from 'extract-text-webpack-plugin';
import autoprefixer from 'autoprefixer';

export default {
  entry: './src/index.js',
  output: {
    path: path.join(__dirname, 'dist'),
    filename: 'bundle.js',
    libraryTarget: 'commonjs2',
  },
  resolve: {
    extensions: ['', '.js', '.json', '.css', '.scss', '.html'],
  },
  module: {
    loaders: [{
      test: /\.css/,
      loader: ExtractTextPlugin.extract('style', 'css'),
    }, {
      test: /\.js?$/,
      loader: 'babel',
      exclude: /node_modules/,
    }, {
      test: /\.json$/,
      loader: 'json',
    }, {
      test: /\.(scss|sass)$/,
      loader: ExtractTextPlugin.extract('style', ['css', 'postcss', 'sass']),
    }, {
      test: /.(png|jpg|gif)$/,
      loader: 'url?limit=30000',
    }, {
      test: /.(woff2?|ttf|eot|svg)$/,
      loader: 'url?limit=10000',
    }],
  },
  postcss() {
    return [autoprefixer];
  },
  plugins: [
    new ExtractTextPlugin('styles.css'),
  ],
  devServer: {
    proxy: {
      '/graphql': 'http://localhost:3010/graphql',
    },
    historyApiFallback: {
      index: '/',
    },
  },
};

[ai]

Could you show full error stacktrace?

[lvauvillier]

The stacktrace is too long to post here as it contains the full sass processed bootstrap code.

Here is the another version with the beginning :

> testproject@1.0.0 build /Users/me/Documents/workspace/node/testproject
> env NODE_ENV=production babel-node ./node_modules/.bin/webpack --config webpack.config.js

Hash: 291bfa15d557c3739953
Version: webpack 1.13.1
Time: 1099ms
    Asset     Size  Chunks             Chunk Names
bundle.js  10.3 kB       0  [emitted]  main
    + 4 hidden modules

ERROR in ./~/css-loader!./~/postcss/lib/postcss.js!./~/sass-loader!./vendor/bootstrap/scss/bootstrap.scss
Module build failed: Error: /*!
 * Bootstrap v4.0.0-alpha.2 (http://getbootstrap.com)
 * Copyright 2011-2015 Twitter, Inc.
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
 */
/*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */
html {
  font-family: sans-serif;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%; }

body {
  margin: 0; }

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section,
summary {
  display: block; }

... [trunkated css code]

.visible-print-block {
      display: none !important; }
      @media print {
        .visible-print-block {
          display: block !important; } }

    .visible-print-inline {
      display: none !important; }
      @media print {
        .visible-print-inline {
          display: inline !important; } }

    .visible-print-inline-block {
      display: none !important; }
      @media print {
        .visible-print-inline-block {
          display: inline-block !important; } }

    @media print {
      .hidden-print {
        display: none !important; } }
     is not a PostCSS plugin
        at Processor.normalize (/Users/me/Documents/workspace/node/testproject/node_modules/postcss/lib/processor.js:60:23)
        at new Processor (/Users/me/Documents/workspace/node/testproject/node_modules/postcss/lib/processor.js:23:29)
        at Object.postcss (/Users/me/Documents/workspace/node/testproject/node_modules/postcss/lib/postcss.js:55:12)

[rmurphey]

I am running into a similar issue; I spent some time trying to create a reduced test case but didn't have any luck. I think this is due to some bad combination of webpack, Babel, postcss, postcss-loader, and maybe some other things that I haven't tracked down yet. Right now I'm only able to repro this when npm link-ing to a local version of a dependency; loading the same (private) dependency from a git URL works fine. I will do my best to get you more details as I find them, but in the meantime I wanted to share a fuller stack trace in case it's helpful.

ModuleBuildError: Module build failed: Error: .sg-Body,.sg-Heading1,.sg-Heading2,.sg-Heading3,.sg-Heading4,.sg-Heading5,.sg-Heading6,a,fieldset,h1,h2,h3,h4,h5,h6,html,ol,p,ul{margin:0;padding:0;font:inherit;box-sizing:border-box;vertical-align:baseline}fieldset{border:none}html{font-family:Helvetica Neue,Helvetica,Arial,Lucida Grande,sans-serif;font-size:100%}h1,h2,h3,h4,h5,h6{font-size:1rem;font-weight:400}ol,ul{padding-left:2rem;margin:1rem 0}.sg-Heading1{font-weight:700}.sg-Heading1,.sg-Heading2{margin-bottom:1.2em;font-size:1.4375rem}.sg-Heading2{font-weight:400}.sg-Heading3{font-size:1.125rem}.sg-Heading3,.sg-Heading4{margin-bottom:1.2em;font-weight:700}.sg-Heading4{font-size:1rem}.sg-Heading5{font-size:1rem}.sg-Heading5,.sg-Heading6{margin-bottom:1.2em;font-weight:400}.sg-Body,.sg-Heading6,p{font-size:.875rem}.sg-Body,p{margin-bottom:1em;line-height:1.5em;color:#000}.sg-Body--lg,p--lg{font-size:.9375rem}.sg-Body--sm,p--sm{font-size:.8125rem}.sg-Body--xs,p--xs{font-size:.6875rem}.sg-Body--secondary,p--secondary{color:#6f6f6f}.sg-Body--tertiary,p--tertiary{color:#999}a{text-decoration:none}a:hover{text-decoration:underline}.sg-TextLink--primary,a{color:#00c}.sg-TextLink--secondary{color:#77c}.sg-u-listUnstyled{margin-left:0;padding-left:0;list-style:none}
/*# sourceMappingURL=Typography.css.map*/ is not a PostCSS plugin
    at Processor.normalize (/Users/rebeccam/indeed/frontend/components-react/node_modules/postcss/lib/processor.js:60:23)
    at new Processor (/Users/rebeccam/indeed/frontend/components-react/node_modules/postcss/lib/processor.js:23:29)
    at Object.postcss (/Users/rebeccam/indeed/frontend/components-react/node_modules/postcss/lib/postcss.js:55:12)
    at DependenciesBlock.onModuleBuildFailed (/Users/rebeccam/indeed/frontend/prototype/node_modules/webpack-core/lib/NormalModuleMixin.js:315:19)
    at nextLoader (/Users/rebeccam/indeed/frontend/prototype/node_modules/webpack-core/lib/NormalModuleMixin.js:270:31)
    at /Users/rebeccam/indeed/frontend/prototype/node_modules/webpack-core/lib/NormalModuleMixin.js:292:15
    at runSyncOrAsync (/Users/rebeccam/indeed/frontend/prototype/node_modules/webpack-core/lib/NormalModuleMixin.js:173:4)
    at nextLoader (/Users/rebeccam/indeed/frontend/prototype/node_modules/webpack-core/lib/NormalModuleMixin.js:290:3)
    at /Users/rebeccam/indeed/frontend/prototype/node_modules/webpack-core/lib/NormalModuleMixin.js:259:5
    at Storage.finished (/Users/rebeccam/indeed/frontend/prototype/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:38:16)
    at /Users/rebeccam/indeed/frontend/prototype/node_modules/graceful-fs/graceful-fs.js:78:16
    at FSReqWrap.readFileAfterClose [as oncomplete] (fs.js:380:3)

[rmurphey]

OK; I feel like I've eliminated any potential dependency conflicts, and what I'm seeing now is this:

• Module1 has a dependency on Module2.
• Module2 has a dependency on Module3; specifically, JS files in Module2 require CSS from Module3: require('Module3/css/foo.css'). Webpack is set up to run /\.css$/ requires through a style!css!postcss loader.
• When Module1 installs Module2 normally -- that is, by running npm install to process a package.json file that points to Module2 using a git URL -- then everything works as expected.
• When, instead, Module1 uses npm link to link to a local version of Module2 for development purposes, I see the error above when processing a JS file from Module2 that requires a CSS file from Module3.

I'm sharing this not because it makes any sense to me, but in the hopes maybe it will trigger a light bulb for someone else.

[rmurphey]

I think for me what was happening was webpack was looking for the postcss-loader module but, due to how webpack does loader resolution, it was finding the regular postcss module and trying to use it instead. When I installed the postcss-loader module in Module2, the problem went away. Given that Module2 doesn't itself need postcss-loader, this is a bummer, but doesn't really have anything to do with postcss-loader itself. This seems to be an issue with how webpack does loader resolution when it comes to linked modules.

I think none of this was happening in the "normal" installation case because webpack was properly finding the postcss-loader module. I'm using NPM3; I can imagine that if a project was using NPM2, it could possibly run into this situation even in the normal installation case, but I'm not sure.

[tackley]

Just for others who came here with this problem from google like I did. It's exactly as @rmurphey says, although I had a much simpler problem: I had postcss installed, but not postcss-loader, and so webpack located postcss itself as a webpack loader, generating this error.

To fix: npm install --save-dev postcss-loader

[matthax]

@tackley I love you

[datatypevoid]

@tackley me too!

[NickGeneva]

@tackley papa bless

[dev-johnny-gh]

@tackley thanks for saving my life

[zhangfaliang]

@tackley hahha thanks for save my life

[dimafeldman]

Thanks @tackley

[Damaotimlin]

@tackley Love you too!

[michael-ciniawsky]

It's advised to always use the *-loader appendix to prevent loading something else @see #2986 :)

webpack.config.js

...
module: {
  rules: [
     {
       test: /\.css$/,
       use: [
         'style-loader', 
         { loader: 'css-loader' options: { importLoaders: 2 } },
         'postcss-loader', 
         'sass-loader'
        ]
      },
    ...
  ]
}
...

[ebukahills]

Thanks @tackley && @michael-ciniawsky Saved me a whole day of googling!