Ошибка Error: EACCES: permission denied, stat '/root/.config/postcss' при сборке?

Question

[JastaFly]

При сборке получаю кучу ошибок вида:

Error: Module build failed (from ../node_modules/postcss-loader/dist/cjs.js):
Error: EACCES: permission denied, stat '/root/.config/postcss'

Внешнего конфига для PostCSS у меня нет, все настройки делаются прямо webpack.config.js:

module: {
        rules: [
            {
                test: /\.css$/,
                use: [
                    plugins.miniCssExtractPlugin.loader,
                    'css-loader',
                    'postcss-loader',

                    {
                        loader: "postcss-loader",
                        options: {
                            sourceMap: true,
                            postcssOptions: {
                                plugins: [
                                    postCss.import,
                                    postCss.cssFor,
                                    postCss.simpleVars,
                                    postCss.postCssPresetEnv,
                                    postCss.nested,
                                    postCss.flexbugs,
                                    postCss.inputStyle,
                                    postCss.objectFit,
                                    postCss.gradientFix,
                                    postCss.extend,
                                ]

                            }

                        },
                    },
                ],
            },
.....
}

Работает всё на Node.js 18.12.0, NPM 8.19.2 и Webpack 5.96.1. Подскажите что не так, куда смотреть?!

Comments

[szQocks]

с путями там что-то, почему у тебя путь начинается с рута ? - вот туда и копай
и почему у тебя тут 2 одинаковых лоадера, убери один из них

[JastaFly]

szQocks,

почему у тебя путь начинается с рута

Потому что сборка запускается с рута) Полагаю был бы запуск от другого пользователя, то ссылка вела бы на его домашнюю директорию

вот туда и копай

Да уже смотрел. И по указанному пути у меня ничего нет:

ls -la
итого 4
drwx------.  3 root root   18 ноя  1 15:23 ./
dr-xr-x---. 10 root root 4096 ноя 18 18:09 ../
drwx------.  5 root root   97 ноя  1 15:23 fish/

Вообще данная ошибка появилась после экспериментов с вынесением настроек PostCSS в отдельный файл, в конфиге вебпака это выглядело как-то так:

{
      loader: 'postcss-loader',
      options: { sourceMap: true, config: { path: 'src/js/postcss.config.js' } }
    }

Но запустить ничего не вышло и я откатил конфиг к старой версии, без внешних настроек. Вот только появилась эта чёртова ошибка(

почему у тебя тут 2 одинаковых лоадера, убери один из них

Убрал:

module: {
        rules: [
            {
                test: /\.css$/,
                use: [
                    plugins.miniCssExtractPlugin.loader,
                    'css-loader',

                    {
                        loader: "postcss-loader",
                        options: {
                            sourceMap: true,
                            postcssOptions: {
                                plugins: () => [
                                    postCss.import(),
                                    postCss.cssFor(),
                                    postCss.simpleVars(),
                                    postCss.postCssPresetEnv(),
                                    postCss.nested(),
                                    postCss.flexbugs(),
                                    postCss.inputStyle(),
                                    postCss.objectFit(),
                                    postCss.gradientFix(),
                                    postCss.extend(),
                                ]

                            }

                        },
                    },
                ],
            },
}
.....

Но проблему решить это очевидно не помогло

[szQocks]

JastaFly, не глядя предположу что проблема не в руте, а в конфиге твоём, тебе надо создавать пути от текущей директории а не от куда-то там, то есть при помощи path / __dirname и т.д

'src/js/postcss.config.js'

вот видишь как ты указал путь

но я всё же склоняюсь к тому что проблема в остальном конфиге, а не в этом куске который ты показываешь в комменты или в вопросе

[szQocks]

JastaFly, ну или ещё как вариант ошибка в том как ты настроил этот postcss хм

{
              loader: "postcss-loader",
              options: {
                postcssOptions: {
                  plugins: [
                    [
                      "postcss-preset-env",
                    ],
                  ],
                },
              },
            },

package.json

"postcss": "^8.4.32",
    "postcss-loader": "^7.3.4",
    "postcss-preset-env": "^9.3.0",

c версиями сам разберешься

[JastaFly]

szQocks,

а не от куда-то там, то есть при помощи path / __dirname и т.д

__dirname у в моём конфиге широко используется)

вот видишь как ты указал путь

Путь условный, в реальности был несколько другой, но суть он передаёт

я всё же склоняюсь к тому что проблема в остальном конфиге

Возможно. Но я пока не понимаю где, вот конфиг вебпака целиком:

const params = {
    env: process.env.NODE_ENV || 'development'
};

const path = require('path');
const webpack = require('webpack');
const Dotenv = require('dotenv-webpack');

const plugins = {
    miniCssExtractPlugin: require("mini-css-extract-plugin"),
    svgLoader: require('svg-sprite-loader/plugin'),
    cssOptimize: require('optimize-css-assets-webpack-plugin'),
    jsOptimize: require('terser-webpack-plugin')
};

const postCss = {
    postCssPresetEnv: require('postcss-preset-env'),
    import: require('postcss-import'),
    nested: require('postcss-nested'),
    cssFor: require('postcss-for'),
    simpleVars: require('postcss-simple-vars'),
    flexbugs: require("postcss-flexbugs-fixes"),
    inputStyle: require("postcss-input-style"),
    objectFit: require("postcss-object-fit-images"),
    gradientFix: require('postcss-gradient-transparency-fix'),
    extend: require('postcss-extend'),
};

module.exports = {
    context: path.resolve(__dirname + '/app'),
    entry: {
        subscription: './app-subscription.js',
        critical: './app-crit.js',
        main: './app.js',
    },
    stats: {children: false},

    watch: params.env == 'development',
    watchOptions: {
        aggregateTimeout: 50
    },

    resolve: {
        modules: [
            (path.resolve(__dirname)),
            (path.resolve(__dirname) + '/vendor'),
            (path.resolve(__dirname) + '/node_modules')
        ],
        extensions: ['*', '.js', '.css']
    },

    resolveLoader: {
        modules: [
            path.resolve(__dirname),
            path.resolve(__dirname) + '/node_modules',
            path.resolve(__dirname) + '/node_modules'
        ]
    },

    output: {
        path: path.resolve(__dirname + '/build'),
        publicPath: '/local/client/build/',
        filename: '[name].js',
        library: 'App'
    },

    module: {
        rules: [
            {
                test: /\.css$/,
                use: [
                    plugins.miniCssExtractPlugin.loader,
                    'css-loader',

                    {
                        loader: "postcss-loader",
                        options: {
                            sourceMap: true,
                            postcssOptions: {
                                plugins: () => [
                                    postCss.import(),
                                    postCss.cssFor(),
                                    postCss.simpleVars(),
                                    postCss.postCssPresetEnv(),
                                    postCss.nested(),
                                    postCss.flexbugs(),
                                    postCss.inputStyle(),
                                    postCss.objectFit(),
                                    postCss.gradientFix(),
                                    postCss.extend(),
                                ]

                            }

                        },
                    },
                ],
            },

            {
                test: /\.js$/,
                exclude: /(node_modules|vendor)/,
                loader: 'babel-loader',
                options: {
                    cacheDirectory: true,
                    presets: ['@babel/preset-env']
                }
            },

            {
                test: /\.(svg)$/,
                use: [
                    {
                        loader: 'svg-sprite-loader',
                        options: {
                            extract: true,
                        }
                    },
                    'svg-transform-loader',
                    'svgo-loader'
                ]
            }
        ]
    },

    plugins: [
        new plugins.miniCssExtractPlugin({
            filename: '[name].css'
        }),

        new plugins.svgLoader(),

        new webpack.ProvidePlugin({
            Swiper: 'swiper/dist/js/swiper.min.js',
            vanillaTextMask: "vanilla-text-mask/dist/vanillaTextMask.js"
        }),

        new webpack.ProvidePlugin({
            $: "jquery",
            jQuery: "jquery"
        }),
        new Dotenv({
            path:  (path.resolve(__dirname) + '/.env')
        }),

    ]
};

if (params.env == 'production') {

    module.exports.plugins.push(
        new plugins.jsOptimize()
    );

    /*module.exports.plugins.push(
        new plugins.cssOptimize({
            cssProcessor: require('cssnano'),
        })
    );*/
}

[JastaFly]

szQocks,

ну или ещё как вариант ошибка в том как ты настроил этот postcss хм

Вряд-ли, есть у меня экспериментальный вебпак практически с таким-же конфигом но другим entry, и там сборка собирается

package.json

Вот мой package.json:

{
  "name": "project",
  "version": "1.0.0",
  "description": "",
  "dependencies": {
    "air-datepicker": "^2.2.3",
    "array-unique": "^0.3.2",
    "blazy": "^1.8.2",
    "body-scroll-lock": "^2.6.1",
    "comparison-slider": "^1.1.0",
    "img-slider": "^2.2.0",
    "inputmask": "^4.0.8",
    "inputmask-multi": "^1.2.0",
    "intersection-observer": "^0.12.2",
    "jquery": "^3.5.1",
    "jquery-migrate": "^3.0.0",
    "magnific-popup": "^1.1.0",
    "nouislider": "^11.1.0",
    "perfect-scrollbar": "^1.4.0",
    "promise-polyfill": "8.1.0",
    "selectize": "^0.12.6",
    "swiper": "^4.3.3",
    "tooltipster": "^4.2.8"
  },
  "devDependencies": {
    "postcss-nesting": "13.0.1",
    "postcss-preset-env": "10.1.0",
    "autoprefixer": "10.4.20",
    "css-mqpacker": "7.0.0",
    "cssnano": "7.0.6",
    "@babel/preset-env": "^7.26.0",
    "babel-core": "^6.26.3",
    "babel-loader": "^9.2.1",
    "babel-preset-env": "^1.7.0",
    "cross-env": "^7.0.3",
    "css-loader": "^0.28.9",
    "datatables.net": "^1.10.19",
    "dotenv": "^16.0.1",
    "dotenv-webpack": "^8.1.0",
    "mini-css-extract-plugin": "^2.9.2",
    "normalize.css": "^8.0.0",
    "object-fit-images": "^3.2.3",
    "optimize-css-assets-webpack-plugin": "^3.2.0",
    "postcss-cssnext": "^3.1.1",
    "postcss-extend": "^1.0.5",
    "postcss-flexbugs-fixes": "^5.0.2",
    "postcss-for": "2.1.1",
    "postcss-gradient-transparency-fix": "^4.1.0",
    "postcss-import": "^16.1.0",
    "postcss-input-style": "^1.0.0",
    "postcss-loader": "^8.1.1",
    "postcss-nested": "^7.0.2",
    "postcss-object-fit-images": "^1.1.2",
    "postcss-simple-vars": "7.0.1",
    "style-loader": "^0.20.1",
    "suggestions-jquery": "^20.3.0",
    "svg-sprite-loader": "^5.1.1",
    "svg4everybody": "^2.1.9",
    "url-loader": "^4.1.1",
    "vanilla-text-mask": "^5.1.1",
    "webpack": "^5.96.1",
    "webpack-cli": "^5.1.4"
  },
  "scripts": {
    "webpack": "webpack",
    "build": "cross-env NODE_ENV=production webpack"
  }
}

c версиями сам разберешься

Попробую, но что-то мне кажется вряд-ли и пакета postcss у меня вообще нет

[szQocks]

JastaFly, хотя если логически подумать то сборку надо проводить скорее всего не в рут папке, либо через sudo запускать хм, что он вообще делает в руте ?) проект вроде как должен быть в /etc/nginx/sites-available где-то там

[JastaFly]

szQocks,

что он вообще делает в руте ?)

Она не в руте, она лежит в var/www/html/...
Это я под рутом сижу её запускаю)

роект вроде как должен быть в /etc/nginx/sites-available

Не ну тут точно нет, обычно тут только конфиги Nginx лежат. Как правило сайты лежат либо там где у меня, либо в домашней директории пользователя под именем которого сайт работает

[szQocks]

JastaFly,

/etc/nginx/sites-available

это не верный путь, это путь для конфигов, не верно я написал, я имел ввиду var/www )))

я обычно тоже в var/www разворачиваю проект, а html вообще удаляю тупо и проблем с при сборке проекта на хосте не ловлю ошибки типа - permission denied, хз на самом деле

так что хз даже что там такое хм

Answer 1

[JastaFly]

Проблему решить помогло смена версий пакетов:

"postcss": "^8.4.32",
    "postcss-loader": "^7.3.4",
    "postcss-preset-env": "^9.3.0",

Спасибо szQocks за совет)