Welcome toVigges Developer Community-Open, Learning,Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
344 views
in Technique[技术] by (71.8m points)

reactjs - Typescript React Target container is not a DOM element

I have an addin for outlook, which is complaining: Uncaught Invariant Violation: Target container is not a DOM element. My app already ran before, so it seems to be an issue within my components (just a guess). The Exception occours here:

const render = Component => {
  ReactDOM.render(
    <AppContainer>
      <Component title={title} isOfficeInitialized={isOfficeInitialized} key="config" />
    </AppContainer>,
    document.getElementById("root")
  );
};
<!doctype html>
<html lang="en" data-framework="typescript">
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=Edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Contoso Task Pane Add-in</title>
    <!-- Office JavaScript API -->
    <script type="text/javascript" src="https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js"></script>
    <!-- For more information on Office UI Fabric, visit https://developer.microsoft.com/fabric. -->
    <link rel="stylesheet" href="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-core/9.6.1/css/fabric.min.css"/>
    <!-- Template styles -->
    <link href="../taskpane/taskpane.css" rel="stylesheet" type="text/css" />
</head>
<body class="ms-font-m ms-Fabric">
    <div id="root"></div>
</body>
</html>

EDIT: Rendered code in Chrome debug tools

Rendered code in Chrome debug tools

How can I find the code part which cannot be rendered? Which DOM element might be the issue?


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)
等待大神答复

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to Vigges Developer Community for programmer and developer-Open, Learning and Share
...