EISDIR: illegal operation on a directory, read

[val-bubbleflat]

Trying to use laravel-mix-purge-css, I have this error message running npm run prod :

Error: EISDIR: illegal operation on a directory, read
    at Object.fs.readSync (fs.js:675:18)
    at tryReadSync (fs.js:540:20)
    at Object.fs.readFileSync (fs.js:583:19)
    at e.value (C:\Users\Val\PhpstormProjects\The-One-True-Bubbleflat\www\node_modules\purgecss\lib\purgecss.js:1:7949)
    at e.value (C:\Users\Val\PhpstormProjects\The-One-True-Bubbleflat\www\node_modules\purgecss\lib\purgecss.js:1:6214)
    at C:\Users\Val\PhpstormProjects\The-One-True-Bubbleflat\www\node_modules\purgecss-webpack-plugin\lib\purgecss-webpack-plugin.js:244:97
    at Array.forEach (<anonymous>)
    at C:\Users\Val\PhpstormProjects\The-One-True-Bubbleflat\www\node_modules\purgecss-webpack-plugin\lib\purgecss-webpack-plugin.js:195:39
    at Array.forEach (<anonymous>)
    at Compilation.<anonymous> (C:\Users\Val\PhpstormProjects\The-One-True-Bubbleflat\www\node_modules\purgecss-webpack-plugin\lib\purgecss-webpack-plugin.js:181:40)
    at next (C:\Users\Val\PhpstormProjects\The-One-True-Bubbleflat\www\node_modules\tapable\lib\Tapable.js:204:14)
    at Compilation.<anonymous> (C:\Users\Val\PhpstormProjects\The-One-True-Bubbleflat\www\node_modules\extract-text-webpack-plugin\dist\index.js:275:11)
    at Compilation.applyPluginsAsyncSeries (C:\Users\Val\PhpstormProjects\The-One-True-Bubbleflat\www\node_modules\tapable\lib\Tapable.js:206:13)
    at applyPluginsAsyncSeries (C:\Users\Val\PhpstormProjects\The-One-True-Bubbleflat\www\node_modules\webpack\lib\Compilation.js:659:9)
    at next (C:\Users\Val\PhpstormProjects\The-One-True-Bubbleflat\www\node_modules\tapable\lib\Tapable.js:202:11)
    at C:\Users\Val\PhpstormProjects\The-One-True-Bubbleflat\www\node_modules\extract-text-webpack-plugin\dist\index.js:244:13
    at C:\Users\Val\PhpstormProjects\The-One-True-Bubbleflat\www\node_modules\extract-text-webpack-plugin\node_modules\async\dist\async.js:473:16
    at iteratorCallback (C:\Users\Val\PhpstormProjects\The-One-True-Bubbleflat\www\node_modules\extract-text-webpack-plugin\node_modules\async\dist\async.js:1050:13)
    at C:\Users\Val\PhpstormProjects\The-One-True-Bubbleflat\www\node_modules\extract-text-webpack-plugin\node_modules\async\dist\async.js:958:16
    at C:\Users\Val\PhpstormProjects\The-One-True-Bubbleflat\www\node_modules\extract-text-webpack-plugin\dist\index.js:227:15
    at C:\Users\Val\PhpstormProjects\The-One-True-Bubbleflat\www\node_modules\extract-text-webpack-plugin\node_modules\async\dist\async.js:473:16
    at iteratorCallback (C:\Users\Val\PhpstormProjects\The-One-True-Bubbleflat\www\node_modules\extract-text-webpack-plugin\node_modules\async\dist\async.js:1050:13)
    at C:\Users\Val\PhpstormProjects\The-One-True-Bubbleflat\www\node_modules\extract-text-webpack-plugin\node_modules\async\dist\async.js:958:16
    at C:\Users\Val\PhpstormProjects\The-One-True-Bubbleflat\www\node_modules\extract-text-webpack-plugin\dist\index.js:216:21
    at rebuilding.forEach.cb (C:\Users\Val\PhpstormProjects\The-One-True-Bubbleflat\www\node_modules\webpack\lib\Compilation.js:528:29)
    at Array.forEach (<anonymous>)
    at callback (C:\Users\Val\PhpstormProjects\The-One-True-Bubbleflat\www\node_modules\webpack\lib\Compilation.js:528:15)
    at processModuleDependencies (C:\Users\Val\PhpstormProjects\The-One-True-Bubbleflat\www\node_modules\webpack\lib\Compilation.js:547:5)
    at _combinedTickCallback (internal/process/next_tick.js:131:7)
    at process._tickCallback (internal/process/next_tick.js:180:9)

this is my webpack.mix.js

mix.webpackConfig({
    plugins:
        [
            new WebpackShellPlugin({onBuildStart:['php artisan lang:js resources/assets/js/traduction/messages.js --no-lib'], onBuildEnd:[]}),
            new LiveReloadPlugin(),
        ],
});

mix.js('resources/assets/js/app.js','public/js')
    .sass('resources/assets/sass/app.scss', 'public/css')
    .options({ processCssUrls: false })
    .purgeCss();

if (mix.inProduction()) {
    mix.version();
}

as in #2, I just upgrade from laravel-mix fom 0.* to 2.0.0 to use this package

Hope somebody can help :)
Val

[securit]

+1. Same issue

Error: EISDIR: illegal operation on a directory, read
    at Object.fs.readSync (fs.js:675:18)
    at tryReadSync (fs.js:540:20)
    at Object.fs.readFileSync (fs.js:583:19)
    at e.value (/Users/greg/Documents/PhpstormProjects/engagement/node_modules/purgecss-webpack-plugin/node_modules/purgecss/lib/purgecss.js:1:7949)
    at e.value (/Users/greg/Documents/PhpstormProjects/engagement/node_modules/purgecss-webpack-plugin/node_modules/purgecss/lib/purgecss.js:1:6214)
    at /Users/greg/Documents/PhpstormProjects/engagement/node_modules/purgecss-webpack-plugin/lib/purgecss-webpack-plugin.js:244:97
    at Array.forEach (<anonymous>)
    at /Users/greg/Documents/PhpstormProjects/engagement/node_modules/purgecss-webpack-plugin/lib/purgecss-webpack-plugin.js:195:39
    at Array.forEach (<anonymous>)

[cjmaxik]

Please do a fresh install of all of your dependencies (including global).

[mboisvertdupras]

Doing a fresh install of project & global packages hasn't helped me personally. I've tested with both npm & yarn and Node v8.11.1 through v10.1.0.

The problem seems to be project specific. The same setup works in another directory for me.

[cjmaxik]

What is your exact environment? I am pretty much sure this is a directory rights problem, not a bug.

[mboisvertdupras]

Mac OS: 10.13.4
Node: 10.1.0
Yarn: 1.6.0
laravel-mix: 2.1.11
laravel-mix-purgecss: 2.1.0

And my permissions are as follows:

Project directory:
-rw-r--r--     1 marc  staff     166 27 Mar 18:08 .babelrc
-rw-r--r--     1 marc  staff    1051  7 May 22:29 .env
-rw-r--r--     1 marc  staff     747  6 May 10:46 .env.example
drwxr-xr-x    15 marc  staff     480  9 May 23:30 .git
-rw-r--r--     1 marc  staff     111 21 Jul  2017 .gitattributes
-rw-r--r--     1 marc  staff     169 27 Mar 23:11 .gitignore
drwxr-xr-x    30 marc  staff     960  8 Apr 14:54 app
-rw-r--r--     1 marc  staff    1646 21 Jul  2017 artisan
drwxr-xr-x     5 marc  staff     160 21 Jul  2017 bootstrap
-rw-r--r--     1 marc  staff    2875  7 May 22:43 composer.json
-rw-r--r--     1 marc  staff  213003  7 May 22:43 composer.lock
drwxr-xr-x    22 marc  staff     704  7 May 22:44 config
drwxr-xr-x     7 marc  staff     224 24 Dec 11:04 database
drwxr-xr-x  1115 marc  staff   35680  9 May 23:29 node_modules
-rw-r--r--     1 marc  staff    1852  9 May 23:29 package.json
-rw-r--r--     1 marc  staff    1145 21 Jul  2017 phpunit.xml
drwxr-xr-x    14 marc  staff     448  9 May 23:14 public
drwxr-xr-x     6 marc  staff     192 13 Dec 22:25 resources
drwxr-xr-x     6 marc  staff     192 19 Apr 22:26 routes
-rw-r--r--     1 marc  staff     563 21 Jul  2017 server.php
drwxr-xr-x     9 marc  staff     288 24 Feb 00:36 storage
drwxr-xr-x     7 marc  staff     224 28 Sep  2017 tests
drwxr-xr-x    56 marc  staff    1792  7 May 22:43 vendor
-rw-r--r--     1 marc  staff     962  9 May 23:14 webpack.mix.js
-rw-r--r--     1 marc  staff  300296  9 May 23:29 yarn.lock

resources:
drwxr-xr-x   6 marc  staff   192  9 May 23:15 assets
drwxr-xr-x   4 marc  staff   128  6 May 10:46 lang
drwxr-xr-x  18 marc  staff   576 25 Mar 20:45 views

assets:
drwxr-xr-x   3 marc  staff    96  9 May 23:14 css
drwxr-xr-x  76 marc  staff  2432 28 Apr 10:50 images
drwxr-xr-x  10 marc  staff   320 27 Mar 17:55 js

My mix config looks like:

let mix = require('laravel-mix')
const LodashModuleReplacementPlugin = require('lodash-webpack-plugin')

require('laravel-mix-purgecss')

/*
 |--------------------------------------------------------------------------
 | Mix Asset Management
 |--------------------------------------------------------------------------
 |
 | Mix provides a clean, fluent API for defining some Webpack build steps
 | for your Laravel application. By default, we are compiling the Sass
 | file for the application as well as bundling up all the JS files.
 |
 */

mix.webpackConfig(webpack => {
  return {
    plugins: [
      new LodashModuleReplacementPlugin()
    ]
  }
})

mix.js('resources/assets/js/app.js', 'public/js')
    .extract(['vue', 'axios', 'quill'])
    .stylus('resources/assets/css/torque/torque.styl', 'public/css/app.css')
    .purgeCss()
    .version()
    .browserSync('eternity.test')

[jonhft]

+1. Same issue

[wiljanslofstra]

I had the exact same error, but after some digging the problem in my case was because of a folder ending in '.js'.

I suspect that purgecss or laravel-mix-purgecss searches for everything ending with the extensions defined in the config, including css, js, etc. In my case that also returned a folder -- purgecss only works on files and throws this error.

To see the folder that throws an error you can temporarily add a console log in node_modules/purgecss/lib/purgecss.js on line 645, change:

var file = _step6.value;

var content = fs.readFileSync(file, 'utf8');

to:

var file = _step6.value;
                            
if (fs.lstatSync(file).isDirectory()) {
  console.log(file);
}

var content = fs.readFileSync(file, 'utf8');

Rename the folder(s) that gives problems, and rename it.

Not the best solution, but it solves the problem for now. I'll see if there's a possibility for changing the glob matching to only match files, and not folders.

[sebastiandedeyne]

#36 should have fixed this. Feel free to reopen if anyone still has issues.

[lbssousa]

I still have this problem when trying to use laravel-mix-purgecss in production builds. Here is my error message:

Module build failed (from ./node_modules/css-loader/index.js):
ModuleBuildError: Module build failed (from ./node_modules/postcss-loader/src/index.js):
Error: EISDIR: illegal operation on a directory, read
    at /var/www/node_modules/webpack/lib/NormalModule.js:316:20
    at /var/www/node_modules/loader-runner/lib/LoaderRunner.js:367:11
    at /var/www/node_modules/loader-runner/lib/LoaderRunner.js:233:18
    at context.callback (/var/www/node_modules/loader-runner/lib/LoaderRunner.js:111:13)
    at /var/www/node_modules/postcss-loader/src/index.js:208:9
 @ ./resources/sass/app.scss

ERROR in ./resources/sass/app.scss (./node_modules/css-loader??ref--6-2!./node_modules/postcss-loader/src??postcss0!./node_modules/sass-loader/dist/cjs.js??ref--6-4!./resources/sass/app.scss)
Module build failed (from ./node_modules/postcss-loader/src/index.js):
Error: EISDIR: illegal operation on a directory, read
 @ ./resources/sass/app.scss 2:14-196

Here is my package.json:

{
  "private": true,
  "scripts": {
    "dev": "yarn development",
    "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
    "watch": "yarn development -- --watch",
    "watch-poll": "npm run watch -- --watch-poll",
    "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
    "prod": "yarn production",
    "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
  },
  "devDependencies": {
    "@typescript-eslint/eslint-plugin": "^2.20.0",
    "@typescript-eslint/parser": "^2.20.0",
    "@vue/eslint-config-standard": "^5.1.2",
    "@vue/eslint-config-typescript": "^5.0.1",
    "axios": "^0.19.2",
    "cross-env": "^5.1",
    "eslint": "^6.8.0",
    "eslint-plugin-import": "^2.20.1",
    "eslint-plugin-node": "^11.0.0",
    "eslint-plugin-promise": "^4.2.1",
    "eslint-plugin-standard": "^4.0.1",
    "eslint-plugin-vue": "^6.2.1",
    "laravel-mix": "^5.0.0",
    "laravel-mix-purgecss": "^5.0.0-rc.1",
    "mix-tailwindcss": "^1.2.0",
    "resolve-url-loader": "^2.3.1",
    "sass": "^1.25.0",
    "sass-loader": "^8.0.2",
    "tailwindcss": "^1.2.0",
    "ts-loader": "^6.2.1",
    "typescript": "^3.7.5",
    "vue-template-compiler": "^2.6.11"
  }
}

Here is my webpack.mix.js:

const mix = require('laravel-mix')
require('laravel-mix-purgecss')
require('mix-tailwindcss')

mix.ts('resources/js/app.ts', 'public/js')
   .sass('resources/sass/app.scss', 'public/css')
   .tailwind()

if (mix.inProduction()) {
  mix.purgeCss()
     .version()
}

Nevertheless, laravel-mix-purgecss works correctly in my development builds, and my production builds work correctly if I remove mix.purgeCss() from webpack.mix.js.

UPDATE: It seems this problem affects version 5.0.0-rc.1 only. I've downgraded laravel-mix-purgecss to version 4.2.0 and it seems working correctly now.