Uncaught TypeError: Cannot read property 'mountComponent' of undefined error when running create-react-app build version

[shsunmoonlee]

StackOverflow link

StackOverflow link

Is this a bug report?

Yes

Can you also reproduce the problem with npm 4.x?

It works on local development mode on both npm, yarn.

Which terms did you search for in User Guide?

Uncaught TypeError: Cannot read property 'mountComponent' of undefined error when running create-react-app build version

Environment

1. node -v: v8.4.0
2. npm -v: v4.6.1
3. yarn --version (if you use Yarn): 0.20.0
4. npm ls react-scripts (if you haven’t ejected): v1.0.14

Then, specify:

1. Operating system: Mac OS X
2. Browser and version (if relevant): Google Chrome

Steps to Reproduce

My create-react-app works fine on development mode, but it is blank page when I run the built one using (npm run build) with this console error.

Uncaught TypeError: Cannot read property 'mountComponent' of undefined
    at r (patchUtils.js:51)
    at e.exports (reactPatches.js:41)
    at react.js:59
    at Object.ready (reactInternals.js:24)
    at r (react.js:58)
    at Object.<anonymous> (index.js:12)
    at t (bootstrap 3c1adc8fa04e423f7356:19)
    at Object.<anonymous> (main.448e9d91.js:66458)
    at t (bootstrap 3c1adc8fa04e423f7356:19)
    at bootstrap 3c1adc8fa04e423f7356:62
    at bootstrap 3c1adc8fa04e423f7356:62

I didn't change any create-react-app config. One thing I'm suspecting is this part of code and the structure.

class SocialIntegrator extends React.Component {
  static propTypes = { children: PropTypes.node.isRequired };

  componentDidMount = () => {
    if (!initialized) {
      initialized = true;

      installFacebookSdk();
      installPinterest();
      installTwitter();
    }
  };

  render = () => React.Children.only(this.props.children);
}

export default SocialIntegrator;

Here's App.js

import React from "react";
import { Provider } from "react-redux";
import { BrowserRouter as Router, Switch } from "react-router-dom";
import PageLayoutRoute from "components/controls/PageLayoutRoute";
import { SocialIntegrator } from "components/Social";
import { createStore } from "store";
import routes from "components/routes";
import HomePage from "components/HomePage";
import StudioPage from "components/StudioPage";
import FramingPage from "components/FramingPage";
import OrderReviewPage from "components/OrderReviewPage";
import OrderConfirmationPage from "components/OrderConfirmationPage";
import { injectGlobal } from "styled-components";
injectGlobal`
html {
  overflow-y: auto;
}
`;
const store = createStore();

const App = () =>
<SocialIntegrator>
  <Provider store={store}>
    <Router>
      <Switch>
        <PageLayoutRoute exact path={routes.home} component={HomePage} />
        <PageLayoutRoute path={routes.studio} component={StudioPage} />
        <PageLayoutRoute path={routes.framing} component={FramingPage} />
        {/* */}
        <PageLayoutRoute path="/checkout" component={OrderReviewPage} />
        <PageLayoutRoute path="/orderConfirmed" component={OrderConfirmationPage} />
      </Switch>
    </Router>
  </Provider>
</SocialIntegrator>;

export default App;

I'm rendering the react app the standard way.
ReactDOM.render(<App />, document.getElementById("root"));
Here's createStore.js

import { createOpbeatMiddleware } from "opbeat-react/redux";
import { applyMiddleware, createStore } from "redux";
import thunk from "redux-thunk";
import reducer from "./reducer";

export default () =>
  createStore(
    reducer,
    window.__REDUX_DEVTOOLS_EXTENSION__ &&
      window.__REDUX_DEVTOOLS_EXTENSION__(),
    applyMiddleware(thunk, createOpbeatMiddleware())
  );

Expected Behavior

Renders like it did on development mode.

Actual Behavior

It's blank page with console error I mentioned.

Reproducible Demo

Just reproduced an issue. It's pretty similar. Sorry it took quite a bit of time.
https://github.com/Seunghunsh/create-react-app-react-dev-tools-issue-minimal-reproduce

(Paste the link to an example project and exact instructions to reproduce the issue.)

[sidoshi]

Are you exporting SocialIntegrator as a named export from components/social? Because in the file you have shown above exports it as default export.

(As it works in dev mode, you must have exported it correctly. Still just to make sure.)

[shsunmoonlee]

So I'm using subfolders with index.js in each of them to export each component.
export: Social/index.js
export { default as SocialIntegrator } from "./controls/SocialIntegrator";
import: index.js
import { SocialIntegrator } from "components/Social";

[gaearon]

Please provide a minimal complete example reproducing the problem.

My guess is that somehow you have wrong versions of some libraries. e.g. mixing React 16 with React DOM 15, or something like this.

We can’t help without seeing a runnable example that reproduces this.

[shsunmoonlee]

Just reproduced an issue. It's quite similar. Sorry it took quite a bit of time.
minimal-reproduce

[sidoshi]

I couldn't reproduce this. The build works fine even with the dev tools open.

The firebase link you provided also works with dev tools open. (I am assuming that it doesn't work for you since its a production build). Can you try opening that link from a different machine and check if the issue still exists?

[gaearon]

Any chance you are running a very old version of DevTools? Try removing them and installing again.

[shsunmoonlee]

I've re updated my chrome browser on mac, re-installed react dev tools extension offered by Facebook, but the issue still persists.
Can you guys see the error when you visit https://www.photospellgifts.com ?

[gaearon]

Yes, I see the error.

If you look at the stack trace it tells exactly where the error is happening:

Something called opbeat-react injects itself into React internals. This was never supported by React and can break any day.

You are using React 16. However the internals they're reading only exist in React 15. This is why it's broken.

You can track this problem in opbeat/opbeat-react#10 and opbeat/opbeat-react#19.

[shsunmoonlee]

Thank you so much for your help. Sorry I've forgot about replying! Have a good day !