Cypress Included image with Vite 6 fails on bitbucket CI

[vadimpopa]

Hi,

It seems that this issue has not been resolved after upgrading to v14.0.0. When we run Cypress Included with Vite 6.0.7 on Bitbucket CI it fails:

2:46:29 PM [vite] Internal server error: [sass] Cannot read properties of undefined (reading 'initAsyncCompiler')

  Plugin: vite:css

  File: /opt/atlassian/pipelines/agent/build/theme/all.scss

      at Object.run (/opt/atlassian/pipelines/agent/build/node_modules/.pnpm/[email protected]_@[email protected][email protected][email protected][email protected][email protected]/node_modules/vite/dist/node/chunks/dep-BJP6rrE_.js:49266:32)

      at async process (/opt/atlassian/pipelines/agent/build/node_modules/.pnpm/[email protected]_@[email protected][email protected][email protected][email protected][email protected]/node_modules/vite/dist/node/chunks/dep-BJP6rrE_.js:49367:24)

      at async compileCSSPreprocessors (/opt/atlassian/pipelines/agent/build/node_modules/.pnpm/[email protected]_@[email protected][email protected][email protected][email protected][email protected]/node_modules/vite/dist/node/chunks/dep-BJP6rrE_.js:48437:28)

      at async compileCSS (/opt/atlassian/pipelines/agent/build/node_modules/.pnpm/[email protected]_@[email protected][email protected][email protected][email protected][email protected]/node_modules/vite/dist/node/chunks/dep-BJP6rrE_.js:48495:32)

      at async TransformPluginContext.transform (/opt/atlassian/pipelines/agent/build/node_modules/.pnpm/[email protected]_@[email protected][email protected][email protected][email protected][email protected]/node_modules/vite/dist/node/chunks/dep-BJP6rrE_.js:47862:11)

      at async EnvironmentPluginContainer.transform (/opt/atlassian/pipelines/agent/build/node_modules/.pnpm/[email protected]_@[email protected][email protected][email protected][email protected][email protected]/node_modules/vite/dist/node/chunks/dep-BJP6rrE_.js:47223:18)

      at async loadAndTransform (/opt/atlassian/pipelines/agent/build/node_modules/.pnpm/[email protected]_@[email protected][email protected][email protected][email protected][email protected]/node_modules/vite/dist/node/chunks/dep-BJP6rrE_.js:41034:27)

2:46:29 PM [vite] (client) Pre-transform error: [sass] Cannot read properties of undefined (reading 'initAsyncCompiler')

  Plugin: vite:css

  File: /opt/atlassian/pipelines/agent/build/theme/all.scss

Seems that some dependencies are not ok.

Note that with Cypress factory on Jenkins we don't have any issues. We even seen minus 2 minutes improvements after upgrading to v14

ARG IMAGE_VERSION='1.2.0'
ARG CHROME_VERSION='131.0.6778.204-1'
ARG NODE_VERSION='22.11.0'
ARG CYPRESS_VERSION='14.0.0'

FROM cypress/factory:5.2.0

LABEL version=$IMAGE_VERSION

COPY . /opt/app
WORKDIR /opt/app
RUN corepack enable pnpm && corepack prepare pnpm@latest --activate
RUN pnpm add cypress -D -w
RUN npx cypress install 
# Set XDG_RUNTIME_DIR to a writable temporary directory
ENV XDG_RUNTIME_DIR=/tmp/xdg

# Create the runtime directory
RUN mkdir -p /tmp/xdg && chmod 700 /tmp/xdg
RUN apt-get update && apt-get install -y \
    libnss3 libxss1 libasound2 libx11-xcb1 && \
    rm -rf /var/lib/apt/lists/*
CMD ["bash"]

[MikeMcC399]

@vadimpopa

It seems that this issue has not been resolved after upgrading to v14.0.0.

Are you saying that the issue you describe was also occurring with Cypress 13.x?

When we run Cypress Included with Vite 6.0.7 on Bitbucket CI it fails:

Does this mean that you are using the image cypress/included:cypress-14.0.0-node-22.13.0-chrome-132.0.6834.83-1-ff-134.0.1-edge-131.0.2903.147-1 or are you using a different image?

[vite] Internal server error: [sass] Cannot read properties of undefined (reading 'initAsyncCompiler')

This does not look like an error which would be caused by a standard Cypress Docker image. I'm not sure that we can help you here.

[vadimpopa]

Are you saying that the issue you describe was also occurring with Cypress 13.x?

Yes, once we updated Vite to v6, then regardless of the Cypress version we get that error. And we have have though it has been fixed in Cypress v14

Does this mean that you are using the image cypress/included:cypress-14.0.0-node-22.13.0-chrome-132.0.6834.83-1-ff-134.0.1-edge-131.0.2903.147-1 or are you using a different image?

This one: cypress/included:14.0.0

[vite] Internal server error: [sass] Cannot read properties of undefined (reading 'initAsyncCompiler')

This does not look like an error which would be caused by a standard Cypress Docker image. I'm not sure that we can help you here.

Why then the image based on Cypress factory works, but with the included one does not ? I think Cypress docker images does not support fully Vite 6, we are migrating now our pipelines to our custom factory images...not sure if we will have time to investigate this issue, but thought it is good to report it.

[MikeMcC399]

@vadimpopa

Please clarify at what stage the vite error occurs.

Is it when you try to start the vite server in Docker or is it when you start testing with Cypress?

For your Cypress tests are you testing E2E or are you doing Component Testing?

If you have a public repo which shows the error that would be helpful for troubleshooting.

[vadimpopa]

It is Component Testing and the error starts before running the test, and only in CI...locally we have no issues.

Also we are having for quite some time this warning too...will take a look within next days to get rid of it

The CJS build of Vite's Node API is deprecated. See https://vite.dev/guide/troubleshooting.html#vite-cjs-node-api-deprecated for more details.

[MikeMcC399]

@vadimpopa

It is Component Testing and the error starts before running the test, and only in CI...locally we have no issues.

I am able to run Cypress Component Testing successfully on [email protected] in cypress/included:14.0.0 under GitHub Actions. To find out why it is failing in your environment on Bitbucket would need more investigation. Please add your failing Bitbucket pipeline workflow to this issue so we can see how you are running Cypress.

Also we are having for quite some time this warning too...will take a look within next days to get rid of it

The CJS build of Vite's Node API is deprecated. See https://vite.dev/guide/troubleshooting.html#vite-cjs-node-api-deprecated for more details.

• See Vite v5 / v6 gives CJS deprecation warning with Component testing cypress#29557. You will not be able to get rid of this deprecation warning until Cypress itself solves the issue.

[vadimpopa]

Ok, thx about the CJS issue.

Hmm, so I was preparing a none splitted pipeline file to share it with you, but when runing it on 14.0, it didn't fail. Weird, maybe there was some cache on 13.x, not really sure.....indeed it is not related to image thanks for your time.

[MikeMcC399]

@vadimpopa

It's good to hear that you are no longer seeing the issue!

Note that cypress/included installs Cypress as a global npm install. This may not work as you expect if you are enabling the experimental corepack and your package manager is pnpm.