The loader does not apply config after search up the directory tree for configuration #98

creage · 2020-09-08T12:28:44Z

Operating System: Windows 10
Node Version: v14.9.0
NPM Version: 6.14.8
webpack Version: 4.44.1
postcss-loader Version: 4.0.0

Expected Behavior

I have postcss.config.js file in the root of the project, my webpack.config.js is imported from ./webpack/app folder. I expect my postcss configuration to be used/applied correctly.

Actual Behavior

Running webpack ends up with console messages:

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.

And the postcss.config.js file is actually loaded - I've tried to add simple console.log('Im here') to it, and this message appears in my console, as expected. But, apparently, options exported from that file are not correctly sent to postcss.

Code

// webpack.config.js
{
...
module: {
		rules: [
			{
				test: /\.css$/,
				use: [
					MiniCssExtractPlugin.loader,
					{
						loader: 'css-loader',
						options: {
							importLoaders: 1
						}
					},
					{
						loader: 'postcss-loader'
					}
				]
			},
			{
				test: /\.less$/,
				include: APPROOT,
				use: [
					MiniCssExtractPlugin.loader,
					{
						loader: 'css-loader',
						options: {
							importLoaders: 2
						}
					},
					{
						loader: 'postcss-loader'
					},
					{
						loader: 'less-loader'
					}
				]
			}
		]
	}
...
}

// postcss.config.js
module.exports = {
	plugins: [
		'autoprefixer'
	]
};

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

alexander-akait · 2020-09-08T13:12:52Z

Please provide structure of your project

alexander-akait · 2020-09-08T13:13:52Z

If you got:

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.

it means you haven't loaded config

creage · 2020-09-08T13:39:55Z

well, it's something like this

project/
    |_sources/
        |_...
    |_webpack/
        |_app/
            |_webpack.base.config.js
            |_webpack.dev.config.js
    |_webpack.config.js
    |_postcss.config.js
    |_package.json

alexander-akait · 2020-09-08T13:43:55Z

@creage How you run webpack? Does webpack.config.js uses webpack-merge? Where you have postcss-loader in webpack.config.js or in _webpack.dev.config.js ?

creage · 2020-09-08T13:47:51Z

I run it using npm script "watch:app": "nodemon --watch ../../.env --exec webpack",
Yes - I do use webpack-merge
I have my postcss-loader defined in the webpack.dev.config.js, which merges back with webpack.base.config.js

alexander-akait · 2020-09-08T13:51:00Z

Still can't reproduce 😞 Maybe you can create minimum reproducible test repo?

alexander-akait · 2020-09-08T14:33:51Z

@creage Here logic what we use for search config https://github.com/davidtheclark/cosmiconfig#explorersearch

alexander-akait · 2020-09-08T14:34:46Z

So i think you have invalid process.cwd()

creage · 2020-09-08T14:41:14Z

Well, it is extremely strange, but if I try to create a new, simpler repo - I cannot reproduce this issue either. I'll try to investigate it further.

P.S. It seems that if I add postcssOptions: { config: 'path/to/config' } - it works fine even on my prod repo...

alexander-akait · 2020-09-08T15:01:17Z

@creage

P.S. It seems that if I add postcssOptions: { config: 'path/to/config' } - it works fine even on my prod repo...

Yes, but autosearch should work out of box, can you write in console.log(process.cwd()) in webpack.config.js?

creage · 2020-09-08T15:21:32Z

Well, I hope I won't be fired for sharing this :)

It seems that not ALL accesses to postcss.config are failing, but only SOME of them.

I also compile some stuff from node_modules - could these styles be crying about missing config?

P.S. I'm also using lerna and hoist all my package deps into upper node_modules. And my repo root does not have any postcss.config.js.

> Executing task in folder client: npm run watch:app <


> client@2021.0.2 watch:app C:\Git\WorkZone\WZC\Source\packages\client
> nodemon --watch ../../.env --exec webpack

[nodemon] 2.0.4
[nodemon] to restart at any time, enter `rs`
[nodemon] watching path(s): ..\..\.env      
[nodemon] watching extensions: js,mjs,json  
[nodemon] starting `webpack`
DEV webpack.config: C:\Git\WorkZone\WZC\Source\packages\client
ROOT webpack.config: C:\Git\WorkZone\WZC\Source\packages\client

webpack is watching the files…

postcss.config: C:\Git\WorkZone\WZC\Source\packages\client
postcss.config: C:\Git\WorkZone\WZC\Source\packages\client
postcss.config: C:\Git\WorkZone\WZC\Source\packages\client
postcss.config: C:\Git\WorkZone\WZC\Source\packages\client
postcss.config: C:\Git\WorkZone\WZC\Source\packages\client
postcss.config: C:\Git\WorkZone\WZC\Source\packages\client
postcss.config: C:\Git\WorkZone\WZC\Source\packages\client
postcss.config: C:\Git\WorkZone\WZC\Source\packages\client
postcss.config: C:\Git\WorkZone\WZC\Source\packages\client
postcss.config: C:\Git\WorkZone\WZC\Source\packages\client
postcss.config: C:\Git\WorkZone\WZC\Source\packages\client
postcss.config: C:\Git\WorkZone\WZC\Source\packages\client
postcss.config: C:\Git\WorkZone\WZC\Source\packages\client
postcss.config: C:\Git\WorkZone\WZC\Source\packages\client
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.
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.
postcss.config: C:\Git\WorkZone\WZC\Source\packages\client
postcss.config: C:\Git\WorkZone\WZC\Source\packages\client
postcss.config: C:\Git\WorkZone\WZC\Source\packages\client
postcss.config: C:\Git\WorkZone\WZC\Source\packages\client
postcss.config: C:\Git\WorkZone\WZC\Source\packages\client
postcss.config: C:\Git\WorkZone\WZC\Source\packages\client
postcss.config: C:\Git\WorkZone\WZC\Source\packages\client
postcss.config: C:\Git\WorkZone\WZC\Source\packages\client
postcss.config: C:\Git\WorkZone\WZC\Source\packages\client
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.
postcss.config: C:\Git\WorkZone\WZC\Source\packages\client
postcss.config: C:\Git\WorkZone\WZC\Source\packages\client
postcss.config: C:\Git\WorkZone\WZC\Source\packages\client
postcss.config: C:\Git\WorkZone\WZC\Source\packages\client
postcss.config: C:\Git\WorkZone\WZC\Source\packages\client
postcss.config: C:\Git\WorkZone\WZC\Source\packages\client
postcss.config: C:\Git\WorkZone\WZC\Source\packages\client
postcss.config: C:\Git\WorkZone\WZC\Source\packages\client
postcss.config: C:\Git\WorkZone\WZC\Source\packages\client
postcss.config: C:\Git\WorkZone\WZC\Source\packages\client
postcss.config: C:\Git\WorkZone\WZC\Source\packages\client
postcss.config: C:\Git\WorkZone\WZC\Source\packages\client
postcss.config: C:\Git\WorkZone\WZC\Source\packages\client
postcss.config: C:\Git\WorkZone\WZC\Source\packages\client
postcss.config: C:\Git\WorkZone\WZC\Source\packages\client
postcss.config: C:\Git\WorkZone\WZC\Source\packages\client
postcss.config: C:\Git\WorkZone\WZC\Source\packages\client
postcss.config: C:\Git\WorkZone\WZC\Source\packages\client
postcss.config: C:\Git\WorkZone\WZC\Source\packages\client
postcss.config: C:\Git\WorkZone\WZC\Source\packages\client
postcss.config: C:\Git\WorkZone\WZC\Source\packages\client
postcss.config: C:\Git\WorkZone\WZC\Source\packages\client
postcss.config: C:\Git\WorkZone\WZC\Source\packages\client
postcss.config: C:\Git\WorkZone\WZC\Source\packages\client
postcss.config: C:\Git\WorkZone\WZC\Source\packages\client
postcss.config: C:\Git\WorkZone\WZC\Source\packages\client
postcss.config: C:\Git\WorkZone\WZC\Source\packages\client
postcss.config: C:\Git\WorkZone\WZC\Source\packages\client
postcss.config: C:\Git\WorkZone\WZC\Source\packages\client
postcss.config: C:\Git\WorkZone\WZC\Source\packages\client
postcss.config: C:\Git\WorkZone\WZC\Source\packages\client
postcss.config: C:\Git\WorkZone\WZC\Source\packages\client
postcss.config: C:\Git\WorkZone\WZC\Source\packages\client
postcss.config: C:\Git\WorkZone\WZC\Source\packages\client
postcss.config: C:\Git\WorkZone\WZC\Source\packages\client
postcss.config: C:\Git\WorkZone\WZC\Source\packages\client
postcss.config: C:\Git\WorkZone\WZC\Source\packages\client
postcss.config: C:\Git\WorkZone\WZC\Source\packages\client
postcss.config: C:\Git\WorkZone\WZC\Source\packages\client
postcss.config: C:\Git\WorkZone\WZC\Source\packages\client
postcss.config: C:\Git\WorkZone\WZC\Source\packages\client
postcss.config: C:\Git\WorkZone\WZC\Source\packages\client
postcss.config: C:\Git\WorkZone\WZC\Source\packages\client
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.
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.
postcss.config: C:\Git\WorkZone\WZC\Source\packages\client
postcss.config: C:\Git\WorkZone\WZC\Source\packages\client
postcss.config: C:\Git\WorkZone\WZC\Source\packages\client
postcss.config: C:\Git\WorkZone\WZC\Source\packages\client
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.
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.
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.
postcss.config: C:\Git\WorkZone\WZC\Source\packages\client
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.
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.
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.
postcss.config: C:\Git\WorkZone\WZC\Source\packages\client
postcss.config: C:\Git\WorkZone\WZC\Source\packages\client
postcss.config: C:\Git\WorkZone\WZC\Source\packages\client
postcss.config: C:\Git\WorkZone\WZC\Source\packages\client
postcss.config: C:\Git\WorkZone\WZC\Source\packages\client
postcss.config: C:\Git\WorkZone\WZC\Source\packages\client
postcss.config: C:\Git\WorkZone\WZC\Source\packages\client
postcss.config: C:\Git\WorkZone\WZC\Source\packages\client
postcss.config: C:\Git\WorkZone\WZC\Source\packages\client
postcss.config: C:\Git\WorkZone\WZC\Source\packages\client
postcss.config: C:\Git\WorkZone\WZC\Source\packages\client
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.
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.
postcss.config: C:\Git\WorkZone\WZC\Source\packages\client
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.
postcss.config: C:\Git\WorkZone\WZC\Source\packages\client
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.
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.
Time: 34729ms
Built at: 08/09/2020 17:16:57
Entrypoint App = App.css App.js

alexander-akait · 2020-09-08T15:28:52Z

If you use monorepo I recommend to set config: path.resolve(__dirname, './path/to/postcss.config.js') or you need to put config in each package

Well, I hope I won't be fired for sharing this :)

no important information here 😄

alexander-akait · 2020-09-08T15:32:17Z

I also compile some stuff from node_modules - could these styles be crying about missing config?

hm, should not, otherwise it is bug on cosmiconfig side, but looking at source code, no problems with it

creage · 2020-09-08T15:47:16Z

OK, I think I've found the issue.

So, once again - I have a monorepo, with packages. All package dependencies are hoisted to the root. Every package has it's own postcss.config.js.

Now I go into package folder, and try to build that package. And all package style files are processed by postcss-loader as expected, since there is a local postcss.config.js.

But for files that I import from other dependencies, which are in a hosited node_modules - there is no postcss.config.js, and they complain about that, as we saw before.

If I just put a copy of postcss.config from my package into the root of repo - errors gone, as cosmicsearch can locate the config.

And I think passing the right path to config file is the only correct way to fix my issue.

alexander-akait · 2020-09-08T15:58:20Z

But for files that I import from other dependencies, which are in a hosited node_modules - there is no postcss.config.js, and they complain about that, as we saw before.

Good catch, that is what I meant when I said that I recommend specifying the config option for monorepos, because we really don't know what config to use, anyway if you have ideas how we can improve it feel free to feedback

stefanmaric · 2020-09-08T19:32:47Z

I'm upgrading postcss-loader to v4 inside a monorepo (with pnpm) and I'm having this issue, even tho a config path is specified (it was specified already before the upgrade).

I get:

    Module build failed (from ../node_modules/.pnpm/thread-loader@2.1.3_webpack@4.44.1/node_modules/thread-loader/dist/cjs.js):
    Thread Loader (Worker 3)
    No PostCSS config found in: /home/sam/Code/project/frontend

Which is the right place to look it for:

$ cat /home/sam/Code/project/frontend/postcss.config.js
const path = require('path')

module.exports = {
  plugins: [
    require('postcss-import'),
    require('postcss-nesting'),
    require('postcss-custom-media')({
      importFrom: path.resolve(__dirname, 'styles/customMedia.json'),
    }),
    require('postcss-custom-properties')({
      importFrom: path.resolve(__dirname, 'styles/variables.css'),
      preserve: false,
    }),
    require('postcss-color-mod-function'),
    require('postcss-flexbugs-fixes'),
    require('autoprefixer'),
  ],
}

It tried renaming the config file to the diff versions without success.

I checked file permissions as well:

$ ls -Chal /home/sam/Code/project/frontend/postcss.config.js
-rw-rw-r-- 1 sam sam 500 sep  8 21:15 /home/sam/Code/project/frontend/postcss.config.js

What could it be? 🤔

I also tried adding a trailing slash to the string passed as postcssOptions.config in case it was being treated as a file instead of a folder.

alexander-akait · 2020-09-08T19:36:24Z

@stefanmaric Can you create reproducible test repo? Maybe we can improve DX with monorepos, I want to test old version and new version

stefanmaric · 2020-09-08T19:37:06Z

@stefanmaric Can you create reproducible test repo? Maybe we can improve DX with monorepos, I want to test old version and new version

Give me a min to try

stefanmaric · 2020-09-08T20:21:14Z

@stefanmaric Can you create reproducible test repo? Maybe we can improve DX with monorepos, I want to test old version and new version

@evilebottnawi so while creating the test case I discovered it is not related to the monorepo but to the thread-loader: https://github.com/stefanmaric/postcss-loader-monorepo-test

If you remove the two lines that include thread-loader it does work, otherwise it fails with the "not found" error.

This is the case if you use pnpms workspace or use npm inside webapp. So unrelated to monorepos.

Maybe we move it to a new issue?

alexander-akait · 2020-09-09T11:05:25Z

@stefanmaric just note - you can replace OptimizeCSSAssetsPlugin on https://github.com/webpack-contrib/css-minimizer-webpack-plugin (cache/weach cache in watch mode/parallel/source maps/etc)

alexander-akait · 2020-09-09T11:07:25Z

Other notes - you don't need ident (it is in CHANGELOG) and you can union css-loaders https://github.com/webpack-contrib/css-loader#auto

alexander-akait · 2020-09-09T11:11:42Z

@stefanmaric Yep, but on thread-loader 😞 thread-loader has low priority now, we focus on webpack@5 and compatibility, but this will be fixed, we want to use thread-loader as playground for future multithreading in webpack

Anyway you can send a fix, problem - we don't have this.fs in loader context (https://github.com/webpack-contrib/thread-loader/blob/master/src/index.js#L11)

stefanmaric · 2020-09-09T12:39:12Z

@evilebottnawi thanks for the tips! I will apply them to test repo as well to have the test case use contrib modules only. I extracted those bits from the project I'm working on which has been maintaining a webpack config in prod since 2016 — it is actually amazing it is not an uglier Frankenstein 😄

I will take a look at thread-loader and see, don't think I'm in capacity to fix it but will try.

stefanmaric · 2020-09-09T15:01:55Z

@evilebottnawi I simplified the test case config as you suggested: stefanmaric/postcss-loader-monorepo-test@018456f

As well as in the project I'm working with.

Thanks!

creage closed this as completed Sep 8, 2020

alexander-akait reopened this Sep 8, 2020

alexander-akait transferred this issue from webpack-contrib/postcss-loader Sep 9, 2020

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

The loader does not apply config after search up the directory tree for configuration #98

The loader does not apply config after search up the directory tree for configuration #98

creage commented Sep 8, 2020

alexander-akait commented Sep 8, 2020

alexander-akait commented Sep 8, 2020

creage commented Sep 8, 2020 •

edited

alexander-akait commented Sep 8, 2020

creage commented Sep 8, 2020 •

edited

alexander-akait commented Sep 8, 2020

alexander-akait commented Sep 8, 2020

alexander-akait commented Sep 8, 2020

creage commented Sep 8, 2020

alexander-akait commented Sep 8, 2020

creage commented Sep 8, 2020 •

edited

alexander-akait commented Sep 8, 2020 •

edited

alexander-akait commented Sep 8, 2020

creage commented Sep 8, 2020

alexander-akait commented Sep 8, 2020

stefanmaric commented Sep 8, 2020 •

edited

alexander-akait commented Sep 8, 2020

stefanmaric commented Sep 8, 2020

stefanmaric commented Sep 8, 2020

alexander-akait commented Sep 9, 2020

alexander-akait commented Sep 9, 2020 •

edited

alexander-akait commented Sep 9, 2020 •

edited

stefanmaric commented Sep 9, 2020

stefanmaric commented Sep 9, 2020

The loader does not apply config after search up the directory tree for configuration #98

The loader does not apply config after search up the directory tree for configuration #98

Comments

creage commented Sep 8, 2020

Expected Behavior

Actual Behavior

Code

alexander-akait commented Sep 8, 2020

alexander-akait commented Sep 8, 2020

creage commented Sep 8, 2020 • edited

alexander-akait commented Sep 8, 2020

creage commented Sep 8, 2020 • edited

alexander-akait commented Sep 8, 2020

alexander-akait commented Sep 8, 2020

alexander-akait commented Sep 8, 2020

creage commented Sep 8, 2020

alexander-akait commented Sep 8, 2020

creage commented Sep 8, 2020 • edited

alexander-akait commented Sep 8, 2020 • edited

alexander-akait commented Sep 8, 2020

creage commented Sep 8, 2020

alexander-akait commented Sep 8, 2020

stefanmaric commented Sep 8, 2020 • edited

alexander-akait commented Sep 8, 2020

stefanmaric commented Sep 8, 2020

stefanmaric commented Sep 8, 2020

alexander-akait commented Sep 9, 2020

alexander-akait commented Sep 9, 2020 • edited

alexander-akait commented Sep 9, 2020 • edited

stefanmaric commented Sep 9, 2020

stefanmaric commented Sep 9, 2020

creage commented Sep 8, 2020 •

edited

creage commented Sep 8, 2020 •

edited

creage commented Sep 8, 2020 •

edited

alexander-akait commented Sep 8, 2020 •

edited

stefanmaric commented Sep 8, 2020 •

edited

alexander-akait commented Sep 9, 2020 •

edited

alexander-akait commented Sep 9, 2020 •

edited