Component-Testing doesn't compile plugins.js

Current behavior

Project dependencies:

• react-scripts: 1.1.5
• “webpack”: “3.8.1” (from react-scripts)

cypress.json config:

{
    "baseUrl": "http://localhost:3000",
    "video": false,
    "component": {
        "componentFolder": "src",
        "testFiles": ".*/__tests__/*.spec.{js,jsx,ts,tsx}"
    }
}

CypressHelloWorld.spec.js:

import * as React from 'react';
import { mount } from '@cypress/react';

it('Button', () => {
  mount(<button>Test button</button>);
  cy.get('button').contains('Test button').click();
})

Running npx cypress run-ct raises:

The plugins file is missing or invalid.

Your `pluginsFile` is set to `/home/mgarcia/projects/v3bitex-implementation/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`, `.ts`, or `.coffee` file.

Or you might have renamed the extension of your `pluginsFile`. 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.

 /home/mgarcia/projects/v3bitex-implementation/cypress/plugins/index.js:18
import { startDevServer } from '@cypress/webpack-dev-server';
       ^

SyntaxError: Unexpected token {
    at Module._compile (internal/modules/cjs/loader.js:723:23)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:789:10)
    at Module.load (internal/modules/cjs/loader.js:653:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:593:12)
    at Function.Module._load (internal/modules/cjs/loader.js:585:3)
    at Module.require (internal/modules/cjs/loader.js:692:17)
    at require (internal/modules/cjs/helpers.js:25:18)
    at runPlugins (/home/mgarcia/.cache/Cypress/9.2.0/Cypress/resources/app/packages/server/lib/plugins/child/run_plugins.js:175:15)
    at Object.<anonymous> (/home/mgarcia/.cache/Cypress/9.2.0/Cypress/resources/app/packages/server/lib/plugins/child/index.js:8:25)
    at Module._compile (internal/modules/cjs/loader.js:778:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:789:10)
    at Module.load (internal/modules/cjs/loader.js:653:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:593:12)
    at Function.Module._load (internal/modules/cjs/loader.js:585:3)
    at Function.Module.runMain (internal/modules/cjs/loader.js:831:12)
    at startup (internal/bootstrap/node.js:283:19)

My plugins/index.js:

/// <reference types="cypress" />

/**
 * @type {Cypress.PluginConfig}
 */
import { startDevServer } from '@cypress/webpack-dev-server';

module.exports = (on, config) => {
  // Extracted from https://docs.cypress.io/guides/component-testing/introduction#Install
  if (config.testingType === 'component') {
    require('@cypress/react/plugins/react-scripts')(on, config)
  }

  // Extracted from https://npm.io/package/@cypress/webpack-dev-server
  on('dev-server:start', async (options) => startDevServer({ options }));

  return config
}

If I remove the import and run again:

The function exported by the plugins file threw an error.

We invoked the function exported by `/home/mgarcia/projects/v3bitex-implementation/cypress/plugins/index.js`, but it threw an error.

 /home/mgarcia/projects/v3bitex-implementation/node_modules/@cypress/react/plugins/utils/get-transpile-folders.js:5
  const rawFolders = config.addTranspiledFolders ?? []
                                                  ^

SyntaxError: Unexpected token ?
    at Module._compile (internal/modules/cjs/loader.js:723:23)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:789:10)
    at Module.load (internal/modules/cjs/loader.js:653:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:593:12)
    at Function.Module._load (internal/modules/cjs/loader.js:585:3)
    at Module.require (internal/modules/cjs/loader.js:692:17)
    at require (internal/modules/cjs/helpers.js:25:18)
    at Object.<anonymous> (/home/mgarcia/projects/v3bitex-implementation/node_modules/@cypress/react/plugins/react-scripts/findReactScriptsWebpackConfig.js:6:33)
    at Module._compile (internal/modules/cjs/loader.js:778:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:789:10)
    at Module.load (internal/modules/cjs/loader.js:653:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:593:12)
    at Function.Module._load (internal/modules/cjs/loader.js:585:3)
    at Module.require (internal/modules/cjs/loader.js:692:17)
    at require (internal/modules/cjs/helpers.js:25:18)
    at Object.<anonymous> (/home/mgarcia/projects/v3bitex-implementation/node_modules/@cypress/react/plugins/react-scripts/index.js:2:39)
    at Module._compile (internal/modules/cjs/loader.js:778:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:789:10)
    at Module.load (internal/modules/cjs/loader.js:653:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:593:12)
    at Function.Module._load (internal/modules/cjs/loader.js:585:3)
    at Module.require (internal/modules/cjs/loader.js:692:17)

Could this be related to the version of webpack? Is it impossible to use with webpack 3 ?

Desired behavior

Shouldn’t fail

Test code to reproduce

This happens to any project generated with react-scripts: 1.1.5

Cypress Version

9.2.0

Other

"@cypress/react": "^5.12.0",
    "@cypress/webpack-dev-server": "^1.8.0",
"webpack-dev-server": "^4.7.2"
"cypress": "^9.2.0"

[MuckT]

I was seeing the same thing, but bumping my node version to 14 fixed it.

Also note that once I did that I also had to pin @cypress/react to 5.10.3 to get my tests to appear and run. Hope this helps!

[RobinKnipe]

Same problem as @giranm - after much mucking about (and tantrums!), I’ve found the problem, the node version used by the Cypress github action is version 12! See their action.yml file here

I have found a workaround though, if you setup your github workflow first using something like actions/setup-node, then importantly explicitly specify the command config (rather than relying on the default run), the cypress action will using the desired Node.js version (@giranm something like the following should fix your problem):

    steps:
      - name: Checkout
        uses: actions/checkout@v2
      - name: Set-up Node
        uses: actions/setup-node@v1
        with:
          node-version: '16.13.0'

    - name: Cypress component tests
      uses: cypress-io/github-action@v2
      with:
        command: npx cypress run-ct

    - name: Cypress e2e tests
      uses: cypress-io/github-action@v2
      with:
        install: false
        build: npm run build
        start: npx -y serve -p 3001 build/
        wait-on: 'http://localhost:3001'
        command: npx cypress run