Issue after upgrading to React 15

[toddw]

After upgrading to React 15, I started getting the following error with enzyme.

ERROR in ./~/enzyme/build/react-compat.js
Module not found: Error: Cannot resolve module 'react/addons' in /projects/test/node_modules/enzyme/build
 @ ./~/enzyme/build/react-compat.js 37:16-39

[toddw]

Tested using 77e6bdc17ad52aefd9ccdc82d4197bd0709c95aa and I no longer have the issue… Patiently waiting for new publish :smile:

[ljharb]

hmm - that's only ran in the REACT013 code path - that commit shouldn't make a difference. On which SHA can you reproduce the issue?

[toddw]

Well then I wonder if pulling from git and telling it to build myself resolved it. I had the issue using 2.2.0, then I switched it from 2.2.0 to the latest commit, cd'd into the directory npm install then rand npm run build myself and things worked. I'll try that with 2.2.0, now I'm not sure if it is the version or some weird npm thing

[toddw]

Pulling from the v2.2.0 tag directly, npm install && npm run build in that folder also works. Let me try 2.2.0 again via npm instead of github

[toddw]

Going back to the npm install enzyme version and the problem is back.

[toddw]

after installing enzyme 2.2.0 I get the error again but if I cd into node_modules/enzyme and run npm install && npm run build then it resolves it. I'll see if rolling back to an older version resolves it, I'm starting to think this has less to do with the latest version of React but actually from updating enzyme

[toddw]

Rolled my react version to 0.14.8 and it works again.

The issue is only happening when using React version 15.0.0 It is resolved if I cd into node_modules/enzyme and run npm install && npm run build. Maybe there is a flag in the publish script causing an issue?

[ljharb]

after upgrading React, can you run npm install enzyme in your project dir?

[toddw]

When I do that, the error message comes back. Only resolved if I manually cd into the folder and re-build it myself

[ljharb]

that's very strange. which version of enzyme?

[toddw]

2.2.0 and I also tried 2.0.0

[toddw]

not a problem if I'm using React 0.14.8

[mordrax]

I'm seeing the same issue, also upgrading from react 0.14.8 package.json looks like this:

{
  "dependencies": {
    "classnames": "^2.2.1",
    "history": "^1.17.0",
    "lodash": "^4.6.1",
    "react": "^15.0",
    "react-addons-create-fragment": "^15",
    "react-addons-css-transition-group": "^15",
    "react-addons-linked-state-mixin": "^15",
    "react-addons-pure-render-mixin": "^15",
    "react-dnd": "^2.1.0",
    "react-dnd-html5-backend": "^2.1.2",
    "react-dom": "^15.0",
    "react-mixin": "^3.0.0",
    "react-redux": "^4.0.6",
    "react-router": "^2.0.0-rc5",
    "react-transform-catch-errors": "^1.0.0",
    "react-transform-hmr": "^1.0.2",
    "redbox-react": "^1.2.0",
    "redux": "^3.3.1",
    "redux-simple-router": "^2.0.3",
    "redux-thunk": "^1.0.3"
  },
  "devDependencies": {
    "babel-core": "^6.7.2",
    "babel-loader": "^6.2.4",
    "babel-preset-es2015": "^6.6.0",
    "babel-preset-meteor": "^6.6.7",
    "babel-preset-react": "^6.5.0",
    "babel-root-slash-import": "^1.0.0",
    "cheerio": "^0.20.0",
    "enzyme": "^2.2.0",  // <-- same problem with 2.1 or 2.2
    "immutable": "^3.7.6",
    "jasmine": "^2.4.1",
    "jasmine-core": "^2.4.1",
    "karma": "^0.13.22",
    "karma-chrome-launcher": "^0.2.2",
    "karma-firefox-launcher": "^0.1.7",
    "karma-jasmine": "^0.3.7",
    "karma-mocha-reporter": "^2.0.0",
    "karma-requirejs": "^0.2.5",
    "karma-sourcemap-loader": "^0.3.7",
    "karma-webpack": "^1.7.0",
    "react-addons-test-utils": "^15.0.0",
    "webpack": "^1.12.14"
  }
}

My tests still run fine.

[toddw]

It turns out, running npm install from within the node_modules/enzyme folder is enough to resolve the issue. I'm guessing that means React 15 doesn't include something that 0.14.8 does as a dependency

[mordrax]

Ok, doing that now... ... ... man this is taking a while... ... did that progress bar just go backwards?! Yes, confirmed, thanks for the workaround @toddw!

[toddw]

So it turns out that enzyme has devDependencies for enzyme-example-karma, enzyme-example-karma-webpack and enzyme-example-jest (maybe others). They end up including React 0.14.8, which is why I believe running npm install from inside node_modules/enzyme seems to work. When you do that, enzyme is able to locate react/addons. Same with when you run with 0.14.8 on the main project. So it seems React 15 doesn't seem to include react/addons.

I hope this helps narrow it down

[kouhin]

https://github.com/airbnb/enzyme/blob/master/src/react-compat.js#L16

if (REACT013) {
  renderToStaticMarkup = React.renderToStaticMarkup;
  /* eslint-disable react/no-deprecated */
  findDOMNode = React.findDOMNode;
  unmountComponentAtNode = React.unmountComponentAtNode;
  /* eslint-enable react/no-deprecated */
  TestUtils = require('react/addons').addons.TestUtils; <-- ERROR
  const ReactContext = require('react/lib/ReactContext');

enzyme uses if (REACT13), it works well in Node.js. But when using webpack (e.g. karma + webpack) to compile the source code, webpack will still try to fetch react/addons and throw an error.

[ljharb]

ok so it sounds like there's a couple issues, one is that the examples need to have their react versions updated, but the other is a webpack issue.

[kouhin]

I'm working on a isomorphic web application and using mocha on server side, karma + webpack + mocha in a browser environment. Actually, there is no problem with mocha + node.js. Error only occurs on karma + webpack + mocha.

@toddw Are you using webpack?

[kouhin]

@toddw @ljharb

solved! Just add the following lines to the externals in webpack configuration:

/* webpack.config.js */
// ...
externals: {
  'cheerio': 'window',
  'react/addons': true, // important!!
  'react/lib/ExecutionEnvironment': true,
  'react/lib/ReactContext': true
}
// ...

see https://github.com/airbnb/enzyme/blob/master/docs/guides/webpack.md

[ljharb]

@toddw can you confirm if this fixes your webpack issue?

[toddw]

@kouhin @ljharb

Confirmed! Thank you very much!

[vvo]

Just wondering why cheerio is "window" and others true?

[micaelmbagira]

@kouhin @toddw @ljharb What if you don't use webpack but SystemJS ? I am having the same issue but don't know how to apply the workaround for SystemJS

[johnste]

@micaelmbagira I got it working with jspm / SystemJS by doing this:

jspm install npm:enzyme --dev -o "{map: {'react/lib/ReactContext': '@empty', 'react/addons': '@empty', 'react/lib/ExecutionEnvironment': '@empty'}}"

[gihrig]

@kouhin's fix worked for me, except that I had to add 'react/addons': true, to my karma.config.js. Adding it to webpack.config.js did not work for me.

[chauthai]

@johnste Thanks for the tip! Enzyme is working in my testem + jspm setup now.

[craigcosmo]

this really helps me with similar issue.

[owencorpening]

Adding externals: { 'cheerio': 'window', 'react/addons': true, // important!! 'react/lib/ExecutionEnvironment': true, 'react/lib/ReactContext': true }

to the webpack.config in my project has no effect on ENZYME being unable to find it, this message doesn't indicate anything wrong with my configuration, seems like an ENZYME defect?

Module not found: Error: Cannot resolve module 'react/addons' in /Users/owencorpening/experiments/testBed/node_modules/enzyme/build

[blainekasten]

@owencorpening most people are confirming things are working in this closed thread. If you are still having an issue, mind opening a new issue fully explaining what's going on?

[joncursi]

I'm having the same issue on a Meteor app:

$ meteor test --once --driver-package dispatch:mocha-phantomjs --port 5100

[[[[[ Tests ]]]]]                             

=> Started proxy.                             
=> Started MongoDB.                           

Unable to resolve some modules:

  "react/addons" in                           
/Users/jcursi/Sites/joncursi/redbird-web/node_modules/enzyme/build/react-compat.js
(web.browser)
  "react/lib/ReactContext" in                 
/Users/jcursi/Sites/joncursi/redbird-web/node_modules/enzyme/build/react-compat.js
(web.browser)
  "react/lib/ExecutionEnvironment" in         
/Users/jcursi/Sites/joncursi/redbird-web/node_modules/enzyme/build/react-compat.js
(web.browser)

If you notice problems related to these missing modules, consider running:

  meteor npm install --save react 

Meteor does not use webpack, it has its own build system. Any ideas on how to resolve this for Meteor users?

[jpsantosbh]

Same problem here:

Joaos-MacBook-Pro:admin-dash jpsantos$ meteor test --driver-package practicalmeteor:mocha [[[[[ Tests ]]]]]

=> Started proxy.
=> Started MongoDB.
=> Meteor 1.4.0.1 is available. Update this project with 'meteor update'.

Unable to resolve some modules:

"react/addons" in /Users/jpsantos/Development/civic/admin-dash/node_modules/enzyme/build/react-compat.js (web.browser) "react/lib/ReactContext" in /Users/jpsantos/Development/civic/admin-dash/node_modules/enzyme/build/react-compat.js (web.browser) "react/lib/ExecutionEnvironment" in /Users/jpsantos/Development/civic/admin-dash/node_modules/enzyme/build/react-compat.js (web.browser)

If you notice problems related to these missing modules, consider running:

meteor npm install --save react

=> Started your app.

My Package:

"dependencies": { "classnames": "^2.2.5", "history": "^2.1.2", "meteor-node-stubs": "~0.2.0", "react": "^15.3.0", "react-addons-transition-group": "^15.3.0", "react-addons-linked-state-mixin": "^15.3.0", "react-addons-create-fragment": "^15.3.0", "react-addons-update": "^15.3.0", "react-addons-perf": "^15.3.0", "react-addons-css-transition-group": "^15.3.0", "react-addons-pure-render-mixin": "^15.3.0", "react-addons-test-utils": "^15.3.0", "react-dom": "^15.3.0", "react-mixin": "^3.0.5", "react-router": "^2.6.1" }, "devDependencies": { "autoprefixer": "^6.3.1", "enzyme": "^2.4.1" }

[dgroch]

any word on how to fix this for Meteor builds?

[joncursi]

I opted to uninstall practical meteor's mocha package and install mocha directly from npm, tests run faster and without errors

[dgroch]

thanks @joncursi if using the npm package, what command do you use to run the tests instead of meteor test --once --driver-package dispatch:mocha-phantomjs

[joncursi]

@dgroch depends on your setup, but a basic example would be:

mocha --compilers js:babel-register --recursive imports/**/*.tests.js

This will look for all *.tests.js files within the imports/ directory, which is where I have my tests located, but your use case is probably a little bit different.

Note that in order for Mocha to run your tests, it needs to first transpile your code from ES6/7 down to normal ES5, which is something the practicalmeteor:mocha package historically has abstracted for you behind the scenes. In order to get that to work, note the --compilers js:babel-register flag. This tells mocha to transpile using Babel before attempting to run the tests. You just need to install babel-register so mocha can find and use it:

npm install --save-dev babel-register

And add a .babelrc file to the root of your project (you probably already have this) so Babel knows which plugins and presets it should use when transpiling. An example would be:

{
  "presets": [
    "es2015",
    "react",
    "stage-0"
  ],

  "plugins": [
    "transform-class-properties"
  ]
}

[dgroch]

Thanks John :)

[s-devaney]

Having the same issue with Meteor

[clemsos]

Same issue with Meteor. Any updates on this ?

[FezVrasta]

Cannot find module 'react-addons-test-utils' from 'react-compat.js'

      at Resolver.resolveModule (node_modules/jest-resolve/build/index.js:151:17)
      at node_modules/enzyme/build/react-compat.js:128:19
      at Object.<anonymous> (node_modules/enzyme/build/react-compat.js:192:5)

Same error with latest React + Jest 😓

[conlanpatrek]

@FezVrasta I was experiencing the same thing, so I did a little digging:

https://github.com/airbnb/enzyme/blob/master/docs/common-issues.md#error-cannot-find-module-react-domlibreacttestutils

I know the module path is different, but check out the reason section.

In order to properly support multiple versions of React, we have conditional requirements that npm does not support with tools like peerDependencies. Instead we manually require and throw errors if the dependency is not met.

A quick manual install of react-addons-test-utils solved it for me... It's not ideal, but it'll get you there.

[FezVrasta]

Yes I fixed it as well in this way but I'd rather avoid to install unneeded dependencies...

[ljharb]

It's not unneeded, it's absolutely necessary. Please read the readme.

[FezVrasta]

So why it's not listed in peerDependencies, dependencies or devDependencies?

[ljharb]

The readme explains it.

Because we support multiple versions of react, and it's not required for all of them.

[FezVrasta]

Okay, but it sucks, no way that I get an error without an explanation of why do I get it. Your library is broken.

[ljharb]

That's why you need to read the documentation. If you do not, and the software does not work as expected, it's not the software that's broken.

[FezVrasta]

Yes and the bunch of people that comment on this issue are sustaining your tesis I guess.

[FezVrasta]

If what you want is an optionalDependency please use optionalDependencies field. Ore use peerDependencies, that, as far I know, are all optionals.

[ljharb]

It sounds like you may not realize what optionalDependencies are for - they are for dependencies that are always installed, but whose failure to install (primarily, failure to compile) does not fail the overarching install process. optionalDependencies would mean everyone has to install it.

Similarly, peerDependencies are always required. npm lacks the facility to specify conditional dependencies, which is why this is the only approach that is possible.