Error: Cannot find module 'react-dom/lib/ReactPerf' from 'react/lib/ReactAddonsDOMDependencies.js'

[designermonkey]

ReactAddonsDOMDependencies.js:29Uncaught Error: Cannot find module 'react-dom/lib/ReactPerf' from 'react/lib/ReactAddonsDOMDependencies.js'

I spotted that there was an issue with 15.4.1 regarding something like this, but this file exists. Brunch builds OK, but then fails in the browser with this error.

I don't know what version I was using prior to this where it worked :( I have tried 15.4.0 but still no luck.

[designermonkey]

I got it working using 15.3.2 so something must have changed in 15.4.0 to make brunch fail.

If I can provide any more info, please ask.

[gaearon]

Have you updated all React-related packages to 15.4.1 or just some?

[designermonkey]

This is everything that installs as a react component:

├─┬ react@15.4.1 
│ ├─┬ fbjs@0.8.6 
│ │ ├── core-js@1.2.7 
│ │ ├─┬ promise@7.1.1 
│ │ │ └── asap@2.0.5 
│ │ └── ua-parser-js@0.7.12 
│ ├─┬ loose-envify@1.3.0 
│ │ └── js-tokens@2.0.0 
│ └── object-assign@4.1.0 
├── react-addons-css-transition-group@15.4.1 
├── react-dom@15.4.1 
├─┬ react-form-elements@0.3.3 
│ └─┬ react@0.13.3 
│   └─┬ envify@3.4.1 
│     └─┬ jstransform@11.0.3 
│       ├── base62@1.1.2 
│       ├─┬ commoner@0.10.8 
│       │ ├── glob@5.0.15 
│       │ ├── q@1.4.1 
│       │ └─┬ recast@0.11.18 
│       │   ├── ast-types@0.9.2 
│       │   ├── esprima@3.1.2 
│       │   └── source-map@0.5.6 
│       ├── esprima-fb@15001.1.0-dev-harmony-fb 
│       ├── object-assign@2.1.1 
│       └── source-map@0.4.4 
├─┬ react-helmet@3.2.3 
│ ├── deep-equal@1.0.1 
│ └─┬ react-side-effect@1.0.2 
│   └─┬ fbjs@0.1.0-alpha.10 
│     └── whatwg-fetch@0.9.0 
├─┬ react-redux@4.4.6 
│ ├── hoist-non-react-statics@1.2.0 
│ ├── invariant@2.2.2 
│ └── lodash@4.17.2 
├─┬ react-router@3.0.0 
│ ├─┬ history@3.2.1 
│ │ └─┬ query-string@4.2.3 
│ │   └── strict-uri-encode@1.1.0 

Tbh, I don't know what is core and what isn't :/

[gaearon]

Can you please publish a standalone repo with instructions to reproduce this?
Thanks!

[billyjanitsch]

The problem is probably with your use of react-form-elements@0.3.3, which depends on react@0.13.3. You are installing two versions of React, one of which is incompatible with the installed version of react-dom.

[designermonkey]

Well, whadya know!

Thanks. I'm intrigued however to understand how a component that isn't using the form elements (it wasn't being used yet, that was next on my list), would cause this failure?

NPM and Node are still a little confusing to me.

[gaearon]

@designermonkey

It's hard to tell what exactly is happening without a repository demonstrating the issue.

[designermonkey]

Sadly it's private and I'm under pressure to get it done. When I do, I'll get an example put together asap.

Thanks for your help guys.

[designermonkey]

I spoke too soon.

Had a clear-out of node_modules this morning to start a-fresh, reinstalled it all at 15.4.1 without the forms module, and the issue has come back.

[gaearon]

Maybe you're using a custom npm registry that's broken, or your npm cache is invalid?
The file exists in react-dom@15.4.1: https://unpkg.com/react-dom@15.4.1/lib/ReactPerf.js

So somehow you have an old version of it.

[gaearon]

I'll close as the error is demonstrably caused by a wrong npm package or a bundler.
The file does exist in react-dom@15.4.1.
Please let me know if I'm wrong or missed something.

[designermonkey]

As I said in the initial comment, I know it exists. That's what's confusing about it.

I spotted that there was an issue with 15.4.1 regarding something like this, but this file exists. Brunch builds OK, but then fails in the browser with this error.

[gaearon]

Yea, I’m not trying to argue with you, just pointing out it’s unactionable for us so no use keeping it open. If you figure out what’s happening please post a comment 😉 . If you don’t, but manage to find some time to share a project demonstrating it I’d be happy to dive in too. Cheers!

[designermonkey]

No I know, I just thought as there was an issue already about that file going missing from older builds, it may be tangibly related.

Things I've just tried:

1. Clearing the NPM cache: problem persists.
2. Running brunch build --production: problem goes away.

Here is a test repo: https://github.com/designermonkey/react-issue

[gaearon]

Thanks for reproducing case, this is very helpful.

It is either a Brunch bug or an issue with packaging.
If it’s the latter it might be related to #8392.

It’s hard to guess for now but I’ll leave this open until we confirm either.

[designermonkey]

Thanks man.

[kockok]

I can confirm that running brunch build --production: problem goes away. Probably a brunch BUG?

[ghost]

Seams that this is a brunch issue. Check out this thread brunch/brunch#1591

[ghost]

The problem with brunch is conditional require. There are Notes for CommonJS at the official requirejs website. Check out this qoute:

If you have modules that are in the traditional CommonJS module format, then you can easily convert them to work with RequireJS. Not all modules will convert cleanly to the new format. Types of modules that may not convert well:

• Modules that use conditional code to do a require call, like if(someCondition) require('a1') else require('a2');
  ...

brunch author @paulmillr also wrote:

Conditional imports are also unsupported by ECMAScript; with the import syntax.

So, what do you think about it guys?
btw, Happy New Year!

[gaearon]

React has had a (different) conditional require since 15.2.0, see #6830.
Why wasn’t that one problematic?

[ghost]

@gaearon after some digging into it, I found that the special problem here is the fact, that ReactAddonsDOMDependencies is inside react/lib and ReactPerf & ReactTestUtils are inside react-dom/lib

I did some naive experiment by moving the conditional requires into react-dom/lib/DevTools.
And required the DevTools inside ReactAddonsDOMDependencies. And it worked!

Basically what I did..

// react-dom/lib/DevTools.js
var DevTools = {};
if (__DEV__) {
  DevTools.ReactPerf = require('ReactPerf');
  DevTools.ReactTestUtils = require('ReactTestUtils');
}
module.exports = DevTools;

// react/lib/ReactAddonsDOMDependencies.js
...
// require always. In production its just an object..
var ReactDOMDevTools = require('react-dom/lib/DevTools');
if (__DEV__) {
  exports.getReactPerf = function () {
    return ReactDOMDevTools.ReactPerf;
  };

  exports.getReactTestUtils = function () {
    return ReactDOMDevTools.ReactTestUtils;
  };
}

But I haven't created a PR because there were some dozen tests which were failing.

[ghost]

Maybe the comment above will bring some value to the brunch maintainers to fix it on the brunch / deppack side.
cc @paulmillr @goshakkk @shvaikalesh @marcioj

[gaearon]

I'm not sure this is because of that conditional require: brunch/brunch#1591 (comment).

[gaearon]

Should be temporarily fixed by #8686 and will be out in 15.4.2 (to be released soon).
However this is just a workaround, and a Brunch bug seems like the real issue here. (brunch/brunch#1591 (comment))

[gaearon]

Should be fixed after updating all React packages to 15.4.2.
Please verify.

[designermonkey]

Thanks guys!

[astw]

React 16.0.0
Uncaught Error: Cannot find module "react-dom/lib/ReactPerf"
at webpackMissingModule (index.js?afe1:1)
at eval (index.js?afe1:1)

[gaearon]

React 16 does not currently support the React Perf addon. Please read the 16 announcement blog post that mentions this.