Problems with migrating to 5.0 version due to issues with webpack configuration

Current behavior:

We are trying to migrate to Cypress 5.0 and having some issues with webpack compilation. Here’s what we did:

1. Installed webpack-preprocessor
2. Added it to our plugins/index.js

// ***********************************************************
// This example plugins/index.js can be used to load plugins
//
// You can change the location of this file or turn off loading
// the plugins file with the 'pluginsFile' configuration option.
//
// You can read more here:
// https://on.cypress.io/plugins-guide
// ***********************************************************

// This function is called when a project is opened or re-opened (e.g. due to
// the project's config changing)
// eslint-disable-next-line

// promisified fs module
const fs = require('fs-extra')
const path = require('path')

const webpackPreprocessor = require('@cypress/webpack-preprocessor')
const defaults = webpackPreprocessor.defaultOptions

function getConfigurationByFile(file) {
    const pathToConfigFile = path.resolve('cypress', 'config', `${file}.json`)

    return fs.readJson(pathToConfigFile)
}

function islogableError(event) {
    if (event.url === undefined) {
        return true
    }
    return !(
        event.url.indexOf('google-analytics.com') > 0 ||
        event.url.indexOf('new10.blueconic.net') > 0 ||
        event.url.indexOf('player.vimeo.com') > 0
    )
}

// plugins file
module.exports = (on, config) => {
    // `on` is used to hook into various events Cypress emits
    // `config` is the resolved Cypress config
    require('cypress-terminal-report').installPlugin(on)
    require('cypress-log-to-output').install(on, (type, event) => {
        // return true or false from this plugin to control if the event is logged
        // `type` is either `console` or `browser`
        // if `type` is `browser`, `event` is an object of the type `LogEntry`:
        //  https://chromedevtools.github.io/devtools-protocol/tot/Log#type-LogEntry
        // if `type` is `console`, `event` is an object of the type passed to `Runtime.consoleAPICalled`:
        //  https://chromedevtools.github.io/devtools-protocol/tot/Runtime#event-consoleAPICalled

        return (event.level === 'error' || event.type === 'error') && islogableError(event)
    })
    delete defaults.webpackOptions.module.rules[0].use[0].options.presets
    on('file:preprocessor', webpackPreprocessor(defaults))

    const environment = process.env.ENVIRONMENT || config.env.ENVIRONMENT || 'acceptance'
    console.log(`plugins/index.js: Loading local config from cypress/config/${environment}.json...`)
    return getConfigurationByFile(environment)
}

When we run `$(yarn bin)/cypress open and run any of our tests, the browser crashes and in the debug log we see

 Error: Can't resolve 'fs' in '/Users/andrew/Work/New10/Testing/cypress/node_modules/cypress-terminal-report/src/outputProcessor'

error. Full log attached:

➜ DEBUG=cypress:webpack $(yarn bin)/cypress open
  cypress:webpack typescript not found +0ms
  cypress:webpack get default options +0ms
  cypress:webpack load default options +0ms
  cypress:webpack user options: { webpackOptions: { mode: 'development', module: { rules: [Array] } }, watchOptions: {} } +50ms
plugins/index.js: Loading local config from cypress/config/dev.json...
[cypress-log-to-output] Attempting to connect to Chrome Debugging Protocol
[cypress-log-to-output] Connected to Chrome Debugging Protocol
GET /__/ 200 4.262 ms - -
GET /__cypress/runner/cypress_runner.css 200 3.217 ms - -
GET /__cypress/runner/cypress_runner.js 200 1.249 ms - -
GET /__cypress/iframes/integration/regular/approveAndBeyond/bv-complex-multiUBO-with-Spouse-e2e.js 200 2.644 ms - -
GET /__cypress/runner/fonts/fa-solid-900.woff2 200 1.181 ms - 76120
  cypress:webpack get /Users/andrew/Work/New10/Testing/cypress/cypress/integration/regular/approveAndBeyond/bv-complex-multiUBO-with-Spouse-e2e.js +1m
  cypress:webpack load default options +0ms
  cypress:webpack setting devtool to inline-source-map +1ms
  cypress:webpack webpackOptions: { mode: 'development', module: { rules: [ [Object] ] }, entry: [ '/Users/andrew/Work/New10/Testing/cypress/cypress/integration/regular/approveAndBeyond/bv-complex-multiUBO-with-Spouse-e2e.js' ], output: { path: '/Users/andrew/Library/Application Support/Cypress/cy/production/projects/cypress-6a748727a98c889f97baeeb385d13b8d/bundles/cypress/integration/regular/approveAndBeyond', filename: 'bv-complex-multiUBO-with-Spouse-e2e.js' }, devtool: 'inline-source-map' } +0ms
  cypress:webpack watchOptions: {} +0ms
  cypress:webpack input: /Users/andrew/Work/New10/Testing/cypress/cypress/integration/regular/approveAndBeyond/bv-complex-multiUBO-with-Spouse-e2e.js +0ms
  cypress:webpack output: /Users/andrew/Library/Application Support/Cypress/cy/production/projects/cypress-6a748727a98c889f97baeeb385d13b8d/bundles/cypress/integration/regular/approveAndBeyond/bv-complex-multiUBO-with-Spouse-e2e.js +3ms
  cypress:webpack watching +100ms
  cypress:webpack compile /Users/andrew/Work/New10/Testing/cypress/cypress/integration/regular/approveAndBeyond/bv-complex-multiUBO-with-Spouse-e2e.js +2ms
  cypress:webpack get /Users/andrew/Work/New10/Testing/cypress/cypress/support/index.js +13ms
  cypress:webpack load default options +0ms
  cypress:webpack setting devtool to inline-source-map +0ms
  cypress:webpack webpackOptions: { mode: 'development', module: { rules: [ [Object] ] }, entry: [ '/Users/andrew/Work/New10/Testing/cypress/cypress/support/index.js' ], output: { path: '/Users/andrew/Library/Application Support/Cypress/cy/production/projects/cypress-6a748727a98c889f97baeeb385d13b8d/bundles/cypress/support', filename: 'index.js' }, devtool: 'inline-source-map' } +1ms
  cypress:webpack watchOptions: {} +0ms
  cypress:webpack input: /Users/andrew/Work/New10/Testing/cypress/cypress/support/index.js +0ms
  cypress:webpack output: /Users/andrew/Library/Application Support/Cypress/cy/production/projects/cypress-6a748727a98c889f97baeeb385d13b8d/bundles/cypress/support/index.js +0ms
  cypress:webpack watching +3ms
  cypress:webpack compile /Users/andrew/Work/New10/Testing/cypress/cypress/support/index.js +1ms
  cypress:webpack get /Users/andrew/Work/New10/Testing/cypress/cypress/integration/regular/approveAndBeyond/bv-complex-multiUBO-with-Spouse-e2e.js +2ms
  cypress:webpack already have bundle for /Users/andrew/Work/New10/Testing/cypress/cypress/integration/regular/approveAndBeyond/bv-complex-multiUBO-with-Spouse-e2e.js +0ms
  cypress:webpack stats had error(s) +2s
  cypress:webpack errored bundling /Users/andrew/Library/Application Support/Cypress/cy/production/projects/cypress-6a748727a98c889f97baeeb385d13b8d/bundles/cypress/support/index.js Webpack Compilation Error
./node_modules/cypress-terminal-report/src/outputProcessor/BaseOutputProcessor.js
Module not found: Error: Can't resolve 'fs' in '/Users/andrew/Work/New10/Testing/cypress/node_modules/cypress-terminal-report/src/outputProcessor'
resolve 'fs' in '/Users/andrew/Work/New10/Testing/cypress/node_modules/cypress-terminal-report/src/outputProcessor'
  Parsed request is a module
  using description file: /Users/andrew/Work/New10/Testing/cypress/node_modules/cypress-terminal-report/package.json (relative path: ./src/outputProcessor)
    Field 'browser' doesn't contain a valid alias configuration
    Looked for and couldn't find the file at the following paths:
[/Users/andrew/Work/New10/Testing/cypress/node_modules/cypress-terminal-report/src/outputProcessor/node_modules]
[/Users/andrew/Work/New10/Testing/cypress/node_modules/cypress-terminal-report/src/node_modules]
[/Users/andrew/Work/New10/Testing/cypress/node_modules/node_modules]
[/Users/andrew/Work/New10/Testing/node_modules]
[/Users/andrew/Work/New10/node_modules]
[/Users/andrew/Work/node_modules]
[/Users/andrew/node_modules]
[/Users/node_modules]
[/node_modules]
[/Users/andrew/Work/New10/Testing/cypress/node_modules/cypress-terminal-report/node_modules/fs]
[/Users/andrew/Work/New10/Testing/cypress/node_modules/fs]
[/Users/andrew/Work/New10/Testing/cypress/node_modules/cypress-terminal-report/node_modules/fs.wasm]
[/Users/andrew/Work/New10/Testing/cypress/node_modules/fs.wasm]
[/Users/andrew/Work/New10/Testing/cypress/node_modules/cypress-terminal-report/node_modules/fs.mjs]
[/Users/andrew/Work/New10/Testing/cypress/node_modules/fs.mjs]
[/Users/andrew/Work/New10/Testing/cypress/node_modules/cypress-terminal-report/node_modules/fs.js]
[/Users/andrew/Work/New10/Testing/cypress/node_modules/fs.js]
[/Users/andrew/Work/New10/Testing/cypress/node_modules/cypress-terminal-report/node_modules/fs.json]
[/Users/andrew/Work/New10/Testing/cypress/node_modules/fs.json]
 @ ./node_modules/cypress-terminal-report/src/outputProcessor/BaseOutputProcessor.js 1:11-24
 @ ./node_modules/cypress-terminal-report/src/outputProcessor/CustomOutputProcessor.js
 @ ./node_modules/cypress-terminal-report/src/installLogsPrinter.js
 @ ./node_modules/cypress-terminal-report/index.js
 @ ./cypress/support/index.js +2ms
  cypress:webpack - compile finished for /Users/andrew/Work/New10/Testing/cypress/cypress/support/index.js, initial? true +31ms
Webpack Compilation Error
./node_modules/cypress-terminal-report/src/outputProcessor/BaseOutputProcessor.js
Module not found: Error: Can't resolve 'fs' in '/Users/andrew/Work/New10/Testing/cypress/node_modules/cypress-terminal-report/src/outputProcessor'
resolve 'fs' in '/Users/andrew/Work/New10/Testing/cypress/node_modules/cypress-terminal-report/src/outputProcessor'
  Parsed request is a module
  using description file: /Users/andrew/Work/New10/Testing/cypress/node_modules/cypress-terminal-report/package.json (relative path: ./src/outputProcessor)
    Field 'browser' doesn't contain a valid alias configuration
    Looked for and couldn't find the file at the following paths:
[/Users/andrew/Work/New10/Testing/cypress/node_modules/cypress-terminal-report/src/outputProcessor/node_modules]
[/Users/andrew/Work/New10/Testing/cypress/node_modules/cypress-terminal-report/src/node_modules]
[/Users/andrew/Work/New10/Testing/cypress/node_modules/node_modules]
[/Users/andrew/Work/New10/Testing/node_modules]
[/Users/andrew/Work/New10/node_modules]
[/Users/andrew/Work/node_modules]
[/Users/andrew/node_modules]
[/Users/node_modules]
[/node_modules]
[/Users/andrew/Work/New10/Testing/cypress/node_modules/cypress-terminal-report/node_modules/fs]
[/Users/andrew/Work/New10/Testing/cypress/node_modules/fs]
[/Users/andrew/Work/New10/Testing/cypress/node_modules/cypress-terminal-report/node_modules/fs.wasm]
[/Users/andrew/Work/New10/Testing/cypress/node_modules/fs.wasm]
[/Users/andrew/Work/New10/Testing/cypress/node_modules/cypress-terminal-report/node_modules/fs.mjs]
[/Users/andrew/Work/New10/Testing/cypress/node_modules/fs.mjs]
[/Users/andrew/Work/New10/Testing/cypress/node_modules/cypress-terminal-report/node_modules/fs.js]
[/Users/andrew/Work/New10/Testing/cypress/node_modules/fs.js]
[/Users/andrew/Work/New10/Testing/cypress/node_modules/cypress-terminal-report/node_modules/fs.json]
[/Users/andrew/Work/New10/Testing/cypress/node_modules/fs.json]
 @ ./node_modules/cypress-terminal-report/src/outputProcessor/BaseOutputProcessor.js 1:11-24
 @ ./node_modules/cypress-terminal-report/src/outputProcessor/CustomOutputProcessor.js
 @ ./node_modules/cypress-terminal-report/src/installLogsPrinter.js
 @ ./node_modules/cypress-terminal-report/index.js
 @ ./cypress/support/index.js
GET /__cypress/tests?p=cypress/support/index.js 200 2395.327 ms - -
GET /__cypress/tests?p=cypress/integration/regular/approveAndBeyond/bv-complex-multiUBO-with-Spouse-e2e.js - - ms - -
The automation client disconnected. Cannot continue running tests.

However, in the cypress itself we see this :

Desired behavior:

From what i understand, we need to setup webpack config in some way, but i can’t figure out in which exactly way. Your help would be much appreciated

Versions

Operating system : Mac OS Catalina 10.15.6 Cypress version: 5.0

Our dependencies :

"devDependencies": {
    "@babel/core": "^7.11.4",
    "@babel/preset-env": "^7.11.0",
    "@cypress/webpack-preprocessor": "^5.4.4",
    "babel-eslint": "^7.1.1",
    "babel-loader": "^8.1.0",
    "cypress": "5.0.0",
    "cypress-failed-log": "2.7.0",
    "cypress-promise": "^1.0.2",
    "eslint": "^3.14.0",
    "eslint-plugin-prettier": "^2.7.0",
    "faker": "^4.1.0",
    "flatted": "^2.0.0",
    "fs-extra": "^7.0.1",
    "husky": "^0.14.3",
    "lint-staged": "^4.0.2",
    "mocha": "^5.0.0",
    "mochawesome": "^3.1.2",
    "prettier": "^1.18.2",
    "prettier-eslint": "^6.4.2",
    "webpack": "^4.44.1"
  },
  "dependencies": {
    "@new10com/test-state-generator": "1.0.1239-2020-06-15-12-10-20",
    "assert": "^1.5.0",
    "aws-sdk": "^2.554.0",
    "axios": "^0.18.1",
    "axios-delay": "^1.0.0-rc6",
    "chai-almost": "^1.0.1",
    "cypress-localstorage-commands": "1.2.1",
    "cypress-log-to-output": "^1.1.1",
    "cypress-terminal-report": "1.4.2",
    "form-data": "^3.0.0",
    "jspdf": "^1.5.3",
    "lodash": "^4.17.11",
    "mkdirp": "^0.5.1",
    "mochawesome-merge": "^1.0.7",
    "moment": "^2.27.0",
    "qs": "^6.9.3",
    "query-string": "^5.0.0",
    "react-is": "^16.8.6",
    "request": "^2.81.0",
    "telerivet": "^1.2.1",
    "yargs": "^8.0.2"
  }```

[chrisbreiding]

Looks like swagger-generated code and webpack don’t play well together. They have a workaround in their documentation here.

Here’s how to implement it with Cypress.

Install the necessary dependencies:

npm i -D @cypress/webpack-preprocessor @cypress/webpack-batteries-included-preprocessor

Add the following to cypress/plugins/index.js:

const wp = require('@cypress/webpack-batteries-included-preprocessor')

module.exports = (on, config) => {
  const options = wp.defaultOptions

  options.webpackOptions.module.rules.push({
    parser: { amd: false },
  })

  on('file:preprocessor', wp(options))
}

I’ll have to research whether or not it makes sense to bake this into Cypress or whether it will end up breaking projects that rely on webpack supporting AMD.

[bobmacneal]

I’m seeing a similar issue here. Rolling back to v4.11.0 until this is resolved.