[TypeScript] percySnapshot - TypeError: Cannot read properties of undefined (reading 'isTTY')

[ayaanqui]

The problem

Running percy exec -- cypress run gives me the following errors:

TypeError: Cannot read properties of undefined (reading 'isTTY')
      at PercyLogger.write (http://localhost:3000/__cypress/tests?p=cypress/support/index.js:5511:27)
      at PercyLogger.log (http://localhost:3000/__cypress/tests?p=cypress/support/index.js:5498:12)
      at Object.isPercyEnabled (http://localhost:3000/__cypress/tests?p=cypress/support/index.js:5839:11)
      at async Context.eval (http://localhost:3000/__cypress/tests?p=cypress/support/index.js:5148:10)

I was able to narrow down where the error/failed tests were stemming from, and it looks like all my tests pass if I comment out lines where I'm using percyScreenshot. The odd thing is that running cypress open works fine and passes all tests as expected.

Environment

• Node version: 14.18.0
• @percy/cli version: 1.0.0-beta.70
• Version of Percy SDK you’re using:
• If needed, a build or snapshot ID:
• OS version:
• Type of shell command-line [interface]:

Code to reproduce issue

The error occurs exactly at line 7, so removing/deleting that line (cy.percySnapshot(...) results in a passing test.

const screenWidths = [375, 768, 1280]

describe("ordering stocks", () => {
  it("should visit homepage", () => {
    cy.visit("/")
    cy.findByText(/My text/)
    cy.percySnapshot("DSC homepage", { widths: screenWidths })
  })
})

[Robdel12]

Hey @ayaanqui! This sounds like it's a compile issue -- are you doing anything in your cypress setup that changes how code is bundled? It looks like logger is being bundled in Cypress and process.stdout is polyfilled to be undefined.

[ayaanqui]

@Robdel12 here's what my cypress.json looks like:

{
  "baseUrl": "http://localhost:3000/stockcenter",
  "video": false,
  "defaultCommandTimeout": 10000,
  "chromeWebSecurity": false
}

[Robdel12]

The pre-processor wouldn't be configured in the cypress.json -- looks like it's done in the plugins file: https://docs.cypress.io/api/plugins/preprocessors-api#Examples

Given this isn't an issue on the out-of-box setup (https://github.com/percy/example-percy-cypress/commit/3f44d1641a33cbba0b826c62b3fc70ad97b0ef47), there's something different about your test suite causing this. A reproduction repo would be helpful

[alexbjorlig]

We are also facing this issue 😅 What should we look for in the plugins file?

[Robdel12]

I'm not sure -- what is different in your plugins file? The issue is deff related to the bundle and how Percy's SDK is being polyfilled incorrectly. Something is not picking the correct bundle we're providing (we provide both a browser and node library).

A reproduction project would probably be most helpful since I can't replicate on a fresh cypress project. 🤨

[ayaanqui]

@Robdel12 Apologies for the late response, but I did make a repo that reproduces the issue github.com/ayaanqui/percy-snapshot-demo. Let me know if the project works for you. make sure to run yarn install then yarn start and finally yarn cypress:run which should fail the tests as shown in this issue. The test file should be in cypress/integration/test.ts.

[alexbjorlig]

Can we somehow escalate this issue - is happening more and more. Will try to update cypress to version9 today to see if that improves anything

[ayaanqui]

@alexbjorlig Yes, I have noticed on other repos as well this is definitely an issue. github.com/ayaanqui/percy-snapshot-demo does replicate the issue as described here. Do let me know if you manage to find a solution.

[Robdel12]

👋🏼 This seems to be an issue with how TypeScript is bundling the tests together. We ship a different version of the logger for browsers and node. For some reason, the node version is being pulled in and then polyfilled since it’s a node API.

Did this start happening with a specific version of typescript? Or has this always been an issue?

[ayaanqui]

For me this wasn't always the case, tests used to work fine. The errors started after upgrading for sure, but I'm not entirely sure from what version exactly

[dharani420]

even i have noticed this issue after upgrading to cypress version 8, I tried to downgrade the cypress version to 7.7.0 , still issue persists. not sure what went wrong. Please suggest me on this issue . Thanks in advance!

[Robdel12]

We won't have time to really dig in until next week, but it's not an issue with Cypress. Looks to be an issue with TypeScript / how tests are being bundled. Might be worth downgrading TypeScript to see where/if the error goes away

[github-actions[bot]]

This issue is stale because it has been open for more than 14 days with no activity. Remove stale label or comment or this will be closed in 14 days.

[stbth01]

was a resolution to this? I'm getting this sporadically in my build environment it will be 1 out of 300 test maybe but enough to be annoying.

We are on Cypress 9.6.1 and just using cypress default prepossessing with webpack.

[you1anna]

Any updates on this, I get a similar error on Cypress v9.7.0 with the latest Percy installed

npx percy exec -- cypress run --spec cypress/integration/RandR/Visual/*

     TypeError: Cannot read properties of undefined (reading 'write')
      at Function../node_modules/@percy/sdk-utils/dist/logger.js.logger.log (https://site1.dev/__cypress/tests?p=cypress/integration/RandR/Visual/pdf.spec.js:37669:53)
      at Object.info (https://site1.dev/__cypress/tests?p=cypress/integration/RandR/Visual/pdf.spec.js:37615:29)
      at Object.isPercyEnabled (https://site1.dev/__cypress/tests?p=cypress/integration/RandR/Visual/pdf.spec.js:37815:11)
      at async Context.eval (https://site1.dev/__cypress/tests?p=cypress/integration/RandR/Visual/pdf.spec.js:37450:10)

Any ideas?

[stbth01]

I'm getting this now too, I just updated to cypress version 10 and bumped the percy sdk to the latest before that update I was getting the 'isTTY" message.

[wwilsman]

This is a dependency resolution issue within your project's build tool that can't be fixed by us.

node_modules/@percy/sdk-utils/dist/logger.js

This is a Node export for the package, but you are using it in a Cypress browser, which is why you are seeing an error when it tries to access Node things.

The correct file for browsers should be node_modules/@percy/sdk-utils/dist/bundle.js. The package.json for the @percy/sdk-utils project correctly defines this as the browser bundle with all other exports being meant for Node.

https://github.com/percy/cli/blob/497772c62e2fa2d763b350c40a0cfec918f7125f/packages/sdk-utils/package.json#L23-L28

So if the dependency resolution in your project is getting this wrong, then whatever tool is being used in your project is not correctly using these package.json standards (or is not configured to prefer browser bundles over Node entrypoints).

Closing this now since this isn't a bug on our end

[stbth01]

This issue keeps coming up for us and we just try the workflow but I have been asked to review it again. I'm not sure I understand you point that is its a dependency issue because for us it will take several sshots then hit this error, if it was a dependency issue would we hit it in the first go or hit it all the time (we often can re-try and it will work)

[AtofStryker]

@stbth01 I ran into this while trying to update some repositories within Cypress that leverage Percy integration. You likely need to set __PERCY_BROWSERIFIED__ for sdk-utils to be aware that it isn't running in node.js. You can do that in webpack like this:

plugins: [
 new webpack.DefinePlugin({
    'process.env.__PERCY_BROWSERIFIED__': true
  })
]