Cypress vite failed to load config esbuild problem

[marina-mosti]

Current behavior

Cypress + vite/vue is outputting this error message (on M1 macs)

$ cypress open-ct
failed to load config from /Users/marina/Developer/vue-3-cypress-vite/vite.config.js

You installed esbuild on another platform than the one you're currently using.
This won't work because esbuild is written with native code and needs to
install a platform-specific binary executable.

Specifically the "esbuild-darwin-arm64" package is present but this platform
needs the "esbuild-darwin-64" package instead. People often get into this
situation by installing esbuild on Windows or macOS and copying "node_modules"
into a Docker image that runs Linux, or by copying "node_modules" between
Windows and WSL environments.

If you are installing with npm, you can try not copying the "node_modules"
directory when you copy the files over, and running "npm ci" or "npm install"
on the destination platform after the copy. Or you could consider using yarn
instead which has built-in support for installing a package on multiple
platforms simultaneously.

If you are installing with yarn, you can try listing both this platform and the
other platform in your ".yarnrc.yml" file using the "supportedArchitectures"
feature: https://yarnpkg.com/configuration/yarnrc/#supportedArchitectures
Keep in mind that this means multiple copies of esbuild will be present.

Another alternative is to use the "esbuild-wasm" package instead, which works
the same way on all platforms. But it comes with a heavy performance cost and
can sometimes be 10x slower than the "esbuild" package, so you may also not
want to do that.

Error: 
You installed esbuild on another platform than the one you're currently using.
This won't work because esbuild is written with native code and needs to
install a platform-specific binary executable.

Specifically the "esbuild-darwin-arm64" package is present but this platform
needs the "esbuild-darwin-64" package instead. People often get into this
situation by installing esbuild on Windows or macOS and copying "node_modules"
into a Docker image that runs Linux, or by copying "node_modules" between
Windows and WSL environments.

If you are installing with npm, you can try not copying the "node_modules"
directory when you copy the files over, and running "npm ci" or "npm install"
on the destination platform after the copy. Or you could consider using yarn
instead which has built-in support for installing a package on multiple
platforms simultaneously.

If you are installing with yarn, you can try listing both this platform and the
other platform in your ".yarnrc.yml" file using the "supportedArchitectures"
feature: https://yarnpkg.com/configuration/yarnrc/#supportedArchitectures
Keep in mind that this means multiple copies of esbuild will be present.

Another alternative is to use the "esbuild-wasm" package instead, which works
the same way on all platforms. But it comes with a heavy performance cost and
can sometimes be 10x slower than the "esbuild" package, so you may also not
want to do that.

    at generateBinPath (/Users/marina/Developer/vue-3-cypress-vite/node_modules/esbuild/lib/main.js:1784:17)
    at esbuildCommandAndArgs (/Users/marina/Developer/vue-3-cypress-vite/node_modules/esbuild/lib/main.js:1868:31)
    at ensureServiceIsRunning (/Users/marina/Developer/vue-3-cypress-vite/node_modules/esbuild/lib/main.js:2030:25)
    at Object.build (/Users/marina/Developer/vue-3-cypress-vite/node_modules/esbuild/lib/main.js:1923:26)
    at bundleConfigFile (/Users/marina/Developer/vue-3-cypress-vite/node_modules/vite/dist/node/chunks/dep-9c153816.js:71364:34)
    at loadConfigFromFile (/Users/marina/Developer/vue-3-cypress-vite/node_modules/vite/dist/node/chunks/dep-9c153816.js:71341:35)
    at resolveConfig (/Users/marina/Developer/vue-3-cypress-vite/node_modules/vite/dist/node/chunks/dep-9c153816.js:70873:34)
    at createServer (/Users/marina/Developer/vue-3-cypress-vite/node_modules/vite/dist/node/chunks/dep-9c153816.js:56425:26)
    at start (/Users/marina/Developer/vue-3-cypress-vite/node_modules/@cypress/vite-dev-server/dist/startServer.js:64:36)
    at processTicksAndRejections (node:internal/process/task_queues:96:5)
    at async startDevServer (/Users/marina/Developer/vue-3-cypress-vite/node_modules/@cypress/vite-dev-server/dist/index.js:8:27)
✨  Done in 6.97s.

Output of debug right before crash/attempt to read config:

  cypress:server:plugins call event dev-server:start for invocation id inv1 +1ms
  cypress:server:plugins:child execute plugin event: dev-server:start ({ eventId: 2, invocationId: 'inv1' }) +113ms
  cypress:vite-dev-server:start starting vite dev server +0ms
  cypress:vite-dev-server:start the resolved server config is {
  cypress:vite-dev-server:start   "configFile": "/Users/marina/Developer/vue-3-cypress-vite/vite.config.js",
  cypress:vite-dev-server:start   "base": "/__cypress/src/",
  cypress:vite-dev-server:start   "root": "/Users/marina/Developer/vue-3-cypress-vite",
  cypress:vite-dev-server:start   "plugins": [
  cypress:vite-dev-server:start     {
  cypress:vite-dev-server:start       "name": "cypress-transform-html",
  cypress:vite-dev-server:start       "enforce": "pre"
  cypress:vite-dev-server:start     }
  cypress:vite-dev-server:start   ],
  cypress:vite-dev-server:start   "resolve": {
  cypress:vite-dev-server:start     "alias": {
  cypress:vite-dev-server:start       "@vue/compiler-core": "/Users/marina/Developer/vue-3-cypress-vite/node_modules/@vue/compiler-core/dist/compiler-core.cjs.js"
  cypress:vite-dev-server:start     }
  cypress:vite-dev-server:start   },
  cypress:vite-dev-server:start   "server": {
  cypress:vite-dev-server:start     "port": 3000
  cypress:vite-dev-server:start   },
  cypress:vite-dev-server:start   "optimizeDeps": {
  cypress:vite-dev-server:start     "entries": [
  cypress:vite-dev-server:start       "src/components/HelloWorld.spec.js",
  cypress:vite-dev-server:start       "src/Message.spec.js",
  cypress:vite-dev-server:start       "/Users/marina/Developer/vue-3-cypress-vite/cypress/support/index.js"
  cypress:vite-dev-server:start     ]
  cypress:vite-dev-server:start   }
  cypress:vite-dev-server:start } +8ms
failed to load config from /Users/marina/Developer/vue-3-cypress-vite/vite.config.js
  cypress:server:plugins promise rejected for id inv1 ':' Error: 

Desired behavior

Cypress should launch and vite dev server should get fired

Test code to reproduce

Clone: https://github.com/lmiller1990/vue-3-cypress-vite

Replace package.json with:

{
  "name": "my-vue-app",
  "version": "0.0.0",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "serve": "vite preview"
  },
  "dependencies": {
    "@cypress/vite-dev-server": "^2.x.x",
    "cypress": "^9.x.x",
    "vue": "^3.2.25"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^2.2.0",
    "vite": "^2.8.x"
  }
}

Run yarn cypress open-ct

Cypress Version

9.5.2

Other

Seems related to:

vitejs/vite#917
evanw/esbuild#1646
https://esbuild.github.io/getting-started/#simultaneous-platforms

However I'm not sure how this would affect cypress. Unless cypress internally is somehow copying the node modules folder or something similar. This doesnt seem to affect earlier versions, when the sfc compiler was being used. Maybe related? I can't seem to figure out the cause

[marina-mosti]

Update: it seems that this may be an esbuild mac M1 problem

Specifically the "esbuild-darwin-arm64" package is present but this platform
needs the "esbuild-darwin-64" package instead

Is there a specific version of eslint that is getting bundled into the cypress dev server perhaps? Reading from other people's problems with M1 and esbuild it seem that it comes from sharing node_modules which is not the case here at all

[marina-mosti]

Resolved:

I had installed node directly from the node website and there seems to be some incompatibility on the esbuild versions for M1 macs because of it. The solution is to remove that node version, and use nvm to install it instead.

[charleshimmer]

I also had this problem and when I installed node from n it solved it.

[lumacerqueira]

I installed esbuild npm install esbuild
Then it was added to the dependencies and the project worked

[yossefsabry]

I installed esbuild npm install esbuild Then it was added to the dependencies and the project worked

thanks this work

[AnjulaMadusanka]

I installed esbuild npm install esbuild Then it was added to the dependencies and the project worked

this is work for me, thank you @lumacerqueira