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.

[distinctdan]

@MaaikeFox Would you mind reopening this? Cypress shouldn't be touching anything in that directory, so this still seems like a bug.

From my use case, this bug appears to be related to import resolution. When I import a file using an absolute path like support/utils, it throws the error. However, if I do a relative import like ../support/utils it works fine. Perhaps cypress is ignoring the baseUrl in tsconfig.json?

[jennifer-shehane]

The original poster closed the issue after finding a resolution.

I'm not able to recreate the issue from the code originally provided - the Cypress app opens with no logs to the stdout and no crashing. (Tried this example also). The behavior may be dependent on the tests / the application under test.

Can anyone provide a reproducible example? We'd be happy to look at it with one provided. Thanks!

[adarnon]

I also encountered this bug. Even though the message says it was a problem loading plugins, the cause in my case was that one of my commands (under support) imported fs. I assume that since commands run in the browser they can't import fs and somehow it propagates to this cryptic error message.

[jennifer-shehane]

@adarnon Can you provide the code you had running with fs? Because I get this error trying to use fs in the supportFile.

[samtsai]

I just ran into this and I was able to find the offending code by looking at the console. For me it was similar to @adarnon's issue where I was trying to import something that I no longer had as a dependency.

[Ellomend]

got error when tried move some commands in separate files. problem was with paths was using webpack aliases from my app, fixed paths fixed error.

[sakhmedbayev]

OK, this works sudo touch /.VolumeIcon.icns, but will it crash in CI?

[angelisco1]

I had the same error when I try to execute a component test with @cypress/react.

In Cypress window I get the following message:

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

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

I'm also getting the next error message in my terminal when I click in the component test:

Module not found: Error: Can't resolve 'cypress-react-selector' in '/cypress-testing-de-componentes-react-lab/node_modules/@cypress/react/support'

I've solved this error installing the dependency cypress-react-selector with the command npm install cypress-react-selector as the error message it's telling me that can't resolve this dependency.

I hope that can help you.

[mrAl-x]

After dodging the VolumeIcon.icns error with the sudo touch /.VolumeIcon.icns hack I am now getting this and it just gets more and more confusing

[samtsai]

After dodging the VolumeIcon.icns error with the sudo touch /.VolumeIcon.icns hack I am now getting this and it just gets more and more confusing

Can you check the terminal for any meaningful output?

[krzysztofsan]

I had this same problem, and @distinctdan 's comment helped me overcome it. I accidentally added a following import to one of my files (vscode autoimport):

import { Promise } from 'cypress/types/bluebird';

Removing it solved the issue. It still doesn't indicate what the problem originates exactly, but if you're struggling with it, taking a look at your imports could help.

[jmcollin78]

Same problem for me after unstalling webpack V5x and reinstall webpack 4.46.0. I use absolute import reference. cypress/plugins/index.js:

const webpackPreprocessor = require('@cypress/webpack-preprocessor');
module.exports = (on/*, config*/) => {
    // `on` is used to hook into various events Cypress emits
    // `config` is the resolved Cypress config
    /*
        on('file:preprocessor', file => {
            return compileFile(file);
        });
    */
    const webpackOptions = {
        webpackOptions: require('webpack.config.js'),
        watchOptions: {}
    };

    on('file:preprocessor', webpackPreprocessor(webpackOptions))
}

webpack.config.js:

/*
 * Webpack configuration to use the NODE_PATH env variable as explains here: https://github.com/cypress-io/cypress/issues/8481
*/

const cwd = process.cwd();
const path = require('path');

const nodePath = process.env.NODE_PATH || 'src';

const modules=['node_modules', '.']; // path.resolve(cwd, nodePath)];
console.log('On webpack.config.js. modules is:', modules);

module.exports = {
  resolve: {
    modules: modules
  }
}

I run Cypress with this command: NODE_ENV=e2etest NODE_PATH=node_modules:. npx cypress open

No luck but since I migrate to Cypress 7.2?0 I was unable to run one test. First is Incompatility with webpack V5 and now this problem coming from outspace.

Any help will be greatly appreciated.

[jmcollin78]

Changing: const modules=['node_modules', '.'];

by const modules=[path.resolve(cwd, 'node_modules'), cwd];

have resolve the problem for me.

[nvladimirovi]

I'm not sure this will help all of you guys, but for me what solved the problem is the following.

I had already installed the following deps, because I want to use cucumber as well along with cypress, the config is the usual as per the docs. Deps:

"@cypress/webpack-preprocessor": "5.8.0",
"@types/cypress-cucumber-preprocessor": "4.0.0",
"cypress": "7.3.0",
"cypress-cucumber-preprocessor": "4.1.0"

I was getting an error when I was starting my tests, so I found that I need latest ts-loader and webpack to I can continue go on. (This might solve the issue described here, what I think is that cypress uses indirectly through ts-loader this VolumeIcon etc.)

Get latest ts loader and webpack

"ts-loader": "9.1.2",
"webpack": "5.37.0",

But yet again another problem came up, NodeJS built-ins are not included by default, so we need to add them manually. If you are using somewhere NodeJS globals like process you might get in trouble. I my case I had to include path and process, so the way to do that is:

Adding Polyfills

1. install "process": "0.11.10" "path-browserify": "1.0.1"
2. in your webpack config add the following:

Configure path

fallback: {
        "path": require.resolve("path-browserify")
},

Configure process global var

plugins: [
        new webpack.ProvidePlugin({
               process: 'process/browser',
        }),
]

Hope this might help some of you.

Attaching refs to my sources 📚 https://github.com/vfile/vfile/issues/38#issuecomment-532851965 https://webpack.js.org/migrate/5/ https://webpack.js.org/configuration/resolve/ https://stackoverflow.com/questions/65018431/webpack-5-uncaught-referenceerror-process-is-not-defined

[peey]

For me, a similar error occurred (the file path was different, it was ~/.gitmodules for some reason when my project is located ~/actually/somewhere/inside) because my editor added a import {describe} from "mocha" to the top of the file, and that essentially confused the hell out of cypress.

As soon as I removed that import, things started working.

[pcdavid]

I just had the same error under Linux (node 16.10.0, cypress 9.4.1):

Error: ENOENT: no such file or directory, stat '/initrd.img'

In my case this was because my test was importing '@testing-library/react' but it was not installed in my node_modules. It seems the module resolution logic tries (recursively) all parent directories, up to the root of the disk, but crashes badly when it finds a broken symbolic link somewhere during this search. The other day I had the same error except it complained about ~/.steampath (which is indeed a broken symlink too) Installing the missing module fixed the issue for me, but the error message as visible in the Cypress UI is not helpful at all.

[dvwright]

To echo some other comments, I was able to resolve this by installing 'missing' packages (deps from the app I am testing)

For example, if using yarn.

Try a yarn install and look for missing dependencies e.g. has unmet peer dependency <- add these to your devDependencies (webpack.config.js)

Then, if getting a Webpack Compilation Error

Error: Webpack Compilation Error
Module not found: Error: Can't resolve 'this/path' 

Add an alias to module.exports (webpack.config.js)

  resolve: {
    symlinks: false,
    alias: {
      'this/path': path.resolve(__dirname, '../this/path'),
    },

Dependencies I added/installed to resolve this.

"node-sass"
"path-browserify"
"postcss"
"process"
"react"
"react-dom"

[jmayergit]

was missing after I upgraded my Mac OS.

I encountered this error only after upgrading my Mac OS as well. I followed your instructions and was able to get past the error which exposed my real error, an improper import.

[ackmanx]

Cause of this for me was pretty subtle... Intellij auto-imported beforeEach from mocha instead of using the global. That one import caused Cypress to crash with the wierd VolumeIcon error. I deleted the import and it all worked again.