validateOptions is not a function

[msmith1114]

Current behavior

Currently when attempting to run a simple spec (Such as noted in https://docs.cypress.io/guides/getting-started/writing-your-first-test#Write-a-real-test) Gives an error validateOptions is not a function. Specifically:

TypeError: validateOptions is not a function
    at new SourceMapDevToolPlugin

Desired behavior

Should no be receiving this error

Test code to reproduce

Sample spec used (All specs fail however):

describe('My First Test', () => {
    it('finds the content "type"', () => {
      cy.visit('https://example.cypress.io')
  
      cy.contains('type')
    })
  })

Versions

"cypress": "7.6.0",
"typescript": "^4.1.3",
"webpack": "^4.x"

Two things worth noting that did work (Gathered from looking at various issues such as #9145 and #8948 (comment)) removing

"node_modules", from:

"paths": {
      "*": [
        "node_modules/*",
        "app/packs/*"
      ],

Fixes the issue, OR removing "baseUrl": ".", from tsconfig.json completely works as well. Neither of this is desirable as I believe our project depends on this. I am not 100% sure I understand the issue exactly, but my guess is that it's looking at the wrong folder for the correct version of dependencies.

I am not really sure the best workaround here?

[msmith1114]

Looks like it may also be related to #14646

[jennifer-shehane]

@msmith1114 Is this a new issue or an issue you encountered upon updating to 7.6.0?

Can you provide a repo that we could run to recreate this error? It's probably some combination of webpack/ts/config that creates this issue.

[msmith1114]

@jennifer-shehane This happened with 7.5.0 as well. I don't know if I can upload the entire repo (Since it's another customers repo we are working on). I could probably grab the package.json or tsconfig.json however). It's a fresh install of cypress fwiw (nothing else modified with the base cypress install. It's a pretty generic react/rails project however.

Either way it seems to have something to do with the baseURL option in tsconfig specifically as related to the node_modules line. Removing either fixes the issue (the application seems to run fine as well without the "node_modules/*", but I am not 100% sure in what that does specifically.

I've not used Cypress on a typescript project before so there could be something obviously I am doing wrong. I'll try to get a repo set up with a base level to see if I can duplicate what's going on.

[msmith1114]

Here is what our current tsconfig.json looks like:

{
  "compilerOptions": {
    "declaration": false,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "allowSyntheticDefaultImports": true,
    "lib": [
      "es6",
      "dom"
    ],
    "module": "es6",
    "moduleResolution": "node",
    "baseUrl": ".",
    "paths": {
      "*": [
        "node_modules/*",
        "app/packs/*"
      ]
    },
    "sourceMap": true,
    "target": "es5",
    "noEmit": true,
    "jsx": "react",
    "strictNullChecks": true
  },
  "exclude": [
    "**/*.spec.ts",
    "node_modules",
    "vendor",
    "public"
  ],
  "compileOnSave": false
}

and package.json:

{
  "version": "0.1.0",
  "dependencies": {
    "@babel/core": "^7.0.0-0",
    "@babel/plugin-transform-flow-strip-types": "^7.12.10",
    "@babel/preset-react": "^7.12.10",
    "@babel/preset-typescript": "^7.12.7",
    "@casl/ability": "^5.2.2",
    "@casl/react": "^2.2.2",
    "@rails/actioncable": "^6.0.0",
    "@rails/activestorage": "^6.0.0",
    "@rails/ujs": "^6.0.0",
    "@rails/webpacker": "5.2.1",
    "@reduxjs/toolkit": "^1.5.0",
    "@types/classnames": "^2.2.11",
    "babel-loader": "^8.2.2",
    "babel-plugin-transform-react-remove-prop-types": "^0.4.24",
    "bootstrap": "^4.6.0",
    "classnames": "^2.2.6",
    "color": "^3.1.3",
    "css-loader": "^5.0.1",
    "css-minimizer-webpack-plugin": "^1.2.0",
    "dayjs": "^1.10.4",
    "final-form": "^4.20.2",
    "final-form-arrays": "^3.0.2",
    "final-form-calculate": "^1.3.2",
    "final-form-focus": "^1.1.2",
    "glob": "^7.1.6",
    "humps": "^2.0.1",
    "inflection": "^1.13.1",
    "json-sass": "^1.3.5",
    "lodash-es": "^4.17.20",
    "match-sorter": "^6.2.0",
    "mini-css-extract-plugin": "^1.3.4",
    "node-xml-lite": "^0.0.7",
    "pluralize": "^8.0.0",
    "prop-types": "^15.7.2",
    "react": "^17.0.1",
    "react-autosize-textarea": "^7.1.0",
    "react-bootstrap": "^1.4.3",
    "react-datepicker": "^3.5.0",
    "react-dnd": "^11.1.3",
    "react-dnd-html5-backend": "^11.1.3",
    "react-dom": "^17.0.1",
    "react-final-form": "^6.5.2",
    "react-final-form-arrays": "^3.1.3",
    "react-input-mask": "^2.0.4",
    "react-redux": "^7.2.2",
    "react-router": "^5.2.0",
    "react-router-bootstrap": "^0.25.0",
    "react-router-dom": "^5.2.0",
    "react-table": "^7.6.3",
    "react-transition-group": "^4.4.1",
    "redux": "^4.0.0-0",
    "resolve-url-loader": "^3.1.2",
    "sass": "^1.32.5",
    "sass-loader": "^10.1.1",
    "svgo": "^1.0.0",
    "typescript": "^4.1.3",
    "webpack": "^4.x"
  },
  "devDependencies": {
    "@storybook/addon-actions": "^6.1.15",
    "@storybook/addon-essentials": "^6.1.15",
    "@storybook/addon-links": "^6.1.15",
    "@storybook/react": "^6.1.15",
    "@storybook/theming": "^6.1.15",
    "@types/color": "^3.0.1",
    "@types/faker": "^5.1.5",
    "@types/final-form-focus": "^1.1.1",
    "@types/inflection": "^1.5.28",
    "@types/jest": "^26.0.20",
    "@types/lodash": "^4.14.168",
    "@types/lodash-es": "^4.17.4",
    "@types/pluralize": "^0.0.29",
    "@types/rails__activestorage": "^6.0.0",
    "@types/rails__ujs": "^6.0.0",
    "@types/react": "^17.0.0",
    "@types/react-bootstrap": "^0.32.25",
    "@types/react-datepicker": "^3.1.3",
    "@types/react-dom": "^17.0.0",
    "@types/react-input-mask": "^3.0.0",
    "@types/react-redux": "^7.1.16",
    "@types/react-router": "^5.1.11",
    "@types/react-router-dom": "^5.1.7",
    "@types/react-table": "^7.0.28",
    "@types/react-transition-group": "^4.4.0",
    "@types/webpack-env": "^1.16.0",
    "@typescript-eslint/eslint-plugin": "^4.14.1",
    "@typescript-eslint/parser": "^4.14.1",
    "cypress": "7.6.0",
    "eslint": ">=6.0.1",
    "eslint-config-prettier": "^7.2.0",
    "eslint-config-semistandard": "15.0.1",
    "eslint-config-standard": ">=14.1.0",
    "eslint-plugin-import": ">=2.18.0",
    "eslint-plugin-node": ">=9.1.0",
    "eslint-plugin-promise": ">=4.2.1",
    "eslint-plugin-react-hooks": "^4.2.0",
    "eslint-plugin-standard": ">=4.0.0",
    "faker": "^5.2.0",
    "jest": "^26.6.3",
    "webpack-cli": "^3.x",
    "webpack-dev-server": "^3.11.2"
  },
  "scripts": {
    "storybook": "start-storybook -p 6006",
    "prepare-assets": "yarn prepare-colors && yarn prepare-sprites",
    "prepare-colors": "node ./lib/tasks/prepare-color-palette.js",
    "prepare-sprites": "node ./lib/tasks/prepare-spritesheet.js",
    "build-storybook": "build-storybook",
    "postinstall": "yarn prepare-assets",
    "test": "jest",
    "jest": "node_modules/.bin/jest"
  }
}

Not sure if those help for now.

[jennifer-shehane]

I found this issue referenced here also: #16188 Where it was recommended to remove the node_modules from the paths.

I don't totally think this is ideal to recommend changing config that was previously fine but now doesn't work due to Cypress. But it may solve your issue for now without affecting anything. Let us know.

[msmith1114]

@jennifer-shehane That does indeed work, although I am not quite sure why it affects Cypress the way it does or what exactly the side effect is exactly. But it does fix the original issue. (As well as removing the baseURL, but from my understanding that's even less desired)

[cypress-app-bot]

This issue has not had any activity in 180 days. Cypress evolves quickly and the reported behavior should be tested on the latest version of Cypress to verify the behavior is still occurring. It will be closed in 14 days if no updates are provided.

[cypress-app-bot]

This issue has been closed due to inactivity.