Create-react-app: Unknown option: base.configFile error when running tests

[davidlukerice]

Note from Maintainers

This is reportedly an issue with npm, as you will find below.

Please install Yarn as it's reportedly correctly hoisting packages, preventing this error.

If you'd like to continue using npm, run npm ls babel-core and remove offending packages that are relying on 6.x. Additionally, file a bug report with npm.

---

Is this a bug report?

Yes

Did you try recovering your dependencies?

Yes
npm --version
6.4.1

Which terms did you search for in User Guide?

jest, test, babel, Unknown option: base.configFile

Environment

Environment:
OS: macOS 10.14
Node: 8.10.0
Yarn: 1.6.0
npm: 6.4.1
Watchman: 4.9.0
Xcode: Xcode 10.0 Build version 10A255
Android Studio: Not Found

Packages: (wanted => installed)
react: ^16.4.2 => 16.5.2
react-dom: ^16.4.2 => 16.5.2
react-scripts: 2.0.3 => 2.0.3

Steps to Reproduce

1. Migrate from create-react-app v1.1.5 following the guide at https://github.com/facebook/create-react-app/releases
2. Run the dev server and verify the app works correctly (npm start)
3. Run all tests with npm test followed by a

Expected Behavior

Tests should run and complete

Actual Behavior

I get the following error on every test

Test suite failed to run

    ReferenceError: [BABEL] {redacted}/src/setupTests.js: Unknown option: base.configFile. Check out http://babeljs.io/docs/usage/options/ for more information about options.

    A common cause of this error is the presence of a configuration options object without the corresponding preset name. Example:

    Invalid:
      `{ presets: [{option: value}] }`
    Valid:
      `{ presets: [['presetName', {option: value}]] }`

    For more detailed information on preset configuration, please see https://babeljs.io/docs/en/plugins#pluginpresets-options.

      at Logger.error (node_modules/babel-core/lib/transformation/file/logger.js:41:11)
      at OptionManager.mergeOptions (node_modules/babel-core/lib/transformation/file/options/option-manager.js:226:20)
      at OptionManager.init (node_modules/babel-core/lib/transformation/file/options/option-manager.js:368:12)
      at File.initOptions (node_modules/babel-core/lib/transformation/file/index.js:212:65)
      at new File (node_modules/babel-core/lib/transformation/file/index.js:135:24)
      at Pipeline.transform (node_modules/babel-core/lib/transformation/pipeline.js:46:16)

my setupTests.js file contains the following

import 'react-testing-library/cleanup-after-each';
import 'jest-dom/extend-expect';

Adding them to a fresh app doesn't cause an issue.

Reproducible Demo

This is an internal project, but I'll work to see if I can narrow it down at all and reproduce in a fresh install. So far I haven't figured it out.
I'm putting this issue up in the meantime to see if anyone else runs into it while migrating to v2. It also popped up at https://github.com/facebook/create-react-app/issues/5103#issuecomment-425722592, but clearing the node modules / lock / &c didn't help, nor did upgrading to node v10.

[JustinTRoss]

I had the same issue, and I'm using the same setupTests.js file, though removing this file has no effect on the outcome.

I was able to get rid of this error by deleting package-lock and reinstalling.

[Timer]

I'm not able to repo this. Can you provide a small isolated example please?

[Timer]

Please post your package.json.

[JustinTRoss]

I do have jest-dom installed. Is there a reason why that dependency should be avoided when using CRA?

// package.json

"dependencies": {
    "@material-ui/core": "^3.1.0",
    "@material-ui/icons": "^3.0.1",
    "apollo-boost": "^0.1.16",
    "emotion": "^9.2.10",
    "graphql": "^14.0.2",
    "graphql-anywhere": "^4.1.19",
    "graphql-tag": "^2.10.0",
    "idx": "^2.4.0",
    "lodash": "^4.17.11",
    "raven-js": "^3.27.0",
    "react": "^16.5.2",
    "react-apollo": "^2.1.11",
    "react-dom": "^16.5.2",
    "react-emotion": "^9.2.10",
    "react-redux": "^5.0.7",
    "react-router": "^4.3.1",
    "react-router-dom": "^4.3.1",
    "react-scripts": "^2.0.3",
    "redux": "^4.0.0",
    "reselect": "^3.0.1"
  },
  "devDependencies": {
    "eslint-config-airbnb": "^17.1.0",
    "eslint-config-airbnb-base": "^13.1.0",
    "eslint-config-prettier": "^3.1.0",
    "eslint-plugin-flowtype": "^2.50.3",
    "eslint-plugin-import": "^2.14.0",
    "eslint-plugin-jsx-a11y": "^6.1.1",
    "eslint-plugin-prettier": "^3.0.0",
    "eslint-plugin-react": "^7.11.1",
    "faker": "^4.1.0",
    "jest": "^23.6.0",
    "jest-dom": "^2.0.0",
    "lint-staged": "^7.3.0",
    "prettier": "^1.14.3",
    "react-testing-library": "^5.1.0",
    "rosie": "^2.0.1"
  }

[jambyung]

I was also able to fix this issue by deleting package-lock.json and node_modules folder and running npm install again.

[gaearon]

Sounds like an npm issue then. Use the workaround above if you bump into this.

[davidlukerice]

I was repeatedly having this problem yesterday, even with the above workaround. I added the dependencies one by one back today and was able to add them back all in without incident, so who knows what npm was having trouble with.

[gustavobini]

I am having the same issue. Cleaning node_modules and installing again did not fix it.

"dependencies": {
    "react": "^16.4.2",
    "react-dom": "^16.4.2",
    "applicationinsights-js": "^1.0.19",
    "axios": "^0.18.0",
    "history": "^4.7.2",
    "mixpanel-browser": "^2.22.4",
    "prb-components": "^0.0.131",
    "qs": "^6.5.2",
    "react-lazyload": "^2.3.0",
    "react-loadable": "^5.5.0",
    "react-mobile-picker": "^0.1.12",
    "react-modal": "^3.4.4",
    "react-redux": "^5.0.7",
    "react-scripts": "2.0.3",
    "react-scroll": "^1.7.9",
    "redux": "^4.0.0",
    "redux-thunk": "^2.3.0",
    "string-to-arraybuffer": "^1.0.0",
    "styled-components": "^3.4.5",
    "styled-react-modal": "^0.2.1",
    "universal-router": "^6.0.0",
    "validator": "^10.1.0",
    "webfontloader": "^1.6.28"
  },
  "lint-staged": {
    "src/**/*.{js,jsx,json}": [
      "eslint --fix",
      "git add"
    ],
    "src/**/*.{scss,css}": [
      "stylelint --config=.stylelintrc --fix",
      "git add"
    ]
  },
  "jest": {},
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "build:development": "env-cmd .env.development npm run build",
    "build:staging": "env-cmd .env.staging npm run build",
    "build:production": "env-cmd .env.production npm run build",
    "postbuild": "node iisConfig/iisConfig.js",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "precommit": "lint-staged && jest",
    "eslint-all": "./node_modules/.bin/eslint --fix --ext=js --ext=jsx ./src/",
    "serve": "./node_modules/.bin/serve -s --ssl ./build"
  },
  "devDependencies": {
    "classnames": "^2.2.5",
    "cross-env": "^5.2.0",
    "env-cmd": "^8.0.2",
    "enzyme": "^3.4.4",
    "enzyme-adapter-react-16": "^1.2.0",
    "eslint-config-airbnb": "^17.1.0",
    "eslint-config-prettier": "^3.0.1",
    "eslint-plugin-prettier": "^2.6.2",
    "husky": "^0.14.3",
    "lint-staged": "^7.0.4",
    "npm-run-all": "^4.1.2",
    "prettier": "^1.11.1",
    "prop-types": "^15.6.1",
    "serve": "^6.5.8",
    "stylelint": "^9.2.0",
    "stylelint-config-standard": "^18.2.0"
  }

[jambyung]

@gustavobini what about deleting both package-lock and node_modules and installing again?

[gustavobini]

@gustavobini what about deleting both package-lock and node_modules and installing again?

Sorry, I meant to say I did both those things.

[arnvol]

Nothing new to bring to the table, but I'm having the same issue.

[jambyung]

I’m just assuming that If you have installed any package that required babel related packages then it could cause some issues with the new Babel 7. In my case I suspect storybook which required babel-core and babel-runtime alongside it. I removed storybook and any babel related packages before removing package-lock and node_modules. I don’t know if this fixed the issue but worth looking at.

[arnvol]

npm view babel-core
[email protected] | MIT | deps: 19 | versions: 257
Should have been 7 after upgrading to create-react-app 2.0.3?
Perhaps some deps holding me back..

[Timer]

Can someone please install Yarn, use Yarn instead of npm, and see if that fixes the problem?

[Timer]

I believe the appropriate command would be npm ls babel-core.

npm view babel-core provides no information related directly to your package tree.

[arnvol]

Right :-D

+-- [email protected]
| -- [email protected] |-- [email protected]
| -- [email protected] |-- [email protected] deduped
+-- [email protected]
| -- [email protected] |-- [email protected]
| -- [email protected] deduped -- [email protected]
+-- [email protected]
-- [email protected] -- [email protected]
-- [email protected] -- [email protected] deduped

[Timer]

/cc @gaearon it looks like there's some complex trickery going on here, shouldn't our package tree check be catching the wrong babel-core version?

[jambyung]

@arnvol FYI, here is my version of package tree of working project.
I created a new project with CRA and check again it exactly matches following tree.

$ npm ls babel-core
└─┬ [email protected]
  ├── [email protected]
  └─┬ [email protected]
    └─┬ [email protected]
      ├─┬ [email protected]
      │ └─┬ [email protected]
      │   └─┬ [email protected]
      │     └── [email protected]
      └─┬ [email protected]
        └── [email protected]

[gustavobini]

npm ls babel-core accused other libraries of being dependent on earlier versions of babel-core.

yarn install worked. Definitely a problem with npm.

[AcStugoo]

I was having the base.configFile issue locally, however my pipeline was building, linting and testing as expected. I thought it must have been something with my set up. I tried to use yarn but it didnt' fix the issue. I also tried various versions of node (currently 8.11.1)

In the end this solution from @davidlukerice worked for me.:

I was repeatedly having this problem yesterday, even with the above workaround. I added the dependencies one by one back today and was able to add them back all in without incident, so who knows what npm was having trouble with.

As a last resort I cloned create-react-app into a different folder and ported my files over, rebuilding the dependencies as I went, trying to track down the bad module, but nothing broke. So when I had everything working in the new app I copied the package.json file over to my old project, deleted the package-lock file, node_modules folder there and ran npm i. Now everything works as it should 🤷‍♂️

[JeffBaumgardt]

Has anyone raised an issue with NPM at all? I would rather not switch package managers and my workflow just because of this issue.

I would expect to have found more issues regarding this elsewhere but this is the only one I've found. If it's a problem with Jest perhaps we should also open an issue with Jest?

[Timer]

@JeffBaumgardt I'm not sure I follow how this is a problem with Jest. The install works perfectly fine when using Yarn, and in some cases when you get npm to behave in certain ways. This issue definitely lies on npm's side.

[JeffBaumgardt]

I was just pointing out that the only offender of lower version of babel was on Jest's side, and

remove offending packages

is not an option in this case.

Currently my CI server cannot process any builds for a week now and everything I have tried has not worked. I'm not ready with just use yarn just yet, as I have a entire team that I would need to switch over plus a handful of servers.

I would open the issue with npm but as I don't understand the problem fully I don't think I would be a good candidate for such a ticket. I cannot reproduce reliably on my localhost but my the build servers are not having it at all.

[Timer]

Did you clear your build server's cache and prevent caching of node_modules? Caching node_modules isn't safe with npm.
Unfortunately there's nothing we can do to help, so please file an issue with npm or whoever you deem appropriate.

[JaccoGoris]

I have the same issue, even after nuking my node_modules and package.lock
which info can I help you guys with to help work this out?

[gaearon]

A minimal reproducing project.

[JaccoGoris]

Hi Dan, thanks for your quick reply, the problem is kinda that this is a "big" project I've been working on for a while that I just migrated. So I'm not sure what went wrong, making it hard to repro the specific case. I could share my package.json? copy my package to a clean CRA install and nuke it to see if the same issue persists with my specific dependencies right now
update: I've copied my dependencies to a new project and I have the same issue, I'll post a link to the github repo in a second

[JaccoGoris]

https://github.com/JaccoGoris/jest-cra-app here's a link to a small fresh project with the repro. hope this helps!

[j10sanders]

Also experiencing this issue (and have replicated on other machines).

└─┬ [email protected]
├── [email protected]
└─┬ [email protected]
└─┬ [email protected]
├─┬ [email protected]
│ └── [email protected] deduped
└─┬ [email protected]
└── [email protected] deduped

Hopefully someone can make some headway using Jacco's project?

[bugzpodder]

I cloned it, did npm install and npm test, didn't run into the issue. is there anything I should do?

[JaccoGoris]

Hmm that’s too bad. I’ll try the same steps. For me, these are the specific steps;

• use npx create-react-app my-app to make the project.
• copy the dependencies and devDependencies into the package.json
• npm install again.
• tests failed

[Timer]

@JaccoGoris if you use Yarn does the problem go away?

[JaccoGoris]

I’ll try that next yeah, though, as the person before here I would like to stay on npm obviously. I’ll also try cloning the projects from scratch like bugzpodder and see if that’s different somehow

[JaccoGoris]

@bugzpodder you probably did this but just to be sure; did you run all tests or just npm test. If I don’t run all, it doesn’t happen because it doesn’t run any tests of course. Just making sure that’s not it

[bugzpodder]

Actually, i was able to get a repo using your steps.

[bugzpodder]

Currently I have 4 clones running npm, two of them has the initial error, two of them works successfully =/
There are no differences in the output of npm ls and du -ah ./ between the working repos and the non-working repos.

Haven't been able to reproduce with yarn.

[jambyung]

Hi, @JaccoGoris I cloned your repo and got the same config error.
At first I thought it could be node issue so used 6.14.4, 7.10.1, but all failed.

I had the same issue with my repo and I found that the issue could be from babel-core still using 6.26.3 for some packages so I compared the dependency tree of both my project and yours.

$ npm ls babel-core

My project:

└─┬ [email protected]
  ├── [email protected]
  └─┬ [email protected]
    └─┬ [email protected]
      ├─┬ [email protected]
      │ └─┬ [email protected]
      │   └─┬ [email protected]
      │     └── [email protected]
      └─┬ [email protected]
        └── [email protected]

Your project:

├─┬ [email protected]
│ └─┬ [email protected]
│   └─┬ [email protected]
│     └─┬ [email protected]
│       └── [email protected]  deduped
└─┬ [email protected]
  ├── [email protected]
  └─┬ [email protected]
    └─┬ [email protected]
      └─┬ [email protected]
        └── [email protected]  deduped

I found that on my project, [email protected] is on the top level of the dependency tree, above any other subtrees that uses babel 6.26.3.

So I did following and npm test worked like a charm.

• uninstall jest-junit
• remove package-lock.json
• remove node_modules
• run npm install again

And the dependency tree of babel-core should look like following when you run npm ls babel-core:

└─┬ [email protected]
  ├── [email protected]
  └─┬ [email protected]
    └─┬ [email protected]
      ├─┬ [email protected]
      │ └─┬ [email protected]
      │   └─┬ [email protected]
      │     └── [email protected]
      └─┬ [email protected]
        └── [email protected]

Hope this helps.

Edit: seems like explicitly installing [email protected] also solves the issue.
And make sure you clear jest cache before re-trying. With jest cache every subsequent test will succeed

$ npm install -D [email protected]

npm ls babel-core will show following:

├── [email protected]
├─┬ [email protected]
│ └─┬ [email protected]
│   └─┬ [email protected]
│     └─┬ [email protected]
│       └── [email protected]
└─┬ [email protected]
  ├── [email protected]
  └─┬ [email protected]
    └─┬ [email protected]
      └─┬ [email protected]
        └── [email protected]

[erikrenberg]

Hmm that’s too bad. I’ll try the same steps. For me, these are the specific steps;

• use npx create-react-app my-app to make the project.
• copy the dependencies and devDependencies into the package.json
• npm install again.
• tests failed

I ran into this issue following those exact steps while porting our previuosly ejected app to cra2.

However I managed to get it work by running npm install on the empty cra2 app first, and THEN copying the dependencies etc into package json and doing npm install again. This apparently fixes the structure in node_modules and package-lock.json. Tests run fine.

It also works on other computers because presumably package-lock.json has preserved the right structure.

[JaccoGoris]

@jambyung following your step did work, so there must indeed be a tree issue somewhere. without jest-junit the tests ran fine, both in the repo project and my own actual project! so you are very likely on the right path here.

[jambyung]

@JaccoGoris Good to hear that! I also found that explicitly installing the bridge package with npm install -D [email protected] also fixes the issue without uninstalling jest-junit.

So I think there are 2 methods that you can try to fix this issue.

1. remove package-lock.json, node_modules, and re-install packages.
2. If method 1 does not solve, simply install [email protected] package ( preferably into your devDependencies ).

I recommend running npm ls babel-core to figure out which package is causing problem inside your dependency tree first.

[arnvol]

@jambyung thanks a lot! 2. method worked.

[JaccoGoris]

@JaccoGoris Good to hear that! I also found that explicitly installing the bridge package with npm install -D [email protected] also fixes the issue without uninstalling jest-junit.

So I think there are 2 methods that you can try to fix this issue.

1. remove package-lock.json, node_modules, and re-install packages.
2. simply install [email protected] package.

@jambyung you might want to add: uninstall jest-junit to the first step, without that it doesn't work.

[arnvol]

@JaccoGoris in my case the second method works along with jest-junit.

[JaccoGoris]

@arnvol Oh yeah I know but in my case, I figured out I could go without jest-junit and it was much easier to just remove it than to add the babel bridge :)

[behnammodi]

@jambyung thanks

[loganfsmyth]

Weird, definitely a package installation issue. babel-jest needs to be able to get Babel 7 via it's peerDependency, and react-scripts has dependencies on [email protected] and babel-jest, so that should be satisfied, but it looks like either babel-jest is being hoisted too much, or babel-core isn't being hoisted enough, so another copy of it gets hoisted in its place.

I'd expect

node_modules/
  babel-jest
  [email protected]
  react-scripts/

or

node_modules/
  react-scripts/
    node_modules/
      babel-jest
      [email protected]

but instead you've ended up with

node_modules/
  babel-jest
  babel-core@6
  react-scripts/
    node_modules/
      [email protected]

so that babel-jest gets the wrong version of Babel.

[bugzpodder]

@loganfsmyth I have the exact same tree in two different repos and they gave the different results. What am I missing?

$ cd ~/dev3/jest-cra-app/
$ npm ls babel-core && CI=true npm run test
[email protected] /Users/jzhao/dev3/jest-cra-app
├─┬ [email protected]
│ └─┬ [email protected]
│   └─┬ [email protected] 
│     └─┬ [email protected]
│       └── [email protected]  deduped
└─┬ [email protected]
  ├── [email protected] 
  └─┬ [email protected]
    └─┬ [email protected]
      └─┬ [email protected]
        └── [email protected]  deduped


> [email protected] test /Users/jzhao/dev3/jest-cra-app
> react-scripts test

PASS src/App.test.js
  ✓ renders without crashing (21ms)

Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        1.185s
Ran all test suites.
$ cd ~/dev2/jest-cra-app/
$ npm ls babel-core && CI=true npm run test
[email protected] /Users/jzhao/dev2/jest-cra-app
├─┬ [email protected]
│ └─┬ [email protected]
│   └─┬ [email protected] 
│     └─┬ [email protected]
│       └── [email protected]  deduped
└─┬ [email protected]
  ├── [email protected] 
  └─┬ [email protected]
    └─┬ [email protected]
      └─┬ [email protected]
        └── [email protected]  deduped


> [email protected] test /Users/jzhao/dev2/jest-cra-app
> react-scripts test

FAIL src/App.test.js
  ● Test suite failed to run

    ReferenceError: [BABEL] /Users/jzhao/dev2/jest-cra-app/src/App.test.js: Unknown option: base.configFile. Check out http://babeljs.io/docs/usage/options/ for more information about options.

    A common cause of this error is the presence of a configuration options object without the corresponding preset name. Example:

    Invalid:
      `{ presets: [{option: value}] }`
    Valid:
      `{ presets: [['presetName', {option: value}]] }`

    For more detailed information on preset configuration, please see https://babeljs.io/docs/en/plugins#pluginpresets-options.

      at Logger.error (node_modules/babel-core/lib/transformation/file/logger.js:41:11)

Test Suites: 1 failed, 1 total
Tests:       0 total
Snapshots:   0 total
Time:        1.337s
Ran all test suites.
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] test: `react-scripts test`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the [email protected] test script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/jzhao/.npm/_logs/2018-10-14T18_13_39_336Z-debug.log

[loganfsmyth]

@bugzpodder It is the relative placement of [email protected] and babel-jest that is important, so most likely babel-jest is in a different place in the two cases.

[bugzpodder]

Looks like I am actually having some caching issues.
I was able to add a blank line to node_modules/babel-jest/build/index.js and get my successful run into a failure. Removing the blank line would result in success.

[ghost]

I was also able to fix this issue by deleting package-lock.json and node_modules folder and running npm install again.

This works for me! Using [email protected]

[marcysutton]

If you delete package-lock.json and node_modules and the problem still won't go away after a fresh install, double check package.json for an older explicit babel-core entry (mine had "^6.26.0" for some reason). You can remove it for Babel 7 since that became a dependency of react-scripts. Then go through the delete/reinstall steps again.

[karianpour]

I had the same issue, using "react-scripts": "^1.1.5" solved the problem.

[Fl4v10]

I had the same issue, using "react-scripts": "^1.1.5" solved the problem.

I realized that my react-scripts-ts was in a diferenf version from react-scripts, then I just remove.

[kuba775]

For some unknown reason deleting node_modules and package-lock.json and even resetting my project repository to original state didn't work. I tried it about hundred times in a day, reinstalled npm and so on, but still no success...

Then I just renamed the project folder to something else (with cleared node_modules and package-lock.json), run npm install and tests started to run again. Renaming the project back to original name still kept it working. Probably something was hanging there in a path... so maybe it can help to someone - at least one more thing to try.

I've also created new create-react-app somewhere else in the filesystem during the same time, so not sure if that had any effect... but just in case

[oalberto96]

When i updated my react-scripts from 1.1.15 to 2.1.1 i had the same issue. I solved it by deleting the package-lock.json file, the node_modules folder, and deleting the jest reference from the package.json.
Then i ran the npm install and after that install jest

[JustenRickert]

I was getting this error and was able to fix it by doing rm ~/.npm/_cacache/ and reinstalling node_modules. This worked for me since around October, but just started not working since about a day ago. I was able to solve the problem now by doing npm install -D [email protected], which I think was a transitive dependency previously.

[alfonmga]

I had to replace "babel-core": "^6.26.3" to "babel-core": "7.0.0-bridge.0" in my package.json to make it works.

[IanFelton]

npm install -D [email protected] was the simple fix for me.