npm run dev -> EACCES: permission denied, open '/.config/postcssrc'

[mralusw]

Information

node=16.9.0 from nodesource on Debian 11; npm=8.19.3

Help request

Problem

vue-cli-service serve src/nginxconfig/mount.js, called from npm run dev, tries to write to /.config/..., and from there on everything breaks.

$ git clone https://github.com/digitalocean/nginxconfig.io.git
$ cd nginxconfig.io/
$ npm ci
...
$ npm run dev
...
> nginxconfig.io@1.0.0 dev:tool
> vue-cli-service serve src/nginxconfig/mount.js

 INFO  Starting development server...
[95%] emitting (emit)
(node:27926) [DEP_WEBPACK_MODULE_ISSUER] DeprecationWarning: Module.issuer: Use new ModuleGraph API


 ERROR  Failed to compile with 1 error                                                                                            4:17:18 PM

 error  in ./node_modules/prismjs/plugins/toolbar/prism-toolbar.css

Syntax Error: Error: EACCES: permission denied, open '/.config/postcssrc'


Error parsing bundle asset "/zram/user/1000/nginxconfig.io/dist/js/chunk-vendors.js": no such file
...

Note that I'm not requesting an NPM global install or anything like that.

What I have tried

I've tried to check if there's some missing path configuration (i.e. some DIR='' variable would explain the attempted acccess to $DIR/.config/... resolving to /.config/...). I couldn't find it.

[MattIPv4]

We don't do anything custom with postcss, this sounds like an upstream issue with Vue's CLI service, or something specific to your local installation/config of Node and your system.

[mralusw]

Thanks for the prompt response. I've bisected it to 895d448. That's where the EACCESS error starts to appear. Before that commit, it runs without errors.

[mralusw]

I've also tried nodejs=18.12.1-deb-1nodesource1 as recommended by nodejs.org. Same error, also starting at 895d448 (with node 18 I also get an EBADENGINE Unsupported engine during npm install, which seemingly doesn't matter).

[jonaswjs]

I had the similar error in a project and could fix either by disable the automatic configuration of the postcss loader in the webpack config file (in my case the vue.config.js):

module.exports = { ... css: { ... loaderOptions: { postcss: { postcssOptions: { config: false } } } }

or by creating a simple postcss configuraton file in the project root directory postcss.config.js :

module.exports = {};

[drik98]

Nice one @jonaswjs :^)