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 #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

[imteekay]

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" ] },

[luanapmildner]

Hey Guys, I have this problem and I've tried to add {cypress/.babelrc} inside the cypress.json file. Should I write something else???
My error: Unexpected token c in JSON at position 0

[laurogripa]

Hey Guys, I have this problem and I've tried to add {cypress/.babelrc} inside the cypress.json file. Should I write something else???
My error: Unexpected token c in JSON at position 0

Hey! You should add the file to cypress directory, not inside cypress.json. The file is cypress/.babelrc and the content is {}

[luanapmildner]

Thankss laurogripa!

Hey Guys, I have this problem and I've tried to add {cypress/.babelrc} inside the cypress.json file. Should I write something else???
My error: Unexpected token c in JSON at position 0

Hey! You should add the file to cypress directory, not inside cypress.json. The file is cypress/.babelrc and the content is {}

Thank you!!

[JCHappytime]

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

{}

Thanks for your sharing, it works for me.

"cypress": "^6.6.0"

[inthegarage]

I have the same issue and I can't get this working right now. I've installed the dependencies mentioned on this ticket and also the .bashrc file, but no joy. I will downgrade to the 6.6.0 version and see if that works for me.

./cypress/integration/sample_spec.js
Module build failed (from /home/xxx/.cache/Cypress/7.2.0/Cypress/resources/app/packages/server/node_modules/babel-loader/lib/index.js):

# This file is used by the build system to adjust CSS and JS output to support the specified browsers below.
^

This is just using the hello world example. Some further logs:

Error: Webpack Compilation Error
./cypress/integration/sample_spec.js
Module build failed (from /home/xxx/.cache/Cypress/7.2.0/Cypress/resources/app/packages/server/node_modules/babel-loader/lib/index.js):
/home/<path to>t/browserslist:1
# This file is used by the build system to adjust CSS and JS output to support the specified browsers below.
^

[inthegarage]

Downgrading to 6.9.1 did not work will fix to 6.6.0 and see what happens.

UPDATE: 6.6.0 fails with the same error. Can I get more information to the authors?? What more items can I try, any further logging you need, this seems to be very much of the "one line error" variety. More help needed.

UPDATE: browserlist => .browserlistsrc worked for me. Perhaps a empty one could be created if cypress doesn't find the file.

[JJ]

Adding .babelrc didn't work for me. But my problem was with a .css file

[tballast]

I'm having the same issue. I used the empty .babelrc file for a while and it worked, however somehow now it has reverted to giving me errors.

Initially it was all babel errors. (ie. Can't find babel-plugin-transform-class-properties, etc.) It went through most of my babel plugins and complained about them until I either removed them, or installed the dependency within the repo. Afterwards however, it then started to complain about failing to parse specific modules. In my particular case it's ag-theme-balham.css which is a stylesheet used for AG Grid.

Cypress Version: 7.4.0
.babelrc

{
  "presets": ["@babel/preset-env", "@babel/preset-react"],
  "plugins": [
    [
      "module-resolver",
      {
        "root": ["./src"]
      }
    ]
  ],
  "sourceMaps": true
}

And the current error that I'm getting:

Error: Webpack Compilation Error
./node_modules/ag-grid-community/dist/styles/ag-theme-balham.css 1:0
Module parse failed: Unexpected token (1:0)
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
> .ag-theme-balham {
|   -webkit-font-smoothing: antialiased;
|   color: #000;
...

I'm also using create react app and would really prefer not to eject if possible. The empty babelrc file worked for so long, I don't understand what I've done in the meantime that changed that.

Edit: I have found the source of it.

In my tests I imported 3 const strings to test with. These were from source files and were are used as URL params, so I thought importing them was a good idea.

Turns out that by importing the strings, it required the whole file, which somehow led to it not compiling. by removing the imports, it compiles and runs the tests. I don't know if this is an actual solution, however it solved the issue for me.

[luichooy]

I have the same issue width Cypress v7.3.0. And it has no effect that adding cypress/.babelrc with content {}.

I have a .babelrc file in project root dir with content as below:

{
  "plugins": [
    "transform-vue-jsx",
    "transform-decorators-legacy",
    "add-module-exports",
    "transform-object-assign",
    [
      "transform-object-rest-spread",
      {
        "useBuiltIns": true
      }
    ]
  ],
  "presets": ["env", "es2015", "stage-2"]
}

The error message is:

[cypress-bot]

The code for this is done in cypress-io/cypress#16980, but has yet to be released.
We'll update this issue and reference the changelog when it's released.

[cypress-bot]

Released in 7.6.0.

This comment thread has been locked. If you are still experiencing this issue after upgrading to
Cypress v7.6.0, please open a new issue.