Build fails if ../.config/postcssrc is not readable

[phil294]

My Vue project is located in some path using Linux user permissions: The project is at /home/main_user/projects/my_project, but I am logged in as another_user. $HOME is /home/another_user, whoami yields another_user. Still, postcss wants to look into /home/main_user/.config/postcssrc which doesn't make much sense. But since that folder is not readable to another_user, the entire build process fails.

 error  in ./src/components/PromiseForm.vue?vue&type=style&index=0&id=478e47c2&lang=stylus&scoped=true

Syntax Error: HookWebpackError: Module build failed (from ./node_modules/postcss-loader/dist/cjs.js):
Error: EACCES: permission denied, open '/home/main_user/.config/postcssrc'
-- inner error --
Error: Module build failed (from ./node_modules/postcss-loader/dist/cjs.js):
Error: EACCES: permission denied, open '/home/main_user/.config/postcssrc'
Generated code for /home/main_user/projects/my_project/node_modules/css-loader/dist/cjs.js??clonedRuleSet-37.use[1]!/home/main_user/projects/my_project/node_modules/vue-loader/dist/stylePostLoader.js!/home/main_user/projects/my_project/node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-37.use[2]!/home/main_user/projects/my_project/node_modules/stylus-loader/dist/cjs.js??clonedRuleSet-37.use[3]!/home/main_user/projects/my_project/node_modules/cache-loader/dist/cjs.js??ruleSet[0].use[0]!/home/main_user/projects/my_project/node_modules/vue-loader/dist/index.js??ruleSet[0].use[1]!/home/main_user/projects/my_project/src/components/PromiseForm.vue?vue&type=style&index=0&id=478e47c2&lang=stylus&scoped=true
1 | throw new Error("Module build failed (from ./node_modules/postcss-loader/dist/cjs.js):\nError: EACCES: permission denied, open '/home/main_user/.config/postcssrc'");

Version: vue 3.3.3 (latest released). This was NOT yet an issue with vue 3.2.13.

This problem does ONLY appear if you have NO postcss config present whatsoever. I had deleted my postcss config file because I didn't want any postprocessing, but apparently it cannot really be disabled.

I tried setting various postcss options to disable it entirely, but without success. Setting css.loaderOptions.postcss.postcssOptions.config: false in vue.config.js results in a very obscure error,

 error  in ./src/components/PromiseForm.vue?vue&type=script&lang=coffee

Syntax Error: Thread Loader (Worker 2)
Cannot read properties of null (reading 'content')

but I guess doing that wasn't a great idea anyway. It's possible that this latter error actually comes from coffee-loader. The former not, though, it's reproducible on a new repo.

And finally, I also tried

    config.module
            .rule('vue')
                .use('vue-loader')
                .tap((options) => ({
                    ...options,
                    useConfigFile: false,
                }))

because apparently that's something you could do in vue loader v14 but it doesn't change anything. I guess it was removed again on purpose?

Finally, however, I have found a workaround - setting in package.json

"postcss": {
    "plugins": {
      "autoprefixer": {}
    }
  },

allows building without errors. Without this, the error returns. I guess that's not really how this should work?

Thanks!

Edit: Solved by migrating to Vite.

[SimeonDominiq]

Thank you @phil294 . This works.

[Stephane-Ag]

Very odd but adding the following to package.json does seem to resolve the issue! I guess it serves as an alternative to postcss.config.js?

{
  ...
  "postcss": {
    "plugins": {
      "autoprefixer": {}
    }
  },
  ...
}