Question

在SPFX Framework中开发了一个SharePoint应用程序，当我用gulp编译它时，它可以很好地编译，但是当我做gulp服务时，我将该应用程序添加到工作台中并出现以下错误：

[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错误不是函数 ***内部错误：***无法从组件“ 6d68696e-6767-4686-9cd4-60788de11f47”（DocumentUploadWebPart）加载入口点。原始错误：加载https://component-id.invalid/6d68696e-6767-4686-9cd4-60788de11f47_0.0.1 external__react_.createClass错误不是函数 ***呼叫堆栈： 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_RESULT https：// localhost：4321/temp/workbench-packages/@microsoft_sp-loader/dist/sp-loader-assembly_default.js：3786：21 WEBPACK_AMD_DEFINE_RESULT https：// 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

Answer 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，以免立即可行。

SPLoaderError.loadComponentError：无法加载组件

1 个答案: