Cypress Included image with Vite 6 fails on bitbucket CI #1287

vadimpopa · 2025-01-20T08:10:59Z

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/vite@6.0.7_@types+node@22.10.7_sass-embedded@1.83.4_terser@5.37.0_tsx@4.19.2_yaml@2.7.0/node_modules/vite/dist/node/chunks/dep-BJP6rrE_.js:49266:32)

      at async process (/opt/atlassian/pipelines/agent/build/node_modules/.pnpm/vite@6.0.7_@types+node@22.10.7_sass-embedded@1.83.4_terser@5.37.0_tsx@4.19.2_yaml@2.7.0/node_modules/vite/dist/node/chunks/dep-BJP6rrE_.js:49367:24)

      at async compileCSSPreprocessors (/opt/atlassian/pipelines/agent/build/node_modules/.pnpm/vite@6.0.7_@types+node@22.10.7_sass-embedded@1.83.4_terser@5.37.0_tsx@4.19.2_yaml@2.7.0/node_modules/vite/dist/node/chunks/dep-BJP6rrE_.js:48437:28)

      at async compileCSS (/opt/atlassian/pipelines/agent/build/node_modules/.pnpm/vite@6.0.7_@types+node@22.10.7_sass-embedded@1.83.4_terser@5.37.0_tsx@4.19.2_yaml@2.7.0/node_modules/vite/dist/node/chunks/dep-BJP6rrE_.js:48495:32)

      at async TransformPluginContext.transform (/opt/atlassian/pipelines/agent/build/node_modules/.pnpm/vite@6.0.7_@types+node@22.10.7_sass-embedded@1.83.4_terser@5.37.0_tsx@4.19.2_yaml@2.7.0/node_modules/vite/dist/node/chunks/dep-BJP6rrE_.js:47862:11)

      at async EnvironmentPluginContainer.transform (/opt/atlassian/pipelines/agent/build/node_modules/.pnpm/vite@6.0.7_@types+node@22.10.7_sass-embedded@1.83.4_terser@5.37.0_tsx@4.19.2_yaml@2.7.0/node_modules/vite/dist/node/chunks/dep-BJP6rrE_.js:47223:18)

      at async loadAndTransform (/opt/atlassian/pipelines/agent/build/node_modules/.pnpm/vite@6.0.7_@types+node@22.10.7_sass-embedded@1.83.4_terser@5.37.0_tsx@4.19.2_yaml@2.7.0/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"]

The text was updated successfully, but these errors were encountered:

MikeMcC399 · 2025-01-20T09:31:14Z

@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 · 2025-01-20T09:50:15Z

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 · 2025-01-20T10:17:39Z

@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 · 2025-01-20T10:21:43Z

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 · 2025-01-20T10:56:47Z

@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 vite@6.0.9 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 · 2025-01-20T11:38:55Z

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 · 2025-01-20T11:51:24Z

@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.

vadimpopa · 2025-01-20T12:26:27Z

hey @MikeMcC399 ,

actually I missed to update Vite in the new branch, so that's why it didn't fail. Here's the yml that fails with the related dependencies :

image: node:22.11.0
image: cypress/included:14.0.0 # https://hub.docker.com/r/cypress/included/tags

definitions:
    caches:
        pnpm:
            path: .pnpm-store
            key:
                files:
                    - 'package.json'
        cypress: $HOME/.cache/Cypress

    yaml-anchors:
        - &default-step-commands |
            corepack enable pnpm
            corepack install
            pnpm install
            node -v

pipelines:
    pull-requests:
        '**':
            - step:
                  name: Installing dependencies
                  condition:
                      changesets:
                          includePaths:
                              # any changes in frontend directory or packages.json
                              - 'src/**'
                              - 'package.json'
                  caches:
                      - pnpm
                  script:
                      - *default-step-commands
            - parallel:
                  steps:
                      - step:
                            name: Test split 1
                            caches:
                                - pnpm
                            script:
                                - *default-step-commands
                                - pnpm run test --env IS_CI_RUN=true,NO_COMMAND_LOG=1,split=3,splitIndex=0
                      - step:
                            name: Test split 2
                            caches:
                                - pnpm
                            script:
                                - *default-step-commands
                                - pnpm run test --env IS_CI_RUN=true,NO_COMMAND_LOG=1,split=3,splitIndex=1
                      - step:
                            name: Test split 3
                            caches:
                                - pnpm
                            script:
                                - *default-step-commands
                                - pnpm run test --env IS_CI_RUN=true,NO_COMMAND_LOG=1,split=3,splitIndex=2

Where test command is:

cypress run --component --browser chrome --headless --config-file ./cypress/cypress.config.js

Dependencies:

		"@cypress/vite-dev-server": "^6.0.1",
		"cypress": "14.0.0",
		"cypress-plugin-tab": "^1.0.5",
		"cypress-split": "^1.24.7",
		"sass-embedded": "^1.83.4",
		"vite": "^6.0.9",

MikeMcC399 · 2025-01-20T14:11:32Z

@vadimpopa

Thank you for the additional details of your workflow and dependencies! Can you supply a complete public repo which shows this error occurring? Either your actual setup or a minimal reproducible executable example? There are a lot of factors involved and it may not be possible to reproduce and find the problem without a complete working example.

MikeMcC399 · 2025-01-20T14:47:05Z

@vadimpopa

I was able to successfully run a simple Bitbucket pipeline with Vite 6.0.9, Cypress 14 and the image cypress/included:14.0.0:

image: cypress/included:14.0.0

pipelines:
  default:
    - step:
        script:
          - npm ci
          - npx cypress run --component --browser chrome

This supports my previous comment #1287 (comment) where I said that it may not be possible to reproduce the issue without a failing example.

vadimpopa · 2025-01-20T15:45:42Z

You need sass-embeeded, as I pointed out in deps, the errors is from that package...and is related to VITE css preprocessor...anyways, gonna close it as I do not have time for it more. We just switched to cypress factory with our custom things and works ok.

MikeMcC399 · 2025-01-20T16:29:17Z

@vadimpopa

...anyways, gonna close it as I do not have time for it more.

I appreciate that if you have a working solution that you do not want to spend time on this issue.

I did try installing sass-embedded@1.83.4, however that on its own did not cause the pipeline to fail. I expect it would need further configuration to be like in your project in order to see the failure.

If you want to come back to this at any time, then please add a comment and we can re-open it. I will close it now, as it is not reproducible without further information.

MikeMcC399 self-assigned this Jan 20, 2025

MikeMcC399 added the needs information label Jan 20, 2025

vadimpopa closed this as completed Jan 20, 2025

vadimpopa reopened this Jan 20, 2025

MikeMcC399 closed this as not planned Won't fix, can't repro, duplicate, stale Jan 20, 2025

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Cypress Included image with Vite 6 fails on bitbucket CI #1287

Cypress Included image with Vite 6 fails on bitbucket CI #1287

vadimpopa commented Jan 20, 2025 •

edited

Loading

MikeMcC399 commented Jan 20, 2025

vadimpopa commented Jan 20, 2025 •

edited

Loading

MikeMcC399 commented Jan 20, 2025

vadimpopa commented Jan 20, 2025 •

edited

Loading

MikeMcC399 commented Jan 20, 2025

vadimpopa commented Jan 20, 2025

MikeMcC399 commented Jan 20, 2025

vadimpopa commented Jan 20, 2025

MikeMcC399 commented Jan 20, 2025

MikeMcC399 commented Jan 20, 2025

vadimpopa commented Jan 20, 2025

MikeMcC399 commented Jan 20, 2025

Cypress Included image with Vite 6 fails on bitbucket CI #1287

Cypress Included image with Vite 6 fails on bitbucket CI #1287

Comments

vadimpopa commented Jan 20, 2025 • edited Loading

MikeMcC399 commented Jan 20, 2025

vadimpopa commented Jan 20, 2025 • edited Loading

MikeMcC399 commented Jan 20, 2025

vadimpopa commented Jan 20, 2025 • edited Loading

MikeMcC399 commented Jan 20, 2025

vadimpopa commented Jan 20, 2025

MikeMcC399 commented Jan 20, 2025

vadimpopa commented Jan 20, 2025

MikeMcC399 commented Jan 20, 2025

MikeMcC399 commented Jan 20, 2025

vadimpopa commented Jan 20, 2025

MikeMcC399 commented Jan 20, 2025

vadimpopa commented Jan 20, 2025 •

edited

Loading

vadimpopa commented Jan 20, 2025 •

edited

Loading

vadimpopa commented Jan 20, 2025 •

edited

Loading