未捕获的类型错误：运行 create-react-app 构建版本时无法读取未定义错误的属性“mountComponent”

Posted 2023-02-22

【中文标题】未捕获的类型错误：运行 create-react-app 构建版本时无法读取未定义错误的属性“mountComponent”

【英文标题】：Uncaught TypeError: Cannot read property 'mountComponent' of undefined error when running create-react-app build version

【发布时间】：2018-04-08 12:47:46

【问题描述】：

复制步骤

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

环境

node -v: v8.4.0 npm -v：v4.6.1 yarn --version（如果你使用 Yarn）：0.20.0 npm ls react-scripts（如果你还没有弹出）：v1.0.14

【问题讨论】：

如何渲染应用程序？像这样的东西？你的目标是一个有效的 DOM 元素吗？ React.render(<App />, document.getElementById('root'));

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

刚刚重现了这个问题。这很相似。抱歉，花了相当多的时间。 github.com/Seunghunsh/…

【参考方案1】：

请看我的解释：Uncaught TypeError: Cannot read property 'mountComponent' of undefined error when running create-react-app build version

您正在使用依赖于私有 React API 的库。这些 API 不再存在。 （并且从未打算直接使用。）

【讨论】：

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