bug(core): problem with 'fs' when using file preprocessing

[johancblom]

I'm trying to create unit tests with Cypress on a Vue project but keep getting an error:

Error: Webpack Compilation Error
./node_modules/cypress-firebase/lib/node-utils.js
Module not found: Error: Can't resolve 'fs' in 'C:\Users\johan\VueProjects\paddock-app\node_modules\cypress-firebase\lib'

cypress-io/cypress-documentation#714 says fs is not to be used in cypress as it is sitting in the browser. How do I go about avoiding this webpack compilation issue?

[prescottprue]

@johancblom the usage of fs is only within the plugin which is actually the node environment, not the browser, so things should work fine. Are you using a pre-v1 version or are you using latest? Can you provide a repo where the issue can be reproduced?

[johancblom]

Hi, thank you for getting back to me. I'm using v1.1.0. A test repo is https://github.com/johancblom/paddock-app, but from what you are saying is it the case that the plugin should not end up in a webpack bundle, or, should that part of the code be bundled in a 'node' target area perhaps.
You should be able to reproduce the issue if you npm run test:e2e

[prescottprue]

I see that you are doing preprocessing to get the setup working. It may have to do with the fact that the plugin is going into a webpack bundle, but I thought that Cypress would still handle that case since it is in a plugin instead of the browser/test environment (where the preprocessing is being applied).

It might help if you add a global in your webpack config that is for fs, something like:

node: {
   fs: "empty"
}

Out of curiosity, what is the preprocessing for exactly?

[johancblom]

Yes! that did the trick, thank you so much, I was going round in circles.

The preprocessing is needed for a cypress unit testing module for vue, see https://github.com/bahmutov/cypress-vue-unit-test#bundling

[prescottprue]

Thanks for letting me know it worked, we should add this to a section of the README in case other folks run into the same

[prescottprue]

Added a note to the README, so going to close. Thanks for reporting!

[cchatfield]

@prescottprue Could you add this to the package.json?

"browser": {
"fs": false,
"os": false,
"path": false
},

[prescottprue]

@cchatfield Can you open up a new issue describing what this change would accomplish? Also preferably with a repro for the issue

As mentioned above only certain sections of the library are actually meant for node where the rest are loaded in the browser by cypress, so I'm hesitant to in global settings without a full understanding of impact

[dpsthree]

I'm having this issue as well, but I'm using Angular with NX to structure my app. The Webpack configuration is intentionally hidden behind the tooling.

[prescottprue]

@dpsthree Can you possible open a new issue with a repro? That way I can make sure I'm debugging correctly

I though I had this working in an NX app that was React, but maybe I'm remembering wrong