Can't resolve 'fs' in prettier/index.js and third-party.js

[meinaart]

Can't resolve 'fs' in prettier/index.js and third-party.js

[meinaart]

Good to hear that my work saves other people work. That was my intention ;).

You are right that fs is not available in the browser. But it should not execute prettier in that context. I can investigate this.

It would be very helpful if you could supply an example that triggers this bug. @btang-aa

[meinaart]

Did you run npm install in Cypress directory?

[renelux]

@meinaart I am a colleague of @btang-aa I tried to debug it for a bit and I think I might know where the problem comes from.

The commands.js requires the utils/snapshots.js the snapshots file requires prettier. As the commands.js code gets executed in the browser, we actually end up trying to require prettier in the browser which does not work.

I think the plugin might need to seperate code that can run on browser and server-side, and which are server only to prevent issues like this from occurring. Especially when you are considering to add features like screenshot comparison which need to heavily rely on the cy.task and server side execution.

You can ignore this comment, I tried it with the kitchensink example of Cypress and it works there.

[renelux]

I was able to track it down to the preprocessor we use webpack, I forked the kitchensink and modified it so that you can easily reproduce it. https://github.com/renelux/cypress-example-kitchensink/tree/cypress-plugin-snapshots

To reproduce just try to run any of the spec files after Cypress opens.

[SBoudrias]

Any chance you're just missing a proper target? I think maybe the webpack need to target node: https://webpack.js.org/concepts/targets/

The weird thing is that some cypress code target node and other target the browser; so it's unclear to me if this would then create the inverse problem (code running fine in Node, but throw error in the browser)

[renelux]

@SBoudrias if I change the target to node I get the following error.

Uncaught ReferenceError: require is not defined

This error originated from your test code, not from Cypress.

When Cypress detects uncaught errors originating from your test code it will automatically fail the current test.

Cypress could not associate this error to any specific test.

We dynamically generated a new test to display this failure.

Check your console for the stack trace or click this message to see where it originated from.
    at Object.<anonymous> (tests?p=cypress/support/index.js-750:16)
    at r (tests?p=cypress/support/index.js-750:1)
    at Object.<anonymous> (tests?p=cypress/support/index.js-750:1)
    at r (tests?p=cypress/support/index.js-750:1)
    at Object.<anonymous> (tests?p=cypress/support/index.js-750:16)
    at r (tests?p=cypress/support/index.js-750:1)
    at Object.<anonymous> (tests?p=cypress/support/index.js-750:16)
    at r (tests?p=cypress/support/index.js-750:1)
    at Module.<anonymous> (tests?p=cypress/support/index.js-750:58)
    at r (tests?p=cypress/support/index.js-750:1)

I am wondering what is the difference between the default processor browserify and webpack that is causing this particular problem.

[meinaart]

I am working on a fix by separating the utils a bit more. But this is in my toMatchImageSnapshot branch. So I am trying to get that to work.

If that takes too much time I will release a fix for this issue a bit earlier.

[renelux]

@meinaart we are not convinced that will completely solve the problem as it seems to be related to webpack. We are still investigating a bit on what is the difference between the browserify-preprocessor and the webpack-preprocessor.

[meinaart]

I think this should be fixed in 1.2.0

[btang-aa]

Bravo! It works! Thanks very much, and the plugin gives us the exact what we want!