Error with Winston library

I’m currently trying to setup Percy into Cypress, following this tutorial: https://docs.percy.io/docs/cypress

I then get an error Can't resolve fs.... Here’s the stacktrace:

./node_modules/winston/lib/winston/common.js Module not found: Error: Can't resolve 'fs' in '/home/maxime/Documents/code/frontend/node_modules/winston/lib/winston' resolve 'fs' in '/home/maxime/Documents/code/frontend/node_modules/winston/lib/winston' Parsed request is a module using description file: /home/maxime/Documents/code/frontend/node_modules/winston/package.json (relative path: ./lib/winston) Field 'browser' doesn't contain a valid alias configuration resolve as module /home/maxime/Documents/code/frontend/node_modules/winston/lib/winston/node_modules doesn't exist or is not a directory /home/maxime/Documents/code/frontend/node_modules/winston/lib/node_modules doesn't exist or is not a directory /home/maxime/Documents/code/frontend/node_modules/node_modules doesn't exist or is not a directory /home/maxime/Documents/code/node_modules doesn't exist or is not a directory /home/maxime/Documents/node_modules doesn't exist or is not a directory /home/maxime/node_modules doesn't exist or is not a directory /home/node_modules doesn't exist or is not a directory /node_modules doesn't exist or is not a directory looking for modules in /home/maxime/Documents/code/frontend/node_modules/winston/node_modules using description file: /home/maxime/Documents/code/frontend/node_modules/winston/package.json (relative path: ./node_modules) Field 'browser' doesn't contain a valid alias configuration looking for modules in /home/maxime/Documents/code/frontend/node_modules using description file: /home/maxime/Documents/code/frontend/package.json (relative path: ./node_modules) Field 'browser' doesn't contain a valid alias configuration using description file: /home/maxime/Documents/code/frontend/node_modules/winston/package.json (relative path: ./node_modules/fs) no extension Field 'browser' doesn't contain a valid alias configuration using description file: /home/maxime/Documents/code/frontend/package.json (relative path: ./node_modules/fs) no extension Field 'browser' doesn't contain a valid alias configuration /home/maxime/Documents/code/frontend/node_modules/winston/node_modules/fs doesn't exist .ts Field 'browser' doesn't contain a valid alias configuration /home/maxime/Documents/code/frontend/node_modules/fs doesn't exist .ts Field 'browser' doesn't contain a valid alias configuration /home/maxime/Documents/code/frontend/node_modules/winston/node_modules/fs.ts doesn't exist .js Field 'browser' doesn't contain a valid alias configuration /home/maxime/Documents/code/frontend/node_modules/fs.ts doesn't exist .js Field 'browser' doesn't contain a valid alias configuration /home/maxime/Documents/code/frontend/node_modules/winston/node_modules/fs.js doesn't exist /home/maxime/Documents/code/frontend/node_modules/fs.js doesn't exist as directory /home/maxime/Documents/code/frontend/node_modules/winston/node_modules/fs doesn't exist as directory /home/maxime/Documents/code/frontend/node_modules/fs doesn't exist [/home/maxime/Documents/code/frontend/node_modules/winston/lib/winston/node_modules] [/home/maxime/Documents/code/frontend/node_modules/winston/lib/node_modules] [/home/maxime/Documents/code/frontend/node_modules/node_modules] [/home/maxime/Documents/code/node_modules] [/home/maxime/Documents/node_modules] [/home/maxime/node_modules] [/home/node_modules] [/node_modules] [/home/maxime/Documents/code/frontend/node_modules/winston/node_modules/fs] [/home/maxime/Documents/code/frontend/node_modules/fs] [/home/maxime/Documents/code/frontend/node_modules/winston/node_modules/fs.ts] [/home/maxime/Documents/code/frontend/node_modules/fs.ts] [/home/maxime/Documents/code/frontend/node_modules/winston/node_modules/fs.js] [/home/maxime/Documents/code/frontend/node_modules/fs.js] @ ./node_modules/winston/lib/winston/common.js 12:9-22 @ ./node_modules/winston/lib/winston.js @ ./node_modules/@percy/agent/dist/utils/logger.js @ ./node_modules/@percy/agent/dist/utils/sdk-utils.js @ ./node_modules/@percy/agent/dist/index.js @ ./node_modules/@percy/cypress/dist/index.js @ ./cypress/support/commands.js @ ./cypress/support/index.js

I’ve done import '@percy/cypress'; in command.js file and that’s pretty much it 🤷‍♂️. Any idea? I might be missing something obvious too…

Thanks!

[Robdel12]

For those that had the workaround their webpack configs to exclude fs:

module.exports = {
+ node: {
+   fs: 'empty'
+ },
  resolve: {

You can remove that now with the latest version of the @percy/cypress package (v1.0.6). https://github.com/percy/percy-cypress/blob/master/CHANGELOG.md#106-2019-04-09

[Robdel12]

Hey @bahmutov & everyone here,

We’ve been hard at work to solve that issue over the past few days. I’m working on a change that will get rid of adding this from your configs:

node: {
  fs: 'empty'
},

What is happening is webpack is trying to bundle our node code with the small amount of browser code that we have in @percy/agent. The way to fix this is to properly bundle & transpile the code we inject into the browser & introduce a browser field in the package.json of @percy/agent. That way the bundlers will see the browser field and only bundle that code together. Right now our main in the package.json points to the entry of our node app, which bundlers use and try to bundle together 💥 . Once that’s done you’ll be able to remove that workaround from your webpack configs.

For @bahmutov (& @mapsandapps) regarding the health check issue with webpack, we shipped a new version of this SDK that should clear that right up (@percy/cypress v1.0.5). I took the calculator example and updated it:

https://github.com/bahmutov/calculator/compare/add-percy...Robdel12:rd/add-percy

I’ll also be using that as a test for the bundling fixes I talked about earlier. I’d love to hear if the new version of the SDK unblocks y’all!