Attempting to run Cypress Component tests with react & vite results in rollup error with `cypress/included` image

[ahayes91]

Hey folks!

When I try running cypress component tests with React and vite at https://github.com/ahayes91/storybook-msw-cypress/tree/with-docker using docker compose and cypress/included, I get the following error:

aislinn.hayes@AC02FG7F1MD6N storybook-msw-cypress % yarn cy:docker
yarn run v1.22.22
$ ./scripts/runDocker.sh
Running visual tests with Cypress version 14.4.0
[+] Running 1/1
 ✔ Container docker_cypress  Recreated                                                                                                   0.1s 
Attaching to docker_cypress
docker_cypress  | [STARTED] Task without title.
docker_cypress  | [SUCCESS] Task without title.
docker_cypress  | 
docker_cypress  | DevTools listening on ws://127.0.0.1:40953/devtools/browser/13738001-6a3a-4ede-99e4-44085240b0cf
docker_cypress  | Missing baseUrl in compilerOptions. tsconfig-paths will be skipped
docker_cypress  | Your configFile is invalid: /cypress/cypress.config.ts
docker_cypress  | 
docker_cypress  | It threw an error when required, check the stack trace below:
docker_cypress  | 
docker_cypress  | Error: Cannot find module @rollup/rollup-linux-x64-gnu. npm has a bug related to optional dependencies (https://github.com/npm/cli/issues/4828). Please try `npm i` again after removing both package-lock.json and node_modules directory.
docker_cypress  |     at requireWithFriendlyError (/cypress/node_modules/rollup/dist/native.js:64:9)
docker_cypress  |     at Object.<anonymous> (/cypress/node_modules/rollup/dist/native.js:73:76)
docker_cypress  |     at Module._compile (node:internal/modules/cjs/loader:1730:14)
docker_cypress  |     at node:internal/modules/cjs/loader:1895:10
docker_cypress  |     at Object.require.extensions.<computed> [as .js] (/root/.cache/Cypress/14.4.0/Cypress/resources/app/node_modules/ts-node/dist/index.js:848:20)
docker_cypress  |     at Module.load (node:internal/modules/cjs/loader:1465:32)
docker_cypress  |     at Function._load (node:internal/modules/cjs/loader:1282:12)
docker_cypress  |     at TracingChannel.traceSync (node:diagnostics_channel:322:14)
docker_cypress  |     at wrapModuleLoad (node:internal/modules/cjs/loader:235:24)
docker_cypress  |     at node:internal/modules/esm/translators:233:5
docker_cypress  |     at ModuleWrap.<anonymous> (node:internal/modules/esm/translators:200:7)
docker_cypress  |     at ModuleJobSync.runSync (node:internal/modules/esm/module_job:400:35)
docker_cypress  |     at ModuleLoader.importSyncForRequire (node:internal/modules/esm/loader:427:47)
docker_cypress  |     at loadESMFromCJS (node:internal/modules/cjs/loader:1561:24)
docker_cypress  |     at Module._compile (node:internal/modules/cjs/loader:1712:5)
docker_cypress  |     at node:internal/modules/cjs/loader:1895:10
docker_cypress  |     at Object.require.extensions.<computed> [as .js] (/root/.cache/Cypress/14.4.0/Cypress/resources/app/node_modules/ts-node/dist/index.js:848:20)
docker_cypress  |     at Module.load (node:internal/modules/cjs/loader:1465:32)
docker_cypress  |     at Function._load (node:internal/modules/cjs/loader:1282:12)
docker_cypress  |     at TracingChannel.traceSync (node:diagnostics_channel:322:14)
docker_cypress  |     at wrapModuleLoad (node:internal/modules/cjs/loader:235:24)
docker_cypress  |     at Module.require (node:internal/modules/cjs/loader:1487:12)
docker_cypress exited with code 1
Aborting on container exit...
[+] Stopping 1/1 Desktop   o View Config   w Enable Watch
 ✔ Container docker_cypress  Stopped                                                                                                     0.0s 

error Command failed with exit code 1.

There's a bit of info on this at vitejs/vite#15532 - my suspicion is that I need to run yarn install within the docker container itself to make the required platform node_modules available (I'm trying that out now on a separate branch on that repository).

But it would be handier if the cypress/included image came preinstalled with whatever it needs to run the vite server.
Is that possible?

Thank you!

[ahayes91]

ahayes91/storybook-msw-cypress@with-docker...with-docker-take-2 shows this working once I create a new image that runs yarn install, so that probably answers my own question 😂 But might be helpful to have here as a reference for other folks!
It would also be great to get some feedback on that approach, in particular the COPY . . step - are there other/better things we should be doing to speed up creation of the image etc!

[MikeMcC399]

@ahayes91

You can either run yarn (install) outside of Docker and pass the results to the container as a volume bind, or you can run yarn (install) inside the container.

I tried the following and it was successful:

git clone --branch with-docker https://github.com/ahayes91/storybook-msw-cypress
cd storybook-msw-cypress
npm install yarn@latest -g
yarn
docker run -it --rm -v .:/app -w /app --entrypoint cypress cypress/included run --component

Since this isn't a Cypress Docker bug or a feature request, I'm going to close the issue.

For community support from peers and "how-to" type discussions, you can use (click on button)