You did not set any plugins, parser, or stringifier. Right now, PostCSS does nothing. #405

trigun539 · 2019-03-19T12:13:50Z

Have tried a bunch of configurations from the documentation but postcss-loader is not picking up the postcss plugins. I had the configuration working on webpack v3 using older versions of the libraries/plugins. Upgraded to webpack v4 and latest plugins versions and now postcss can't pickup the plugin configuration.

Details

Configuring postcss-loader with following plugins:

precss
autoprefixer
lost

Error (Logs|Stacks)

You did not set any plugins, parser, or stringifier. Right now, PostCSS does nothing. Pick plugins for your case on https://www.postcss.parts/ and use them in postcss.config.js.

Reproduction (Code)

Please see:

https://gist.github.com/trigun539/2b8ebf739b64881ec0b3ea2a9e37ba92

Environment

OS: Windows
node: 8.15.0
npm: 6.4.1
postcss-loader: 3.0.0
precss: 4.0.0
autoprefixer: 9.4.10
lost: 8.1.0
mini-css-extract-plugin: 0.5.0

The text was updated successfully, but these errors were encountered:

alexander-akait · 2019-03-19T12:30:06Z

Because you do not have plugins for postcss-loader, it is error from postcss

michael-ciniawsky · 2019-03-19T13:00:49Z

@trigun539 Rename postcss.conf.js to postcss.config.js and it should work. See https://github.com/michael-ciniawsky/postcss-load-config#usage for more info about valid config names/conventions

trigun539 · 2019-03-19T14:23:59Z

@michael-ciniawsky Sorry the file actually is postcss.config.js. It is still not working.

trigun539 · 2019-03-19T14:24:41Z

Because you do not have plugins for postcss-loader, it is error from postcss

I have precss/autoprefixer/lost postcss plugins that should work.

michael-ciniawsky · 2019-03-19T14:31:55Z

https://gist.github.com/trigun539/2b8ebf739b64881ec0b3ea2a9e37ba92#gistcomment-2866264

eric-beaufol · 2019-05-15T09:25:53Z

If you have the same problem, i've found an explication/solution here :
postcss/postcss#1247

ShaileshInfyom · 2019-07-20T03:02:02Z

any solution? i getting the same issue

You did not set any plugins, parser, or stringifier. Right now, PostCSS does nothing. Pick plugins for your case on https://www.postcss.parts/ and use them

ShaileshInfyom · 2019-07-23T04:44:19Z

any solution? i getting the same issue

You did not set any plugins, parser, or stringifier. Right now, PostCSS does nothing. Pick plugins for your case on https://www.postcss.parts/ and use them

I got a solution. i using a laravel mix. solution found here

ahamid · 2019-09-18T02:26:14Z

As an aside, I have discovered that despite a valid (webpack) postcss-loader configuration with plugins present, from what I can tell postcss-advanced-variables will cause this error to be emitted since it apparently invokes postcss internally without plugins; I'm not sure if this is a bug per se, or whether there is some way to refrain from warning when explicitly invoked like this.

https://github.com/jonathantneal/postcss-advanced-variables/blob/master/src/lib/transform-import-atrule.js#L75

wadtech · 2019-09-18T11:03:33Z

Is it possible to get more of a stack trace for this error? I'm getting it now but everything seems to be working correctly otherwise. I presume it's some other dependency somewhere in the tree.

ahamid · 2019-09-18T17:33:48Z

@wadtech I just dumped a couple of console.logs in postcss processor.js process function, that's how I tracked the source of mine down

AntonioRedondo · 2019-12-30T22:51:02Z

I was receiving this error on console even when my CSS was processed with no problems. In my case was due to @import statements on CSS files. Adding postcss-import fixed the issue but this plug-in is redundant since @import statements are already tackled by css-loader.

bensampaio · 2020-09-17T12:53:31Z

I am trying to upgrade to postcss@8.0.5, postcss-loader@4.0.2 and autoprefixer@10.0.0 but I am getting this issue as well. Webpack seems to build as expected but prints these warnings a lot of times before printing the final output. I noticed that I only get these warning in development mode.

Here's my updated loader config:

loader: 'postcss-loader',
    options: {
        postcssOptions: {
            plugins: [
                ['autoprefixer', {
                    overrideBrowserslist: targets,
                }],
            ],
        },
        sourceMap: true,
    },
}

Any idea what could be causing this issue?

alexander-akait · 2020-09-17T13:46:43Z

@bensampaio Do you use monorepos?

bensampaio · 2020-09-17T15:30:50Z

@evilebottnawi yes, I do. Is that the cause of the issue?

alexander-akait · 2020-09-18T11:32:02Z

@bensampaio some packages doesn't have postcss.config.js, you need to put it in each packages or in root or setup in loader using config

bensampaio · 2020-09-18T12:16:59Z

@evilebottnawi I am putting it in the loader as I showed above:

loader: 'postcss-loader',
    options: {
        postcssOptions: {
            plugins: [
                ['autoprefixer', {
                    overrideBrowserslist: targets,
                }],
            ],
        },
        sourceMap: true,
    },
}

I can't move this configuration to postcss.config.js because the value of overrideBrowserslist is dynamic. In any case I tried creating a postcss.config.js on every package in my monorepo and this issue still remains. In my webpack config I use mini-css-extract-plugin, css-loader, sass-loader, postcss-loader and optimize-css-assets-webpack-plugin. Could it be related to any of these? Do they use postcss internally without configuration?

bensampaio · 2020-09-18T12:21:39Z

If I remove postcss-loader from my configuration then the problem is gone. But this isn't exactly what I want xD

alexander-akait · 2020-09-18T12:32:18Z

@bensampaio Please:

migrate from optimize-css-assets-webpack-plugin on https://github.com/webpack-contrib/css-minimizer-webpack-plugin, it is official css plugin for minimizing with cache/parallels/source maps/etc
In any case I tried creating a postcss.config.js on every package in my monorepo and this issue still remains, you need to put it in root, because you compile files from node_modules and we don't know which plugins should be used there

bensampaio · 2020-09-19T10:14:42Z

@evilebottnawi I did create a postcss.config.js file in the root of my monorepo. That didn't fix the issue :/ And this was just a test anyway because as I mentioned my postcss config needs to be in the loader. I have multiple webpack configs running with different browserslist configurations and as far as I know there's no way I can move that out from my webpack configs. If this loader offers options to configure postcss then I would expect that to be enough... Is there anyway I can help figure out the source of these warnings since none of the solutions so far helped?

I will migrate to css-minimizer-webpack-plugin as you mentioned, thank you!

alexander-akait · 2020-09-19T14:13:55Z

@bensampaio Please create reproducible test repo, I can't help without code

vwpo · 2020-09-20T20:10:27Z

@bensampaio did you solve the problem? I have exactly the same error! I also use mini-css-extract-plugin, css-loader and monorepos

bensampaio · 2020-09-23T14:40:43Z

@evilebottnawi I am trying to reproduce the issue in this repo: https://github.com/bensampaio/postcss-monorepo-issue. However, webpack doesn't even seem to be able to resolve the postcss-loader while it is able to resolve all the other loaders. I am not sure if this is related but it is definitely weird that I only get this issue with postcss-loader. Could you have a look?

alexander-akait · 2020-09-23T16:05:30Z

@bensampaio Because you run run build:dev in @test/app workspace but there are no loaders for @test/app, sorry problems is not related to webpack or postcss-loader, why it is work for babel-loader, because it is hoist to node_modules/babel-loader, but no node_modules/postcss-loader

alexander-akait · 2020-09-23T16:06:21Z

More information yarnpkg/yarn#7572

Arvi2k17 · 2021-04-20T04:19:05Z

I was getting this warning in my NX workspace . I don't know how to find the webpack in my NX workspace and post config.css , I tried creating a webpack.conf.js and post.config.js but didn't solved my problem . Can anyone guide me on this ?

This is my project structure

Bessonov · 2021-05-13T10:09:31Z

you need to put it in root, because you compile files from node_modules and we don't know which plugins should be used there

Thanks @alexander-akait , that helped me to make tailwindcss work in a monorepo. Probably, it should be stated in docs.

alexander-akait · 2021-05-13T12:30:20Z

@Bessonov feel free to send PR to docs

Bessonov · 2021-05-13T13:10:18Z

@alexander-akait I don't feel like I have enough background information to put it into proper and precise wording. For example, it isn't clear for me why it works this way. I start the process from a sub-module and expect that the configuration in this sub-module should be enough. And how it's expected to work, if there are multiple frontend modules which requires different postcss configuration.

alexander-akait · 2021-05-13T13:24:39Z

it is due module hoist in monorepos and default cwd...

jvxiao · 2021-08-30T07:32:49Z

I meet the same problem when I use autoprefixer plugin. I tried many solutions I've found by Google , none of they woked. But ironically, it's just beacuse I just wrote plugin rather plugins in postcss.config.js.

sarink · 2021-10-05T17:47:43Z

Is there any way to disable this yet? I'm using next.js and the docs clearly state you can disable postcss during development https://nextjs.org/docs/advanced-features/customizing-postcss-config#customizing-plugins however if I do this, my terminal is flooded with warnings.

davidlowry · 2021-10-22T12:15:43Z

This error message can also happen if your yarn config has changed and you haven't yet re-run yarn install - and it'll usually be paired with an unstyled CSS output from the otherwise functioning webpack server. yarn install (etc.) resolved for me. Specific scenario was I had made changes on one machine, pushed to production and pulled back from repo to another machine; hit 'guard' and got that message, and mostly unstyled output on localhost.

findawayer · 2021-11-19T11:21:03Z

In my case, changing the value of plugins property from function to array has solved the issue.

Before:

module.exports = {
  plugins: () => [
    require('postcss-preset-env'),
    require('cssnano'),
  ],
};

After:

module.exports = {
  plugins: [
    require('postcss-preset-env'),
    require('cssnano'),
  ],
};

Seems like people have different experience on this, I just want to share mine.

axlroseart · 2021-11-22T03:57:34Z

I am trying to upgrade to postcss@8.0.5, postcss-loader@4.0.2 and autoprefixer@10.0.0 but I am getting this issue as well. Webpack seems to build as expected but prints these warnings a lot of times before printing the final output. I noticed that I only get these warning in development mode.

Here's my updated loader config:
loader: 'postcss-loader',
    options: {
        postcssOptions: {
            plugins: [
                ['autoprefixer', {
                    overrideBrowserslist: targets,
                }],
            ],
        },
        sourceMap: true,
    },
}
Any idea what could be causing this issue?

try this:
plugins: [ require('autoprefixer'), ],
this worked for me.

najathi · 2021-12-14T14:42:49Z

npm i --save-dev postcss postcss-focus postcss-preset-env postcss-flexbugs-fixes

copy to package.json

"peerDependencies": {
    "postcss": "..."
 }

more config checkout this link: https://evilmartians.com/chronicles/postcss-8-plugin-migration

create postcss.config.js:

module.exports = {
    plugins: [
        'postcss-flexbugs-fixes',
        [
            'postcss-preset-env',
            {
                autoprefixer: {
                    flexbox: 'no-2009',
                },
                stage: 3,
                features: {
                    'custom-properties': false,
                },
            },
        ],
        require('postcss-focus'),
    ]
}

GoulartNogueira · 2022-07-14T20:53:49Z

If you are on Nuxt.js and just want to remove the anoying warning, this will solve:

#405

elcferreira · 2022-09-28T15:00:20Z

If you are on Nuxt.js and just want to remove the anoying warning, this will solve:

#405

I'm also having this problem on Nuxt.js, once I click on your link I back to this issue.

Have you an idea which solution could I apply on Nuxt.js?

aemg93 · 2022-10-20T03:31:15Z

in the nuxt.config.js file
build: {
postcss: null,
},

michael-ciniawsky closed this as completed Mar 19, 2019

gavinmcfarland mentioned this issue Apr 27, 2021

Using with Nuxt.js gavinmcfarland/flex-gap-polyfill#33

Closed

You did not set any plugins, parser, or stringifier. Right now, PostCSS does nothing. #405

You did not set any plugins, parser, or stringifier. Right now, PostCSS does nothing. #405

Comments

trigun539 commented Mar 19, 2019

Details

Error (Logs|Stacks)

Reproduction (Code)

Environment

alexander-akait commented Mar 19, 2019

michael-ciniawsky commented Mar 19, 2019 • edited Loading

trigun539 commented Mar 19, 2019

trigun539 commented Mar 19, 2019

michael-ciniawsky commented Mar 19, 2019

eric-beaufol commented May 15, 2019

ShaileshInfyom commented Jul 20, 2019 • edited Loading

ShaileshInfyom commented Jul 23, 2019 • edited Loading

ahamid commented Sep 18, 2019

wadtech commented Sep 18, 2019

ahamid commented Sep 18, 2019

AntonioRedondo commented Dec 30, 2019

bensampaio commented Sep 17, 2020

alexander-akait commented Sep 17, 2020

bensampaio commented Sep 17, 2020

alexander-akait commented Sep 18, 2020 • edited Loading

bensampaio commented Sep 18, 2020

bensampaio commented Sep 18, 2020

alexander-akait commented Sep 18, 2020

bensampaio commented Sep 19, 2020 • edited Loading

alexander-akait commented Sep 19, 2020 • edited Loading

vwpo commented Sep 20, 2020

bensampaio commented Sep 23, 2020 • edited Loading

alexander-akait commented Sep 23, 2020

alexander-akait commented Sep 23, 2020

Arvi2k17 commented Apr 20, 2021

Bessonov commented May 13, 2021

alexander-akait commented May 13, 2021

Bessonov commented May 13, 2021

alexander-akait commented May 13, 2021

jvxiao commented Aug 30, 2021

sarink commented Oct 5, 2021

davidlowry commented Oct 22, 2021

findawayer commented Nov 19, 2021

axlroseart commented Nov 22, 2021

najathi commented Dec 14, 2021 • edited Loading

GoulartNogueira commented Jul 14, 2022

elcferreira commented Sep 28, 2022

aemg93 commented Oct 20, 2022

michael-ciniawsky commented Mar 19, 2019 •

edited

Loading

ShaileshInfyom commented Jul 20, 2019 •

edited

Loading

ShaileshInfyom commented Jul 23, 2019 •

edited

Loading

alexander-akait commented Sep 18, 2020 •

edited

Loading

bensampaio commented Sep 19, 2020 •

edited

Loading

alexander-akait commented Sep 19, 2020 •

edited

Loading

bensampaio commented Sep 23, 2020 •

edited

Loading

najathi commented Dec 14, 2021 •

edited

Loading