Cypress: Can't run Cypress test because of plugins error - Error: ENOENT: no such file or directory, stat '/.VolumeIcon.icns

[MaaikeFox]

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

[qjd2413]

As a workaround I ran sudo touch /.VolumeIcon.icns which isn't ideal obviously but it should unblock you hopefully

[MaaikeFox]

Yes that works! Thanks a lot 👍

[gajus]

What is causing this though?

[CodeAmend]

Why is this closed?

[DerekRTP]

The solution to this issue is seriously to run sudo touch /.VolumeIcon.icns?

[DerekRTP]

@jennifer-shehane

[arjunu]

From what I could find, seems like .VolumeIcon.icns, a file located at root dir / on Mac, is used to store icon resources. It is a symlink to System/Volumes/Data/.VolumeIcon.icns (run ls -la) and was missing after I upgraded my Mac OS. I created it and linked it back.

cd /
sudo touch System/Volumes/Data/.VolumeIcon.icns
ln -S .VolumeIcon.icns System/Volumes/Data/.VolumeIcon.icns

Not sure how Cypress is using it. The file is still at zero bytes after running Cypress.