Enzyme: Incorrect "react-dom is an implicit dependency" warning

Created on 28 Jul 2017 · 9Comments · Source: enzymejs/enzyme

I have react-dom installed and it's in both dependencies and devDependencies. However, enzyme still complains about it:

react-dom is an implicit dependency in order to support [email protected]. Please add the appropriate version to your devDependencies. See https://github.com/airbnb/enzyme#installation

  at Object.<anonymous> (node_modules/enzyme/build/react-compat.js:108:11)
  at Object.<anonymous> (node_modules/enzyme/build/Utils.js:65:20)
  at Object.<anonymous> (node_modules/enzyme/build/MountedTraversal.js:36:14)

React version is 15.6.1, here's my dependencies:

"devDependencies": {
  "react": "^15.6.1",
  "react-dom": "^15.6.1",
  "react-test-renderer": "^15.6.1",
  ...
},
"dependencies": {
  "react": "^15.6.1",
  "react-dom": "^15.6.1",
  ...
},

Source

roboslone

👍13

Most helpful comment

So the problem I ran into was upgrading JSDOM to the newest version. I am using Enzyme 2.8.2, React 15.5.4.

I went and found the catch clause that was throwing the error in node_modules/enzme/build/react-compat.js:

if (_version.REACT013) {
... // logic here
} else {
  // we are using react 15.5 so we end up here
  var ReactDOM = void 0;

  try {
    // eslint-disable-next-line import/no-extraneous-dependencies
    ReactDOM = require('react-dom');
  } catch (e) {
    throw new Error('react-dom is an implicit dependency in order to support [email protected]. ' + 'Please add the appropriate version to your devDependencies. ' + 'See https://github.com/airbnb/enzyme#installation');
  }
  // ... rest of the logic
}

This will get thrown on ANY failure to require react-dom, not just that it doesn't exist. I simply added a console.error to log the e and it pointed me to the fact that I had misconfigured Jsdom and the global document was not available. When I fixed this everything worked fine, made no changes to enzyme.

Two problems I see, unless I am overlooking something:

This catch clause is too vague, requiring can fail for many reasons not just that it doesn't exist
It is throwing the misleading error that we are using "[email protected]", when we are in the else indicating that we are not using this version.

So if you are having this problem I'd recommend going into your node_modules and logging the error.

erik-sn on 22 Aug 2017

👍2 🎉1

All 9 comments

No solution yet? Having the same issue.

"devDependencies": { ... "react-addons-test-utils": "^15.6.0", "react-dom": "^15.6.1" ... }

This is the error.

Test suite failed to run. react-dom is an implicit dependency in order to support [email protected]. Please add the appropriate version to your devDependencies. See https://github.com/airbnb/enzyme#installation

Test:
import React from 'react' import Auth from '../index' import { shallow } from 'enzyme' describe('Simple Component', function() { it('renders correctly', () => { const tree = shallow(<Auth />) expect(tree).toMatchSnapshot() }) })

nyenye on 22 Aug 2017

There's no reason I can think of to have something in both deps and dev deps; I'd suggest removing it from dev deps. That shouldn't be related to this issue, however.

Does npm ls exit successfully?

ljharb on 22 Aug 2017

Try removing node_modules and reinstalling everything. I've fixed it somehow, but I don't remember how =/

And yes, as @ljharb said, there's no need to put dependencies in both places.

roboslone on 22 Aug 2017

👍1

Great, seems resolved.

ljharb on 22 Aug 2017

Erm, @ljharb, there's no solution published yet. I don't remember exactly what I've done to fix this, reinstalling everything might be not the solution.

roboslone on 22 Aug 2017

If that fixed the problem, it's an npm or a user issue, not an individual project issue.

ljharb on 22 Aug 2017

So the problem I ran into was upgrading JSDOM to the newest version. I am using Enzyme 2.8.2, React 15.5.4.

I went and found the catch clause that was throwing the error in node_modules/enzme/build/react-compat.js:

if (_version.REACT013) {
... // logic here
} else {
  // we are using react 15.5 so we end up here
  var ReactDOM = void 0;

  try {
    // eslint-disable-next-line import/no-extraneous-dependencies
    ReactDOM = require('react-dom');
  } catch (e) {
    throw new Error('react-dom is an implicit dependency in order to support [email protected]. ' + 'Please add the appropriate version to your devDependencies. ' + 'See https://github.com/airbnb/enzyme#installation');
  }
  // ... rest of the logic
}

Two problems I see, unless I am overlooking something:

This catch clause is too vague, requiring can fail for many reasons not just that it doesn't exist
It is throwing the misleading error that we are using "[email protected]", when we are in the else indicating that we are not using this version.

So if you are having this problem I'd recommend going into your node_modules and logging the error.

erik-sn on 22 Aug 2017

👍2 🎉1

Interesting, thanks. v3 of enzyme is coming soon, and it will resolve these errors, or else id reopen :-)

ljharb on 22 Aug 2017

I encountered a similar issue when using the latest React Native, which is on React 0.16-alpha. Enzyme is working on supporting React 16, so I'm tracking #928 closely.