Cypress: Create react app fails to run travis tests because missing `NODE_ENV` or `BABEL_ENV` environment variables

[SferaDev]

Current behavior:

All tests fail after updating to 4.2.0

Desired behavior:

Tests should run as they did on 4.1.0

Error message

Oops...we found an error preparing this test file:
  /home/travis/build/$PROJECT/cypress/integration/$FILE.spec.js

The error was:

Error: [BABEL] /home/travis/build/$PROJECT/cypress/integration/$FILE.spec.js: Using `babel-preset-react-app` requires that you specify `NODE_ENV` or `BABEL_ENV` environment variables. Valid values are "development", "test", and "production". Instead, received: undefined. (While processing: "/home/travis/build/$PROJECT/node_modules/babel-preset-react-app/index.js") while parsing file: /home/travis/build/$PROJECT/cypress/integration/$FILE.spec.js

This occurred while Cypress was compiling and bundling your test code. This is usually caused by:

- A missing file or dependency
- A syntax error in the file or one of its dependencies

Fix the error in your code and re-run your tests.

Versions

Cypress 4.2.0
Browser: Chrome
Application: CRA
Environment: Travis and Ubuntu 18.04

Additional information

The issue resolves if pinning version to v4.1.0, but re-appears updating to latest (4.2.0).

Dependencies:

    "react": "16.13.0",
    "react-dom": "16.13.0",
    "react-scripts": "3.4.0",
    "@babel/core": "7.8.7",
    "@babel/preset-typescript": "7.8.3",
    "eslint-plugin-react": "7.19.0",
    "eslint-config-react-app": "5.2.0",
    "eslint-plugin-cypress": "2.10.3",

[jennifer-shehane]

I'm not seeing any difference in these env variables values between 4.1.0 and 4.2.0 during cypress run. They're undefined in both.

plugins/index.js

module.exports = (on, config) => {
  console.log('NODE_ENV:', process.env["NODE_ENV"])
  console.log('BABEL_ENV:', process.env["BABEL_ENV"])
}

spec.js

it('runs', () => {
  cy.exec("echo $NODE_ENV").its('stdout').should('be.empty')
  cy.exec("echo $BABEL_ENV").its('stdout').should('be.empty')
})

4.1.0

4.2.0

Can you ensure there were no other changes? No other dep updates or changes to your Travis setup? Clear out node_modules and reinstall?

Not able to recreate just running create-react-app with cypress. Can you provide your babel configuration from your plugins file, etc?

[SferaDev]

Can you ensure there were no other changes? No other dep updates or changes to your Travis setup?

We try to keep all versions up-to-date in a regular basis with pinned versions. Since the way to face the error is updating to 4.2.0 and going back to 4.1.0 solves it, I would say that a change in cypress is the root cause for it.

Clear out node_modules and reinstall?

It both happens locally and on travis (where node_modules are re-created on build) so I guess it shouldn't make a change.

Not able to recreate just running create-react-app with cypress. Can you provide your babel configuration from your plugins file, etc?

I found how to "solve" it in 4.2.0, still it does not explain why it did work fine on previous cypress versions and now it breaks. The difference is on babel.config.js and CYPRESS_E2E is an environment variable we set to determine if we are under a cypress run.

Fails:

module.exports = {
    "presets": ["@babel/typescript", "babel-preset-react-app"]
};

Passes:

module.exports = process.env.CYPRESS_E2E
    ? {}
    : {
          presets: ["@babel/typescript", "babel-preset-react-app"],
      };

[jennifer-shehane]

Is this issue still occurring?

[nickryall]

This issue occurs for me in 5.0, switching to 4.10 fixes it.

[jennifer-shehane]

@nickryall Can you provide a reproducible example?

[claytonfbell]

Hi @jennifer-shehane , I get this error also with Cypress v5 but works fine in v4.

Error: Webpack Compilation Error
./cypress/integration/examples/actions.spec.js
Module build failed (from /Users/claytonbell/Library/Caches/Cypress/5.1.0/Cypress.app/Contents/Resources/app/packages/server/node_modules/babel-loader/lib/index.js):
Error: [BABEL] /Users/claytonbell/github-repos/cypress-issue/cypress/integration/examples/actions.spec.js: Using `babel-preset-react-app` requires that you specify `NODE_ENV` or `BABEL_ENV` environment variables. Valid values are "development", "test", and "production". Instead, received: undefined. (While processing: "/Users/claytonbell/github-repos/cypress-issue/node_modules/babel-preset-react-app/index.js")

I determined it occurs if a .babelrc file is present in the project root.

I've pushed a reproducible example here https://github.com/claytonfbell/cypress-issue.

git clone https://github.com/claytonfbell/cypress-issue
cd cypress-issue
yarn install
npm run cypress

[ttamminen]

I have this issue also when changing the version from 4.x to 5.3.0

{
  "defaultCommandTimeout": 120000,
  "requestTimeout": 120000,
  "responseTimeout": 120000,
  "env": {
    "BABEL_ENV": "test",
    "XMSTAGE": "dev"
  },
  "$schema": "https://on.cypress.io/cypress.schema.json"
}

I also have cypress.env.json defined with project-specific env variables.

[rupeshpadhye]

I also am facing similar issue, I am using cypress 5.3.0 version

[matinfo]

if you export NODE_ENV=development it in your shell it work for me with 5.3.0 (an a MackBook machine, but not on a Window machine)

[GuySerfaty]

Same here, get it with 5.3.0, when I remove the babel configuration from package.json the error disappear

  "babel": {
    "plugins": [
      "transform-decorators-legacy"
    ],
    "presets": [
      "react-app"
    ]
  },

Solved after I upgrade my babel core

[matinfo]

This issue occurred for my colleague on Window machine, but not on my MacBook (OSX), was fixed also after I removed:

"babel": {
    "presets": [
      "react-app"
    ]
},  

of a create-react-app project with react-script 3.4.3 and cypress 5.3.0

[ml242]

Hi @jennifer-shehane , I get this error also with Cypress v5 but works fine in v4.

Error: Webpack Compilation Error
./cypress/integration/examples/actions.spec.js
Module build failed (from /Users/claytonbell/Library/Caches/Cypress/5.1.0/Cypress.app/Contents/Resources/app/packages/server/node_modules/babel-loader/lib/index.js):
Error: [BABEL] /Users/claytonbell/github-repos/cypress-issue/cypress/integration/examples/actions.spec.js: Using `babel-preset-react-app` requires that you specify `NODE_ENV` or `BABEL_ENV` environment variables. Valid values are "development", "test", and "production". Instead, received: undefined. (While processing: "/Users/claytonbell/github-repos/cypress-issue/node_modules/babel-preset-react-app/index.js")

I determined it occurs if a .babelrc file is present in the project root.

I've pushed a reproducible example here https://github.com/claytonfbell/cypress-issue.

git clone https://github.com/claytonfbell/cypress-issue
cd cypress-issue
yarn install
npm run cypress

I am just starting out with the tutorial and it is failing in the same place. We also have a .babelrc in the project. Updating babel-core didn't help the situation. I agree that having addition .env files would be suboptimal and was able to use cross-env to get the tests running.

"cypress-test": "cross-env NODE_ENV=test cypress open",

[Unicornelia]

Hi @jennifer-shehane , I get this error also with Cypress v5 but works fine in v4.

Error: Webpack Compilation Error
./cypress/integration/examples/actions.spec.js
Module build failed (from /Users/claytonbell/Library/Caches/Cypress/5.1.0/Cypress.app/Contents/Resources/app/packages/server/node_modules/babel-loader/lib/index.js):
Error: [BABEL] /Users/claytonbell/github-repos/cypress-issue/cypress/integration/examples/actions.spec.js: Using `babel-preset-react-app` requires that you specify `NODE_ENV` or `BABEL_ENV` environment variables. Valid values are "development", "test", and "production". Instead, received: undefined. (While processing: "/Users/claytonbell/github-repos/cypress-issue/node_modules/babel-preset-react-app/index.js")

I determined it occurs if a .babelrc file is present in the project root.
I've pushed a reproducible example here https://github.com/claytonfbell/cypress-issue.

git clone https://github.com/claytonfbell/cypress-issue
cd cypress-issue
yarn install
npm run cypress

I am just starting out with the tutorial and it is failing in the same place. We also have a .babelrc in the project. Updating babel-core didn't help the situation. I agree that having addition .env files would be suboptimal and was able to use cross-env to get the tests running.

"cypress-test": "cross-env NODE_ENV=test cypress open",

This worked, thank you!!!

[iam-frankqiu]

"cypress-test": "cross-env NODE_ENV=test cypress open",

Hi @jennifer-shehane , I get this error also with Cypress v5 but works fine in v4.

Error: Webpack Compilation Error
./cypress/integration/examples/actions.spec.js
Module build failed (from /Users/claytonbell/Library/Caches/Cypress/5.1.0/Cypress.app/Contents/Resources/app/packages/server/node_modules/babel-loader/lib/index.js):
Error: [BABEL] /Users/claytonbell/github-repos/cypress-issue/cypress/integration/examples/actions.spec.js: Using `babel-preset-react-app` requires that you specify `NODE_ENV` or `BABEL_ENV` environment variables. Valid values are "development", "test", and "production". Instead, received: undefined. (While processing: "/Users/claytonbell/github-repos/cypress-issue/node_modules/babel-preset-react-app/index.js")

I determined it occurs if a .babelrc file is present in the project root.
I've pushed a reproducible example here https://github.com/claytonfbell/cypress-issue.

git clone https://github.com/claytonfbell/cypress-issue
cd cypress-issue
yarn install
npm run cypress

I am just starting out with the tutorial and it is failing in the same place. We also have a .babelrc in the project. Updating babel-core didn't help the situation. I agree that having addition .env files would be suboptimal and was able to use cross-env to get the tests running.

"cypress-test": "cross-env NODE_ENV=test cypress open",

@jennifer-shehane . I get the same error with Cypress v5 but works fine in v3.5.
I use env-cmd instead of cross-env.

"cypress-test": "env-cmd test cypress open",

But it doesn't work for me.

[lpas]

@iam-frankqiu i just reset babel in my cypress dir something like this should work

.babelrc

{
    "presets": [
      "@babel/preset-env"
    ]
  } 

[iam-frankqiu]

.babelrc

Thanks for your advice. But My project was generated by Create-React-App. I reset the presets. I must add @babel/plugin-transform-react-jsx (https://git.io/vb4yd) to the 'plugins' section of My Babel config to enable transformation. It becomes more complex.

[lpas]

.babelrc

Thanks for your advice. But My project was generated by Create-React-App. I reset the presets. I must add @babel/plugin-transform-react-jsx (https://git.io/vb4yd) to the 'plugins' section of My Babel config to enable transformation. It becomes more complex.

sure mine is also a react project but i have all my cypress scripts in a crypress dir so i have

.babelrc (thats with the react config and all the other thing for your real app
|- src (here is my app code)
|- cypress (here are is all my cypress code)
  |- .babelrc (here in the cypress dir i have a second .babelrc with that basic config) 

so i have two files

in the root it looks just like a normal react config file

{
  "presets": ["react-app"],
  "plugins": [...]
}

[iam-frankqiu]

.babelrc

Thanks for your advice. But My project was generated by Create-React-App. I reset the presets. I must add @babel/plugin-transform-react-jsx (https://git.io/vb4yd) to the 'plugins' section of My Babel config to enable transformation. It becomes more complex.

sure mine is also a react project but i have all my cypress scripts in a crypress dir so i have

.babelrc (thats with the react config and all the other thing for your real app
|- src (here is my app code)
|- cypress (here are is all my cypress code)
  |- .babelrc (here in the cypress dir i have a second .babelrc with that basic config) 

so i have two files

in the root it looks just like a normal react config file

{
  "presets": ["react-app"],
  "plugins": [...]
}

I pretty thank you. That's really worked for me.