Cypress: Webpack Compilation Error: Cannot find module - Babel dependency when `.babelrc` defines plugins

[tyagow]

Current behavior:

The test doesn't start and an error message is displayed

Desired behavior:

Test work as they were in version 4.12

Test code to reproduce

?

Versions

Cypress 5.0
Ubuntu 20.04

[jennifer-shehane]

Can you provide any of the code you have included for preprocessing? The plugins/index.js, package.json, support files, etc? Thanks!

[Hypercubed]

I've had the same issue. I've not been able to repo on a freash install... it happens when I upgrade from 4.3 to 5.0 within an existing angular project that uses webpack (4.43.0) and typescript (3.5.3). I suspect there is some conflict between my projects webpack/typescript install or config and what cypress is using.

I'm using the following cypress plugins:

    "cypress-file-upload": "^3.4.0",
    "cypress-plugin-signalr": "^1.3.0",
    "cypress-terminal-report": "^1.2.1",
    "cypress-wait-until": "^1.6.1",

I had suspected it was related to https://github.com/cypress-io/cypress/issues/7503... which has been closed as fixed.

[Hypercubed]

@tyagow Do you happen to have a .babelrc in your project root. That seams to be the issue for me.

[Hypercubed]

@jennifer-shehane Adding a .babelrc file to the root folder causes the error above. For example:

{
  "presets": [
  ],
  "plugins": [
    "transform-runtime"
  ],
  "comments": true,
  "sourceMaps": true
}

[jennifer-shehane]

I'm able to recreate this with the presence of the .babelrc file at the root of my project with the reference to the transform-runtime plugin. Didn't seem to matter what babel plugins I actually had installed - I never got it to a running state.

.babelrc

{
  "plugins": [
    "transform-runtime"
  ]
}

Run cypress open and click on a spec file or cypress run.

4.12.1

5.0.0

[ztsmith]

adding an empty .babelrc file to the cypress directory allowed me to work around this issue.
i.e. cypress/.babelrc

{}

[tyagow]

adding an empty .babelrc file to the cypress directory allowed me to work around this issue.
i.e. cypress/.babelrc

{}

Thank you for sharing, I will give 5.0 another shot

[leandrotk]

I have the same error while running with .babelrc. This is what I'm using in my current project:

{
  "plugins": ["styled-components", "transform-decorators"],
  "presets": [
    [
      "env",
      {
        "modules": false,
        "targets": {
          "browsers": ["last 2 versions", "> 0.5% in BR", "iOS >= 9.3"]
        },
        "useBuiltIns": "entry"
      }
    ],
    "react",
    "stage-0"
  ],
  "env": {
    "development": {
      "plugins": ["babel-plugin-styled-components"]
    },
    "production": {
      "plugins": [
        "transform-react-remove-prop-types",
        "transform-react-constant-elements",
        "transform-react-inline-elements",
        "syntax-dynamic-import"
      ]
    },
    "test": {
      "presets": ["env", "react"],
      "plugins": [
        "transform-es2015-modules-commonjs",
        "transform-class-properties",
        "dynamic-import-node",
        "syntax-dynamic-import"
      ]
    }
  }
}

Adding an empty .babelrc inside the /cypress folder didn't work for me.

Dependencies:

• babel-core: 6.26.0
• babel-cli: 6.26.0
• cypress: 5.2
• webpack: 3.10.0

Any idea on how to work around this issue?

[arushirawal20]

adding an empty .babelrc file to the cypress directory allowed me to work around this issue.
i.e. cypress/.babelrc

{}

I tried the same but its still not working for me. Any other option ?

[mrvudo]

adding an empty .babelrc file to the cypress directory allowed me to work around this issue.
i.e. cypress/.babelrc

{}

I managed to get Cypress working by adding .babelrc in the Cypress directory and using this package:

https://www.npmjs.com/package/@cypress/webpack-preprocessor#use-babelrc

[portothree]

Changing from browserlist to .browserlistrc fixed a similar error with the babel-loader for me

[roopat]

Adding an empty .babelrc in cypress/.babelrc didnt help me...can some one help me out with a working solution for this ?
Getting the below error

Error: Webpack Compilation Error
./cypress/integration/test.feature 1:17
Module parse failed: Unexpected token (1:17)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders

[chloe0592]

@jennifer-shehane We are experiencing the same issue with the latest Cypress version and it's currently a blocker for our testing. Please provide a workaround or some additional info on how can we run our tests.

[Majd-iya]

adding an empty .babelrc file to the cypress directory allowed me to work around this issue.
i.e. cypress/.babelrc

{}

Worked for me either , thanks

"cypress": "^5.5.0",

[chloe0592]

I tried with .babelrc , and no luck.. I still get the same error.

[Majd-iya]

I tried with .babelrc , and no luck.. I still get the same error.

Share your dependencies please!

[chloe0592]

I found this for babel:
"babel": { "plugins": [ "@babel/plugin-proposal-class-properties", "@babel/plugin-syntax-dynamic-import" ], "presets": [ "@babel/preset-env", "@babel/preset-react" ] },

[Majd-iya]

I found this for babel:
"babel": { "plugins": [ "@babel/plugin-proposal-class-properties", "@babel/plugin-syntax-dynamic-import" ], "presets": [ "@babel/preset-env", "@babel/preset-react" ] },

what is your cypress dependency version ?

[chloe0592]

I've found the solution - I manually installed babel dependencies and updated again Cypress. Now the workaround with .babelrc works. Thanks @Majd-iya.

[Majd-iya]

I've found the solution - I manually installed babel dependencies and updated again Cypress. Now the workaround with .babelrc works. Thanks @Majd-iya.

Happy for you :) enjoy coding :) @chloe0592