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

SferaDev · 2020-03-17T15:51:35Z

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

The text was updated successfully, but these errors were encountered:

jennifer-shehane · 2020-03-18T05:34:58Z

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 · 2020-03-18T08:54:53Z

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 · 2020-07-14T10:09:26Z

Is this issue still occurring?

nickryall · 2020-08-20T09:04:28Z

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

jennifer-shehane · 2020-08-21T07:06:11Z

@nickryall Can you provide a reproducible example?

claytonfbell · 2020-09-08T20:35:13Z

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 · 2020-09-29T12:07:55Z

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 · 2020-10-06T08:04:11Z

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

matinfo · 2020-10-09T11:34:15Z

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 · 2020-10-13T16:52:01Z

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 · 2020-10-13T17:08:44Z

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 · 2020-10-15T15:03:16Z

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 · 2020-11-05T20:54:50Z

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 · 2020-11-24T08:19:43Z

"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 · 2020-11-24T08:28:46Z

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

.babelrc

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

iam-frankqiu · 2020-11-24T08:38:49Z

.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 · 2020-11-24T09:07:47Z

.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 · 2020-11-24T09:35:48Z

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

ttamminen · 2020-12-03T18:46:12Z

I run Cypress Windows executable as I didn't get Cypress working on WSL.

In order to provide the NODE_ENV setting, I use a .cmd file that sets the env variable

cd C:\CypressWin\
set NODE_ENV=test
Cypress.exe

I hope this helps someone with the same setup.

jennifer-shehane · 2021-01-12T00:32:37Z

This issue occurs in 5.0.0+ with the code below. I would suspect this was introduced in this PR: #7982

package.json

{
  "dependencies": {
    "cypress": "6.2.1",
    "react-scripts": "4.0.1"
  }
}

.babelrc

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

Run npm install
Run cypress open and select any example spec or run cypress run

Error: Webpack Compilation Error
./cypress/integration/examples/connectors.spec.js
Module build failed (from /Users/jennifer/Library/Caches/Cypress/6.2.1/Cypress.app/Contents/Resources/app/packages/server/node_modules/babel-loader/lib/index.js):
Error: [BABEL] /Users/jennifer/Dev/cypress-issue-master/cypress/integration/examples/connectors.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/jennifer/Dev/cypress-issue-master/node_modules/babel-preset-react-app/index.js")

thediveo · 2021-02-13T15:52:46Z

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

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

Unfortunately, it doesn't work for me; trying "babel-preset-react-app" also doesn't work.

AnnieTaylorCHEN · 2021-02-15T10:29:29Z

I'm using the Cypress 6.4 and set my env file to

 "test": {
    "REACT_APP_STAGE": "test",
    "REACT_APP_MEDIA_BASE_PATH": "https://abc.com",
    "REACT_APP_SHOULD_MOCK_API": "true",
    "REACT_APP_OIDC_PROVIDER_URL": "http://localhost:4000",
    "NODE_ENV": "test"
  },

then I ran env-cmd -e test npx cypress open

And I still got the above error.... Any way to fix it?

AnnieTaylorCHEN · 2021-02-15T12:40:25Z

I'm using the Cypress 6.4 and set my env file to
 "test": {
    "REACT_APP_STAGE": "test",
    "REACT_APP_MEDIA_BASE_PATH": "https://abc.com",
    "REACT_APP_SHOULD_MOCK_API": "true",
    "REACT_APP_OIDC_PROVIDER_URL": "http://localhost:4000",
    "NODE_ENV": "test"
  },
then I ran env-cmd -e test npx cypress open

And I still got the above error.... Any way to fix it?

Hello, I fixed the issues and here are the steps for references:

update babel-core to the latest
install babel-preset-env
inside cypress folder, I have a babelrc file and wrote :

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

Rest of the env settings are like I did above.

It solved the problem and now I see it running finally!

AnnieTaylorCHEN · 2021-02-23T11:14:30Z

After some updates and merging other branches, I ran into this error again

Error: Webpack Compilation Error
./src/resources/translations.js
Module build failed (from /Users/abc/Library/Caches/Cypress/6.5.0/Cypress.app/Contents/Resources/app/packages/server/node_modules/babel-loader/lib/index.js):
Error: [BABEL] /Users/abc/Documents/Abc/app/src/resources/translations.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/abc/Documents/Abc/app/node_modules/babel-preset-react-app/index.js")
 @ ./cypress/e2e/test-spec.js 9:43-86

The solution above ☝️ that solved the previous similar error still remained. So I wonder where the problem is this time. Anyone has an idea?

UPDATE: I restarted the repo and tests several times and then it suddenly started working. I still had no idea what caused the above issue though.

jennifer-shehane · 2021-07-06T21:40:23Z

Good news! This was fixed in 7.6.0.

Closing as resolved.

If you're experiencing a bug similar to this in Cypress, please open a new issue with a fully reproducible example that we can run. There may be a specific edge case with the issue that we need more detail to fix.

jennifer-shehane added the stage: needs information Not enough info to reproduce the issue label Mar 18, 2020

jennifer-shehane mentioned this issue Jan 12, 2021

Not able to run my tests on cypress on Windows. #14482

Closed

jennifer-shehane added v5.0.0 🐛 Issue present since 5.0.0 type: regression A bug that didn't appear until a specific Cy version release labels Jan 12, 2021

cypress-bot bot added stage: ready for work The issue is reproducible and in scope and removed stage: needs information Not enough info to reproduce the issue labels Jan 12, 2021

jennifer-shehane changed the title ~~Create react app fails to run travis tests because missing NODE_ENV or BABEL_ENV environment variables~~ react-app presets in babel configuration throw error because missing NODE_ENV or BABEL_ENV environment variables Jan 12, 2021

jennifer-shehane added the blocking label Jan 12, 2021

brdalsnes mentioned this issue Feb 1, 2021

Add search page cypress tests NDLANO/ndla-frontend#621

Merged

mccataldo mentioned this issue Feb 17, 2021

Error: Unknown option: .mode. Check out ... #15133

Closed

cypress-bot bot added stage: backlog and removed stage: ready for work The issue is reproducible and in scope labels May 18, 2021

jennifer-shehane closed this as completed Jul 6, 2021

jennifer-shehane removed the stage: backlog label Jul 6, 2021

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

SferaDev commented Mar 17, 2020 •

edited

jennifer-shehane commented Mar 18, 2020

SferaDev commented Mar 18, 2020

jennifer-shehane commented Jul 14, 2020

nickryall commented Aug 20, 2020

jennifer-shehane commented Aug 21, 2020

claytonfbell commented Sep 8, 2020

ttamminen commented Sep 29, 2020

rupeshpadhye commented Oct 6, 2020

matinfo commented Oct 9, 2020 •

edited

GuySerfaty commented Oct 13, 2020

matinfo commented Oct 13, 2020

ml242 commented Oct 15, 2020 •

edited

Unicornelia commented Nov 5, 2020

iam-frankqiu commented Nov 24, 2020

lpas commented Nov 24, 2020

iam-frankqiu commented Nov 24, 2020

lpas commented Nov 24, 2020 •

edited

iam-frankqiu commented Nov 24, 2020

ttamminen commented Dec 3, 2020

jennifer-shehane commented Jan 12, 2021

thediveo commented Feb 13, 2021

AnnieTaylorCHEN commented Feb 15, 2021

AnnieTaylorCHEN commented Feb 15, 2021 •

edited

AnnieTaylorCHEN commented Feb 23, 2021 •

edited

jennifer-shehane commented Jul 6, 2021

react-app presets in babel configuration throw error because missing NODE_ENV or BABEL_ENV environment variables #6755

react-app presets in babel configuration throw error because missing NODE_ENV or BABEL_ENV environment variables #6755

Comments

SferaDev commented Mar 17, 2020 • edited

Current behavior:

Desired behavior:

Error message

Versions

Additional information

jennifer-shehane commented Mar 18, 2020

4.1.0

4.2.0

SferaDev commented Mar 18, 2020

jennifer-shehane commented Jul 14, 2020

nickryall commented Aug 20, 2020

jennifer-shehane commented Aug 21, 2020

claytonfbell commented Sep 8, 2020

ttamminen commented Sep 29, 2020

rupeshpadhye commented Oct 6, 2020

matinfo commented Oct 9, 2020 • edited

GuySerfaty commented Oct 13, 2020

matinfo commented Oct 13, 2020

ml242 commented Oct 15, 2020 • edited

Unicornelia commented Nov 5, 2020

iam-frankqiu commented Nov 24, 2020

lpas commented Nov 24, 2020

iam-frankqiu commented Nov 24, 2020

lpas commented Nov 24, 2020 • edited

iam-frankqiu commented Nov 24, 2020

ttamminen commented Dec 3, 2020

jennifer-shehane commented Jan 12, 2021

thediveo commented Feb 13, 2021

AnnieTaylorCHEN commented Feb 15, 2021

AnnieTaylorCHEN commented Feb 15, 2021 • edited

AnnieTaylorCHEN commented Feb 23, 2021 • edited

jennifer-shehane commented Jul 6, 2021

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

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

SferaDev commented Mar 17, 2020 •

edited

matinfo commented Oct 9, 2020 •

edited

ml242 commented Oct 15, 2020 •

edited

lpas commented Nov 24, 2020 •

edited

AnnieTaylorCHEN commented Feb 15, 2021 •

edited

AnnieTaylorCHEN commented Feb 23, 2021 •

edited