cypress: react-app presets in babel configuration throw error because missing `NODE_ENV` or `BABEL_ENV` environment variables

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

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

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

.babelrc

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

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

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

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)

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

.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": [...]
}

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

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.

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