"webpack module missing" error when adding this module to project

[gvlasov]

I added @bahmutov/add-typescript-to-cypress ^2.1.2 to a fresh project with cypress ^4.9.0

$ uname -a
Linux manjaro 4.19.126-1-MANJARO #1 SMP Wed Jun 3 22:30:22 UTC 2020 x86_64 GNU/Linux

I ran a simple test that uses a page object I created:

/// <reference types="cypress" />
import CountersPracticePage from "../components/CountersPracticePage";
import Role from 'data/Role'

context('counters-practice', () => {
    it.only('evaluates pick', () => {
        const page = new CountersPracticePage();
        page.open()
        page.selectRole(Role.Support)
        page.locator.approveButton().click()
    })
})

As a result of running that test, cypress shows the following error message:

/usr/bin/node /usr/lib/node_modules/npm/bin/npx-cli.js cypress run --no-exit --headed --reporter /home/chriego/Projects/personal/projects/cypress/node_modules/cypress-intellij-reporter --spec /home/chriego/Projects/personal/project/cypress/cypress/integration/counters-practice.spec.js
The plugins file is missing or invalid.

Your `pluginsFile` is set to `/home/chriego/Projects/personal/project/cypress/cypress/plugins/index.js`, but either the file is missing, it contains a syntax error, or threw an error when required. The `pluginsFile` must be a `.js` or `.coffee` file.

Or you might have renamed the extension of your `pluginsFile` to `.ts`. If that's the case, restart the test runner.

Please fix this, or set `pluginsFile` to `false` if a plugins file is not necessary for your project.

 Error: Cannot find module 'webpack'
Require stack:
- /home/chriego/Projects/personal/project/cypress/node_modules/@cypress/webpack-preprocessor/index.js
- /home/chriego/Projects/personal/project/cypress/cypress/plugins/cy-ts-preprocessor.js
- /home/chriego/Projects/personal/project/cypress/cypress/plugins/index.js
- /home/chriego/.cache/Cypress/4.9.0/Cypress/resources/app/packages/server/lib/plugins/child/run_plugins.js
- /home/chriego/.cache/Cypress/4.9.0/Cypress/resources/app/packages/server/lib/plugins/child/index.js
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:798:15)
    at Module._load (internal/modules/cjs/loader.js:691:27)
    at Module._load (electron/js2c/asar.js:717:26)
    at Function.Module._load (electron/js2c/asar.js:717:26)
    at Module.require (internal/modules/cjs/loader.js:853:19)
    at require (internal/modules/cjs/helpers.js:74:18)
    at Object.<anonymous> (/home/chriego/Projects/personal/project/cypress/node_modules/@cypress/webpack-preprocessor/index.js:2:17)
    at Module._compile (internal/modules/cjs/loader.js:968:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:986:10)
    at Module.load (internal/modules/cjs/loader.js:816:32)
    at Module._load (internal/modules/cjs/loader.js:728:14)
    at Module._load (electron/js2c/asar.js:717:26)
    at Function.Module._load (electron/js2c/asar.js:717:26)
    at Module.require (internal/modules/cjs/loader.js:853:19)
    at require (internal/modules/cjs/helpers.js:74:18)
    at Object.<anonymous> (/home/chriego/Projects/personal/project/cypress/cypress/plugins/cy-ts-preprocessor.js:1:12)

My tsconfig.json (I use tsconfig in project root instead of the one created by @bahmutov/add-typescript-to-cypress)

{
  "compilerOptions": {
    "strict": true,
    "baseUrl": "../node_modules",
    "target": "es5",
    "lib": ["es5", "dom", "esnext"],
    "types": ["cypress"]
  },
  "include": [
    "**/*.ts"
  ],
  "@data/*": [
    "../backend/src/data/*"
  ]
}

My package.json

{
  "name": "tests",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "cypress": "^4.9.0"
  },
  "devDependencies": {
    "@bahmutov/add-typescript-to-cypress": "^2.1.2",
    "cypress-intellij-reporter": "0.0.4"
  }
}

[gvlasov]

My guess would be that @bahmutov/add-typescript-to-cypress assumes you already use webpack?

[gvlasov]

I installed webpack and typescript and indeed it was the problem that they should have been installed.

The documentation mentions that typescript package has to be installed, but it doesn't mention that webpack package has to be installed.

[jonasms]

I'm getting Error: Cannot find module 'webpack', and my project has been using webpack (^4.29.6) w/out any problems.

Anyone have an idea of what might be happening?