Webpack Compilation Error / Module not found

[greendrake]

Workflow:

name: Cypress Test

on: [push]

jobs:
  install:
    runs-on: ubuntu-latest
    container: cypress/included:cypress-12.4.0-node-16.18.1-chrome-109.0.5414.74-1-ff-109.0-edge-109.0.1518.52-1
    steps:
      - name: Checkout codebase
        uses: actions/checkout@v3
    # Build it....

  ui-chrome-test:
    runs-on: ubuntu-latest
    container: cypress/included:cypress-12.4.0-node-16.18.1-chrome-109.0.5414.74-1-ff-109.0-edge-109.0.1518.52-1
    needs: install
    strategy:
      fail-fast: false
      matrix:
        # run copies of the current job in parallel
        containers: [1]
    steps:
      - name: 'UI Tests - Chrome'
        uses: cypress-io/[email protected]
        with:
          # we have already installed all dependencies above
          install: false
          browser: chrome

Error:

Error: Webpack Compilation Error
./cypress/support/e2e.js
Module not found: Error: Can't resolve 'cypress-plugin-stripe-elements' in

The module cypress-plugin-stripe-elements is properly installed as a dev dependency of the project. Furthermore, running the same Cypress container locally works just fine, all tests run and pass:

#!/bin/bash
DIR="$( cd -- "$(dirname "$0")" >/dev/null 2>&1 ; pwd -P )"
docker run -it --dns 172.17.0.1 --rm -v $DIR:/e2e -w /e2e -e CYPRESS_VIDEO=false -e CYPRESS_screenshotOnRunFailure=false cypress/included:cypress-12.4.0-node-16.18.1-chrome-109.0.5414.74-1-ff-109.0-edge-109.0.1518.52-1 --browser chrome

  ┌────────────────────────────────────────────────────────────────────────────────────────────────┐
  │ Cypress:        12.4.0                                                                         │
  │ Browser:        Chrome 109 (headless)                                                          │
  │ Node Version:   v16.18.1 (/usr/local/bin/node)                                                 │

One difference that might cause the GA run fail is the node binary location:

  │ Cypress:        12.4.0                                                                         │
  │ Browser:        Chrome 109 (headless)                                                          │
  │ Node Version:   v16.16.0 (/__e/node16/bin/node)                                                │

Why would the same container use different node binaries when running as a standalone container (locally) and from GA?

Why does the error occur in GA only?

[MikeMcC399]

@greendrake

Why would the same container use different node binaries when running as a standalone container (locally) and from GA?

cypress-io/github-action is a JavaScript action which uses node16 provided by GitHub through https://github.com/actions/runner/blob/main/src/Misc/externals.sh
NODE16_VERSION="16.16.0"
That is currently the only version available to JavaScript actions.

Why does the error occur in GA only?

Good question!

• What version of cypress-plugin-stripe-element are you using?

• Are you locked to using Node.js 16 or is your app also compatible with Node.js 18 (LTS)?

• Do you need to use a Docker container?

[MikeMcC399]

What is in your ./cypress/support/e2e.js?

In a default installation this is basically an empty template.

[greendrake]

@MikeMcC399 Thanks for your help!

cypress-io/github-action is a JavaScript action which uses node16 provided by GitHub through https://github.com/actions/runner/blob/main/src/Misc/externals.sh

Good to know. I was under the impression that since container was used, the action would use node from in there.

* What version of `cypress-plugin-stripe-element` are you using?

    "node_modules/cypress-plugin-stripe-elements": {
      "version": "1.0.2",
      "resolved": "https://registry.npmjs.org/cypress-plugin-stripe-elements/-/cypress-plugin-stripe-elements-1.0.2.tgz",
      "integrity": "sha512-tNXZ9BHooO8IGGmOpVRhNfGde/vmPY4D56pi4VHw1EWbfSuwCoveeqqjKDeRfPzMTD5gGYGwXdX2qO1S9O9GEg==",
      "dev": true
    },

* Are you locked to using Node.js `16` or is your app also compatible with Node.js `18` (LTS)?

I actually use v18 for local dev, but I only run Cypress from headless docker container. V16 is simply what the container has. Maybe it's time to check if there is a new container image.

* Do you need to use a Docker container?

It provides Cypress consistency across different local dev environments (our team have very different preferences as to OSes and how to run local dev envs) and GA/CI. It also allows to run Cypress headless. I don't really need to fire up the Cypress UI to run/develop tests.

[greendrake]

@MikeMcC399

What is in your ./cypress/support/e2e.js?

import './commands'
import 'cypress-plugin-stripe-elements'

The commands.js file contains comments only.

[MikeMcC399]

dbalatero/cypress-plugin-stripe-elements v1.0.2 was published 2 years ago and I see an open issue dbalatero/cypress-plugin-stripe-elements#13 "Update plugin to be compatible with Cypress 10". It doesn't look like it has been kept up to date and it hasn't run its own tests for two years. It would have been tested again an old version of Node.js at the time.

I guess you could clone the repo and see if its tests still run against current Node.js versions.

I don't expect there is an issue with github-action itself.

[greendrake]

Myth resolved.

We do not keep the node_modules folder in version control. The ui-chrome-test job has no access to any project modules — only the project code and the build (built in separate install job).

The solution is to simply copy the Cypress command defined in the cypress-plugin-stripe-elements plugin into cypress/support/commands.js. Thankfully, it is just a few lines of code.

[MikeMcC399]

@greendrake

Since you have the parameter

install: false

set, there is no installation of dependencies done by github-action.

Normally it would execute npm ci (or the equivalent for yarn & pnpm) which would make node_modules available according to what is defined in the corresponding lock file.

Sorry that I didn't catch this earlier. I assumed that the workflow you posted was missing a section where the installation was dealt with.

[MikeMcC399]

@greendrake

There is a working up-to-date example of split install & build then test on

https://github.com/bahmutov/cypress-gh-action-split-jobs/blob/main/.github/workflows/main.yml

in case you would like to compare.

[greendrake]

in case you would like to compar

Thanks, it looks like the pivotal difference is that they re-install all node_modules before running tests.

In our case it was completely unnecessary until we needed the plugin, so I opted to instead just copy the plugin's command.

If there was some way to install node_modules needed specifically for running Cypress tests (vs all modules needed to build the project) that would perhaps be sustainable solution.