运行create-react-app构建版本时出现Uncaught TypeError: Cannot read property 'mountComponent' of undefined错误

Question

重现步骤

我的create-react-app在开发模式下运行良好，但是当我使用(npm run build)运行构建版本时，它变成了空白页面，并出现以下控制台错误。

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

我没有更改任何create-react-app的配置。我怀疑的是这部分代码和结构。

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;

这是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;

这里是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())
  );

导出/导入

我正在使用带有index.js的子文件夹来导出每个组件。 导出: Social/index.js

export { default as SocialIntegrator } from "./controls/SocialIntegrator";

导入：index.js

import { SocialIntegrator } from "components/Social";

环境

1. node -v: v8.4.0
2. npm -v: v4.6.1
3. yarn --version (如果您使用Yarn): 0.20.0
4. npm ls react-scripts (如果您未弹出): v1.0.14

- Seunghun Sunmoon Lee

---

你是如何渲染应用程序的？类似这样吗？你是否针对有效的DOM元素进行了定位？React.render(<App />, document.getElementById('root')); - Scott

是的。ReactDOM.render(<App />, document.getElementById("root")); - Seunghun Sunmoon Lee

刚刚复现了这个问题，与原问题非常相似。很抱歉耗费了一些时间。 https://github.com/Seunghunsh/create-react-app-react-dev-tools-issue-minimal-reproduce - Seunghun Sunmoon Lee

Answer 1

请看我的解释：未捕获的类型错误：在运行create-react-app构建版本时无法读取未定义的属性“mountComponent”错误 您正在使用依赖于私有React API的库。这些API不再存在。（并且从来没有打算直接使用它们。）

- Dan Abramov

---

非常感谢！对于看到这篇文章的人来说，这是由于“opbeat”应用程序仅支持React 15，而我正在使用React 16引起的。 - Seunghun Sunmoon Lee