Error enoent no such file or directory stat volumeicon icns

Current behavior

After we installed and configured Typescript to Cypress:
On open cypress and then starting a test, the browser opens and starts loading the test, but before the test actually starts, Cypress crashes and shows this error:

The following error was thrown by a plugin. We stopped running your tests because a plugin crashed. Please check your plugins file (/Users/maaike/Projects/cypress/cypress/plugins/index.ts)

Error: ENOENT: no such file or directory, stat '/.VolumeIcon.icns'

Desired behavior

With our current configurations we expect Cypress with Typescript added to work.
We followed the instructions, then cleared cache, reinstalled cypress, but nothing helps.
We searched on the shown error but can’t find anything useful. That’s why we think there might be a bug here. I hope you can investigate it and find the cause

Test code to reproduce

tsconfig.json:

{
  "compilerOptions": {
    "target": "es6",
    "lib": ["es6", "dom"],
    "types": ["cypress", "node"],
    "esModuleInterop": true,
    "allowJs": true
  },
  "include": ["**/*.ts"]
}

cypress/plugins/index.ts:

// promisified fs module
import fs from 'fs-extra'
import path from 'path'
import webpack from '@cypress/webpack-preprocessor'

function getConfigurationByFile(file) {
    const pathToConfigFile = path.resolve('cypress', 'config', `${file}.json`)

    return fs.readJson(pathToConfigFile)
}

// plugins file
module.exports = (on, config) => {
    require('cypress-terminal-report/src/installLogsPrinter')(on)
    require('cypress-log-to-output').install(on, (type, event) => {
        return (event.level === 'error' || event.type === 'error') && islogableError(event)
    })
    const options = {
        // send in the options from your webpack.config.js, so it works the same
        // as your app's code
        webpackOptions: require('../../webpack.config'),
        watchOptions: {},
    }
    on('file:preprocessor', webpack(options))

    const environment = process.env.ENVIRONMENT || config.env.ENVIRONMENT || 'acceptance'
    console.log(`plugins/index.ts: Loading local config from cypress/config/${environment}.json...`)
    return getConfigurationByFile(environment)
}

webpack.config.js

const path = require('path')

module.exports = {
    entry: './src/index.ts',
    module: {
        rules: [
            {
                test: /.tsx?$/,
                use: 'ts-loader',
                exclude: /node_modules/,
            },
        ],
    },
    resolve: {
        extensions: ['.tsx', '.ts', '.js'],
    },
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist'),
    },
}

Versions

Cypress 5.3.0

Проблема: в текущем проекте при запущенных вотчерах в 50% случаев изменение файлы выкидывает ошибку:

ENOENT: no such file or directory, stat ‘/home/username/PhpstormProjects/js/bd/src/ts/classes/bd/file_name.ts___jb_tmp___’
at Error (native)

Что это за постфикс `___jb_tmp___` я без понятия. Гугл ничего не находит. Поиск по node_modules — тоже.
Как вообще определить — в сторону какого плагина копать?

Зависимости:

"dependencies": {
    "gulp": "^3.9.1",
    "gulp-include-source": "0.0.5",
    "gulp-livereload": "^3.8.1",
    "gulp-minify": "0.0.10",
    "gulp-plumber": "^1.1.0",
    "gulp-sourcemaps": "^1.6.0",
    "gulp-watch": "^4.3.5",
    "ts-loader": "^0.8.2",
    "typescript-extends": "^1.0.1"
  },
  "devDependencies": {
    "browser-sync": "^2.12.3",
    "typescript": "^1.9.0-dev.20160422",
    "webpack": "^2.1.0-beta.6",
    "webpack-stream": "^3.2.0"
  }

Таск JS в gulp:

gulp.task('js', function() {
   gulp.src('src/ts/bd.ts')
       .pipe(plumber())
       .pipe(sourcemaps.init())
       .pipe(webpack({
           debug: true,
           devtool: 'source-map',
           module: {
               loaders: [
                   {
                       test: /.ts$/,
                       loader: 'ts-loader',
                       exclude: /node_modules/
                   }
               ]
           },
           output: {
               filename: 'bd.js',
               library: "LibraryName",
               libraryTarget: "var"
           },
           plugins: [
               new ProvidePlugin({
                   __extends: 'typescript-extends'
               })
           ],
           resolve: {
               extensions: ['', '.ts', '.webpack.js', '.web.js', '.js'],
               modulesDirectories: ['node_modules', '.']
           }
       }))
       .pipe(minify())
       .pipe(sourcemaps.write())
       .pipe(gulp.dest('dist/js/'))
       .pipe(reload({stream: true}));
});

Вотчеры и сервер в Gulp

var config = {
    server: {
        baseDir: "./dist"
    },
    host: 'localhost',
    port: 9005,
    ui: {
        port: 8080,
        weinre: {
            port: 9090
        }
    },
    logPrefix: "prefix"
};

gulp.task('watch', function(){
    watch('src/ts/**/**', function(event, cb) {
        gulp.start('js');
    });
    watch('src/*.html', function(event, cb) {
        gulp.start('html');
    });
});

gulp.task('webserver', function () {
    browserSync(config);
});

I recently struggled for a while with an npm error thrown when executing npm install of some package. The error message was npm ERR! enoent ENOENT: no such file or directory, rename 'D:\WebApp\node_modules\lz-string' -> 'D:\WebApp\node_modules.lz-string.DELETE'

Finally, I found a solution and a reason for that issue.

The error occurred when I was trying to install @testing-library/react npm package. It looked like that:

Hotfix

If you ever get this error, the hotfix is to follow these steps:

• delete node-modules folder
• run command npm cache clean --force
• run command npm install
• install the package again with npm install your-package-name

It should all work fine after that.

If these commands still don’t solve your issue, and you use git as a source control system, you can try the unbeatable git clean -fdx command. After that, run npm install again. Beware – it removes all files not checked in to git. It may also remove your IDE settings etc., so use with care.

But it’s only a hotfix, a solution for now to unblock you.

Coldfix (solution)

The real reason for this issue in my case turned out to be related to jest. However, not to the testing library itself, but to jest extension for Visual Studio Code.

The reason for the issue is the jest tests runner working in the background. You can see that in the VS Code bottom bar:

The real solution is to disable jest runner when installing new packages. You can do it with a Jest: Stop Runner command in Ctrl+Shift+P:

I don’t know exactly why this is an issue. I guess jest runner is blocking some files in node-modules, so they cannot be renamed/processed. I hope it helps you too 😉