Comments (24)
@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.
from thread-loader.
@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!
from thread-loader.
Please provide structure of your project
from thread-loader.
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
from thread-loader.
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
from thread-loader.
@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
?
from thread-loader.
- 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 thewebpack.dev.config.js
, which merges back withwebpack.base.config.js
from thread-loader.
Still can't reproduce π Maybe you can create minimum reproducible test repo?
from thread-loader.
@creage Here logic what we use for search
config https://github.com/davidtheclark/cosmiconfig#explorersearch
from thread-loader.
So i think you have invalid process.cwd()
from thread-loader.
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...
from thread-loader.
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
?
from thread-loader.
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 <
> [email protected] 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
from thread-loader.
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 π
from thread-loader.
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
from thread-loader.
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.
from thread-loader.
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
from thread-loader.
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/[email protected][email protected]/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.
from thread-loader.
@stefanmaric Can you create reproducible test repo? Maybe we can improve DX with monorepos, I want to test old version and new version
from thread-loader.
@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
from thread-loader.
@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 pnpm
s workspace or use npm
inside webapp
. So unrelated to monorepos.
Maybe we move it to a new issue?
from thread-loader.
@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)
from thread-loader.
Other notes - you don't need ident
(it is in CHANGELOG) and you can union css-loader
s https://github.com/webpack-contrib/css-loader#auto
from thread-loader.
@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)
from thread-loader.
Related Issues (20)
- `LoaderContext.mode` is missing when run by `thread-loader` HOT 1
- Got " Cannot destructure property 'outputOptions' of 'loaderContext._compilation' as it is undefined." after upgrade to the latest version HOT 3
- Cannot destructure property `outputOptions` of 'undefined' or 'null' HOT 3
- babel-loader.plugin[0] must be a string, object, function HOT 3
- Unclear on Documentation HOT 2
- UnhandledPromiseRejectionWarning: TypeError: loaderContext.getLogger is not a function HOT 5
- How to use thread in craco?
- Cannot read properties of undefined (reading 'hooks') HOT 1
- Avoid loader-utils vulnerability by dropping webpack 4 support HOT 1
- Not work with webpack-virtual-modules
- TypeError: Converting circular structure to JSON HOT 2
- thread-loader 4.0.1 with ts-loader: Cannot read properties of undefined (reading 'plugins') HOT 6
- π With less-loader: TypeError: this.getLogger is not a function HOT 3
- You may be using an old version of webpack; please check you're using at least version 4 HOT 1
- build error or build hang with libuv 1.46 HOT 3
- this.getOptions is not a function HOT 4
- README: Need clarification regarding the first two rules HOT 3
- Incompatibility with css-loader due to its use of createHash HOT 2
- You forgot to add 'mini-css-extract-plugin' plugin HOT 3
- threadLoader.warmup causes the command line to not end after webpack5 is finished packaging HOT 4
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
π Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. πππ
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google β€οΈ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from thread-loader.