Webpack-dev-server: Аfter compilation webpack, it gives an error Watchpack Error (initial scan): Error: EACCES: permission denied

Created on 31 Oct 2020 · 9Comments · Source: webpack/webpack-dev-server

Describe the bug

After compilation, errors occur as shown in the screenshot below. Further devServer does not work.

What is the current behavior?

Operating System: Windows 10 pro
Node Version: v14.15.0
NPM Version: 6.14.8
webpack Version: ^5.3.2
webpack-dev-server Version: ^3.11.0
Browser: Chrome

[x] This is a bug
[ ] This is a modification request

Code

// webpack.config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');


module.exports = {
    context: path.resolve(__dirname, 'src'),
    mode: 'development',
    //devtool: false,
    entry: {
        main: './index.js',
        analytics: './analytics.js'
    },
    output: {
        filename: '[name].[contenthash].js',
        path: path.resolve(__dirname, 'dist')
    },
    resolve: {
        extensions: ['.js', '.json', '.png'],
        alias: {
            '@models': path.resolve(__dirname, 'src/models'),
            '@': path.resolve(__dirname, 'src'),
        }
    },
    optimization: {
        splitChunks: {
            chunks: 'all'
        }
    },
    devServer: {
        publicPath : '/' 
    },
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [ 'style-loader','css-loader' ],
            },
            {
                test: /\.(png|jpg|svg|gif)$/,
                use: [ 'file-loader' ],
            },
            {
                test: /\.(ttf|woff|woff2|eot)$/,
                use: [ 'file-loader' ],
            },
            {
                test: /\.xml$/,
                use: [ 'xml-loader' ],
            },
            {
                test: /\.csv$/,
                use: [ 'csv-loader' ],
            },
        ],

    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './index.html',
            title: 'webpack5'
        }),
        new CleanWebpackPlugin({
            verbose: true,
            cleanOnceBeforeBuildPatterns: [path.resolve(__dirname, 'dist')],
        }),
    ]
}

// package.json
{
    "name": "webpack5",
    "version": "1.0.0",
    "description": "",
    "private": true,
    "scripts": {
        "dev": "webpack --mode development",
        "build": "webpack --mode production",
        "start": "webpack serve --mode development"
    },
    "author": "alex",
    "license": "ISC",
    "devDependencies": {
        "clean-webpack-plugin": "^3.0.0",
        "css-loader": "^5.0.0",
        "csv-loader": "^3.0.3",
        "file-loader": "^6.2.0",
        "html-webpack-plugin": "^5.0.0-alpha.7",
        "papaparse": "^5.3.0",
        "path": "^0.12.7",
        "sass-loader": "^10.0.4",
        "style-loader": "^2.0.0",
        "webpack": "^5.3.2",
        "webpack-cli": "^4.1.0",
        "webpack-dev-server": "^3.11.0",
        "xml-loader": "^1.2.1"
    },
    "dependencies": {
        "jquery": "^3.5.1",
        "normalize.css": "^8.0.1"
    }
}

Expected Behavior

Actual Behavior

For Bugs; How can we reproduce the behavior?

Steps to reproduce the behavior:

Define a devServer config in your webpack config file
Run npm run start
Expected behavior

For Features; What is the motivation and/or use-case for the feature?

Source

Alex18595

👍5

Most helpful comment

Same here with WSL 2.0

MohRaouf on 16 Mar 2021

👍5

All 9 comments

I use wsl2, when using powershell there is no such problem

Alex18595 on 1 Nov 2020

👎5

Can't reproduce, these problem from watchpack and I don't know why you watch /tmp

alexander-akait on 2 Nov 2020

👎7

Can't reproduce

I can, with WSL1, happy to help.

these problem from watchpack

Maybe? Certainly the error is printed by watchpack, but if it's being told to watch an unreasonable file (like Windows' swapfile), then that might be a bug in a caller of watchpack rather than watchpack itself.

and I don't know why you watch /tmp

Note that it's not /tmp, it's /mnt/c aka C:\. My config certainly doesn't tell it to. In fact, none of my package.json or other configs even mention watchpack or webpack-dev-server, yet they're installed and used (and have been working fine). I can imagine this being a watchpack bug where, if you tell it to watch C:\...\somefile, it walks up the tree and tries to lstat every directory along the way, which fails for C:\ because it contains some files that the user doesn't have access to.

I can add that this error message wasn't there with webpack v4.

Philipp91 on 4 Jan 2021

👍1

Any luck with this issue? I'm getting the same response with webpack 5.21.2 and webpack-dev-server 3.11.2.
It's kinda hard to find good info to solve it.