When running cypress against a docker image on CI pipeline(using Codefresh) the image hangs for quite a while if using prettier-eslint cli without typescript installed on the detect Resolved typescript step

[dqiubread]

Current behavior

When Typescript is not installed as a dev dependency in package.json. The image hangs in codefresh stuck on the detect detect for a few minutes before continuing.
cypress:scaffold-config:detect Resolved typescript from /node_modules/typescript/lib/typescript.js +0ms
After removing the prettier-eslint library we noticed that the message changed and the CI Pipeline continues without hanging with this message.
cypress:scaffold-config:detect No typescript installed - using js +0ms
Looking in the cypress repo it seems to be this change here listed in the below PR. It seems that the check was changed to check for a typescript lib in the nodemodules library and defaults to typescript even though the package we are using is using typescript but our cypress project was using javascript.
309c31f#diff-ce8622dde6ed83c3ceb55b5766f02a3dd06e26b84a51e0de44083e9246a768bfR123-R140

Desired behavior

If the cypress repo is a javascript repo and we have a package is that using typescript we should not need to install typescript as a dependency in the package.json file

Test code to reproduce

Step to Repro:

1. Create a javascript test repo
2. Install prettier-eslint-cli
3. Setup a config file
4. Create Docker Image
5. Run in a CI pipeline with the command cypress run --spec "cypress/e2e/start.spec.js" --browser chrome

DockerFile
FROM cypress/included:10.0.2

Cypress Version

10.0.2 - 11.1.0

Node version

16.16

Operating System

Docker Image on Linux in CI environment

Debug Logs

After removing prettier-eslint-cli
`
cypress:scaffold-config:detect No typescript installed - using js +0ms
  cypress:server:video using ffmpeg from /root/.cache/Cypress/11.1.0/Cypress/resources/app/node_modules/@ffmpeg-installer/linux-x64/ffmpeg +0ms
  cypress:server:performance-benchmark elapsed time at run mode ready: 461.424ms +0ms
  cypress:lifecycle:ProjectConfigIpc fork child process { CHILD_PROCESS_FILE_PATH: '/root/.cache/Cypress/11.1.0/Cypress/resources/app/node_modules/@packages/server/lib/plugins/child/require_async_child.js', configProcessArgs: [ '--projectRoot', '/', '--file', '/cypress-rbc.config.js' ], childOptions: { stdio: 'pipe', cwd: '/', execPath: '/usr/local/bin/node' } } +0ms
  cypress:lifecycle:ProjectConfigIpc no typescript found, just use regular Node.js +0ms
  cypress:lifecycle:ProjectConfigIpc trigger the load of the file +7ms
  cypress:lifecycle:child:run_require_async_child:286 configFile: /cypress-rbc.config.js +0ms
  cypress:lifecycle:child:run_require_async_child:286 projectRoot: / +0ms
  cypress:lifecycle:child:run_require_async_child:286 try loading /cypress-rbc.config.js +2ms
  cypress:lifecycle:child:run_require_async_child:286 Loading file /cypress-rbc.config.js +0ms
`

Before removing Prettier-eslint-cli

`
Cypress:scaffold-config:detect Resolved typescript from /node_modules/typescript/lib/typescript.js +0ms
  cypress:server:video using ffmpeg from /root/.cache/Cypress/11.1.0/Cypress/resources/app/node_modules/@ffmpeg-installer/linux-x64/ffmpeg +0ms
  cypress:server:performance-benchmark elapsed time at run mode ready: 485421.722ms +0ms
  cypress:lifecycle:ProjectConfigIpc fork child process { CHILD_PROCESS_FILE_PATH: '/root/.cache/Cypress/11.1.0/Cypress/resources/app/node_modules/@packages/server/lib/plugins/child/require_async_child.js', configProcessArgs: [ '--projectRoot', '/', '--file', '/cypress-rbc.config.js' ], childOptions: { stdio: 'pipe', cwd: '/', execPath: '/usr/local/bin/node' } } +0ms
  cypress:lifecycle:ProjectConfigIpc found typescript in / +1ms
  cypress:lifecycle:ProjectConfigIpc using cjs with --require /root/.cache/Cypress/11.1.0/Cypress/resources/app/node_modules/@packages/server/lib/plugins/child/register_ts_node.js +0ms
  cypress:lifecycle:ProjectConfigIpc trigger the load of the file +162ms
  cypress:server:register-ts-node executing register_ts_node with args { _: [ '/usr/local/bin/node', '/root/.cache/Cypress/11.1.0/Cypress/resources/app/node_modules/@packages/server/lib/plugins/child/require_async_child.js' ], projectRoot: '/', file: '/cypress-rbc.config.js' } +0ms
  cypress:server:register-ts-node registering ts-node for projectRoot: / and file: /cypress-rbc.config.js +2ms
  cypress:server:ts-node projectRoot path: / +0ms
  cypress:server:ts-node registeredFile: /cypress-rbc.config.js +0ms
  cypress:server:plugins resolving typescript with projectRoot '/' +0ms
  cypress:server:plugins resolved typescript /node_modules/typescript/lib/typescript.js +0ms
  cypress:server:ts-node typescript path: /node_modules/typescript/lib/typescript.js +0ms
  cypress:server:ts-node registering project TS with options { compiler: '/node_modules/typescript/lib/typescript.js', compilerOptions: { module: 'commonjs' }, dir: '/', transpileOnly: true } +173ms
Couldn't find tsconfig.json. tsconfig-paths will be skipped
`

Other

The fix for us was to also install typescript into our node packages even though we have a javascript cypress project.
Before
"devDependencies": { "@babel/core": "^7.13.1", "@babel/eslint-parser": "^7.13.4", "@babel/eslint-plugin": "^7.13.0", "@babel/plugin-proposal-class-properties": "^7.13.0", "@cypress/instrument-cra": "^1.4.0", "@cypress/skip-test": "^2.6.0", "@cypress/snapshot": "^2.1.7", "@testing-library/cypress": "^8.0.2", "axe-core": "^4.5.2", "babel-plugin-istanbul": "^6.0.0", "cypress": "^11.1.0", "cypress-audit": "^0.3.0", "cypress-postgres": "^1.1.1", "cypress-recurse": "^1.23.0", "cypress-repeat": "^2.2.1", "eslint-plugin-cypress": "^2.11.2", "eslint-plugin-unused-imports": "^2.0.0", "gmail-tester": "^1.3.1", "husky": "^6.0.0", "junit-report-merger": "^3.0.6", "nyc": "^15.1.0", "prettier-eslint-cli": "^5.0.1" },
After
"devDependencies": { "@babel/core": "^7.13.1", "@babel/eslint-parser": "^7.13.4", "@babel/eslint-plugin": "^7.13.0", "@babel/plugin-proposal-class-properties": "^7.13.0", "@cypress/instrument-cra": "^1.4.0", "@cypress/skip-test": "^2.6.0", "@cypress/snapshot": "^2.1.7", "@testing-library/cypress": "^8.0.2", "axe-core": "^4.5.2", "babel-plugin-istanbul": "^6.0.0", "cypress": "^11.1.0", "cypress-audit": "^0.3.0", "cypress-postgres": "^1.1.1", "cypress-recurse": "^1.23.0", "cypress-repeat": "^2.2.1", "eslint-plugin-cypress": "^2.11.2", "eslint-plugin-unused-imports": "^2.0.0", "gmail-tester": "^1.3.1", "husky": "^6.0.0", "junit-report-merger": "^3.0.6", "nyc": "^15.1.0", "prettier-eslint-cli": "^7.1.0", "typescript": "^4.9.3" },

[mike-plummer]

Hi @dqiubread , sorry for the delay in getting to this. I'll be taking a look today and will let you know what I find

[mike-plummer]

@dqiubread , did a little research on this and have a couple questions/options. First off, I wasn't able to reproduce the "pauses for several minutes" behavior you described, but I suspect I know what's going on. While checking whether the project uses Typescript we perform a couple checks:

1. See if the /cypress.config.* file uses a JS or TS extension
2. If unable to determine that, check whether typescript is a direct project dependency
3. If TS not a direct dependency but is a transitive dependency then check whether project directory contains any TS/TSX/tsconfig.json files (excluding the node_modules directory)

Based on the logs you provided (thank you for providing the debug logs, btw!) your docker image is falling through to the third condition. If your image contains a large number of files outside node_modules it is probably this filesystem scan that is the slow part. Do you happen to be storing your Cypress config file in an alternate location or name it something other than the default? If you move your Cypress config file to the project root I suspect the pause would go away since the TS detector logic would bail out almost immediately.

I do believe there is a bug here - this logic should see if a custom config file location has been specified and use that instead of assuming the config file is stored at the project root. Assuming the custom config file name/location is the problem that would mitigate this issue for you. As an aside - if your image does happen to include a large number of files do you mind sharing what sort of content it is? Is there a common sort of directories/files we should exclude beyond node_modules that might speed up this filesystem check?

If I'm wrong and the config file isn't the issue here could you provide a minimal reproduction that I could use to debug?

[dqiubread]

We do rename the cypress.config file. The image should be pretty small besides the tests that we have. We have quite a few cypress tests. This is what our dockerfile looks like

FROM cypress/included:11.1.0
# Renders <filename>.json.tmpl files using env vars
RUN npm install -g envsub

# Fix the docker LIBVA error occurring in
ENV LIBVA_DRIVER_NAME=--disable-software-rasterizer

COPY package.json package.json
RUN npm i

COPY ./cypress ./cypress
COPY cypress-rbc.config.js ./cypress-rbc.config.js
COPY cypress-ads.config.js ./cypress-ads.config.js
COPY ./config ./config

[mike-plummer]

@dqiubread Thanks for confirming my suspicion about the custom naming - I'll get that passed along to the team to address. I wonder if the issue is not using a custom WORKDIR in your Docker image - your project directory will, in effect, be the root of the image so the filesystem scan will end up looking through everything within the image which includes all the browers, Node executable, etc. Could you maybe try adding something like this?

WORKDIR /e2e
COPY package.json package.json
RUN npm i
....
....

[dqiubread]

@dqiubread Thanks for confirming my suspicion about the custom naming - I'll get that passed along to the team to address. I wonder if the issue is not using a custom WORKDIR in your Docker image - your project directory will, in effect, be the root of the image so the filesystem scan will end up looking through everything within the image which includes all the browers, Node executable, etc. Could you maybe try adding something like this?

WORKDIR /e2e
COPY package.json package.json
RUN npm i
....
....

I got it working by adding typescript. I dont think adding the /e2e would make a difference would it?

[mike-plummer]

@dqiubread The intent of my suggestion was to have your Cypress project files within a subdirectory on the image. My suspicion is that the hang you experience is from your current Cypress project directory being the root of the image - the current logic scans the project directory for Typescript files, and since your project directory is effectively / we end up scanning the entire image when really we just need to look at your Cypress-related files. Putting them in a subdirectory and executing Cypress from there would cut out the vast majority of the image from being scanned.

I have a PR open to consider the location of a custom Cypress config file when checking for Typescript support - this should mitigate the issue for you without having to add typescript as a dependency. The suggestion above may prevent the hang from occurring without adding a typescript dependency until the PR is merged and released in a future version of Cypress.

[cypress-bot]

The code for this is done in cypress-io/cypress#25254, but has yet to be released.
We'll update this issue and reference the changelog when it's released.

[cypress-bot]

Released in 12.3.0.

This comment thread has been locked. If you are still experiencing this issue after upgrading to
Cypress v12.3.0, please open a new issue.