Unknown file extension ".ts" cypress.config.ts on CI

Question

When I run npm run cypress:run in my GitLab CI env I get the error:

Your configFile is invalid: //WebApp/cypress.config.ts It threw an error when required, check the stack trace below: TypeError [ERR_UNKNOWN_FILE_EXTENSION]: Unknown file extension ".ts" for //WebApp/cypress.config.ts

test:cypress:
  image:
    name: cypress/included:10.3.1-typescript
    entrypoint: ['']
  stage: test
  script:
    - yarn install --frozen-lockfile
    - cd WebApp
    - npm run cypress:run
  rules:
    - *branch

If I run npm run cypress:run from the WebApp folder (where cypress.config.ts is in the root) locally I have no issue. Also no issues when I do an npx cypress:run

However, if I run npx cypress run --config-file WebApp/cypress.config.ts from the parent folder locally I do get the error:

Unknown file extension ".ts"

Any ideas why locally Cypress is working but on the CI the config file is incorrect?

Answer 1

I updated this github issue with some more information.

This will be because you have typescript installed globally on your machine so it will work ok locally but not in CI.

Essentially typescript has to be in the folder from where the cypress command is run for it to detect typescript properly.

I went with:

  script:
      - npm install --global serve
      - serve ./build --listen 3000 &
      - rm package*
      - npm install @percy/cypress typescript
      - npm install --global @percy/cli
      - percy exec --verbose -- cypress run

Just installing the bare minimum to run the e2e tests ./build is an artifact from another run and percy is really great if you have not used it before.