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

Question

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;

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())
  );

Export/Import

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";

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

Answer 1

Please see my explanation here: Uncaught TypeError: Cannot read property 'mountComponent' of undefined error when running create-react-app build version

You are using a library that depends on private React APIs. Those APIs don't exist anymore. (And were never meant to be used directly.)