SPLoaderError.loadComponentError：加载组件失败答案

【问题标题】：SPLoaderError.loadComponentError: Failed to load componentSPLoaderError.loadComponentError：加载组件失败
【发布时间】：2019-08-16 09:38:31
【问题描述】：

在 SPFX 框架中开发了一个 SharePoint 应用程序，当我使用 gulp build 对其进行编译时，它可以正常编译，但是当我执行 gulp serve 并将应用程序添加到工作台时，会出现以下错误：

[SPLoaderError.loadComponentError]：***无法加载组件“6d68696e-6767-4686-9cd4-60788de11f47”（DocumentUploadWebPart）。原始错误：***无法从组件“6d68696e-6767-4686-9cd4-60788de11f47”（DocumentUploadWebPart）加载入口点。原始错误：错误加载https://component-id.invalid/6d68696e-6767-4686-9cd4-60788de11f47_0.0.1 external__react_.createClass is not a function ***INNERERROR：***无法从组件“6d68696e-6767-4686-9cd4-60788de11f47”（DocumentUploadWebPart）加载入口点。原始错误：错误加载https://component-id.invalid/6d68696e-6767-4686-9cd4-60788de11f47_0.0.1 external__react_.createClass is not a function ***调用堆栈： SPError@https://localhost:4321/temp/workbench-packages/@microsoft_sp-loader/dist/sp-loader-assembly_default.js:8671:24 SPLoaderError@https://localhost:4321/temp/workbench-packages/@microsoft_sp-loader/dist/sp-loader-assembly_default.js:4127:21 WEBPACK_AMD_DEFINE_RESULThttps://localhost:4321/temp/workbench-packages/@microsoft_sp-loader/dist/sp-loader-assembly_default.js:3786:21 WEBPACK_AMD_DEFINE_RESULThttps://localhost:4321/temp/workbench-packages/@microsoft_sp-loader/dist/sp-loader-assembly_default.js:3694:16 _loadComponentImpl/https://localhost:4321/temp/workbench-packages/@microsoft_sp-loader/dist/sp-loader-assembly_default.js:6939:15

DocumentUpload.tsx

var App = React.createClass({ getInitialState() {
return { text: 'Enter Rich Text Description' }; },

render() {
var divStyle = {
  background: "#eee",
  padding: "10px",
  margin: "1px",
  width: "100%",
  height: "140px",
};

return (
  <div style={divStyle}>
    <Editor
      text={this.state.text}
      onChange={this.props.handleChange}
    />
  </div>
); },handleChange(text, medium) { this.setState({ text: text }); } });

IDocumentUploadProps.ts

import { SPHttpClient } from '@microsoft/sp-http';
export interface IDocumentUploadProps {
  spHttpClient: SPHttpClient;
  description: string;
  ProjectName: string;
  ProjectsArray: Array<string>[];
  siteurl: string;
  Building: string;
  Floor: string;
  GridLine: string;
  Subject: string;
  SubContractor: string;
  CreatedDate: string;
  RequiredDate: string;
  Disciplined: string;
  Description: string;
  Requirement: string;
  Comments: string;
  ItemGuid:string;
  loading: boolean;
  UploadedFilesArray: Array<string>[];
  CurrentUser: string;
  UserGroup: string;
  IRFINumber: string;
  IRFISeriesId: string;
  IRFIReference: string; }

SPFX 版本：1.7.1 节点版本：8.15.0 npm 版本：6.4.1

【问题讨论】：

标签： reactjs typescript webpack sharepoint-online spfx

【解决方案1】：

错误状态为external__react_.createClass is not a function。这是因为React.createClass has been removed as of React v16（由 SPFx v1.7.1 使用）。 Here is an official blog post 解释了如何迁移旧代码，使用 create-react-class 作为替代品。

另外，根据我的经验，SPFx 可以很好地与 ES6 类表示法配合使用，例如：class App extends React.Component { /* ... */ }。您可以重构代码以使用更现代的 ES6 表示法。但是，您还需要重构一些其他内容，例如 getInitialState，因此这可能不会立即可行。

【讨论】：