SPLoaderError.loadComponentError: Failed to load component

Question

Developed a SharePoint app in SPFX Framework, when I compile it with gulp build it compiles fine, however when I do gulp serve and I add the app to the workbench and get this following error:

[SPLoaderError.loadComponentError]:***Failed to load component "6d68696e-6767-4686-9cd4-60788de11f47" (DocumentUploadWebPart). Original error: ***Failed to load entry point from component "6d68696e-6767-4686-9cd4-60788de11f47" (DocumentUploadWebPart). Original error: Error loading https://component-id.invalid/6d68696e-6767-4686-9cd4-60788de11f47_0.0.1 external__react_.createClass is not a function ***INNERERROR:***Failed to load entry point from component "6d68696e-6767-4686-9cd4-60788de11f47" (DocumentUploadWebPart). Original error: Error loading https://component-id.invalid/6d68696e-6767-4686-9cd4-60788de11f47_0.0.1 external__react_.createClass is not a function ***CALLSTACK: 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 version: 1.7.1 node version: 8.15.0 npm version: 6.4.1

score 0 · Answer 1 · answered Mar 26 '19 at 14:28

The error states external__react_.createClass is not a function. This is because React.createClass has been removed as of React v16 (which is used by SPFx v1.7.1). Here is an official blog post which explains how to migrate older code, using create-react-class as a drop-in replacement.

Alternatively, in my experience, SPFx works fine with the ES6 class notation, e.g.: class App extends React.Component { /* ... */ }. You can refactor your code to use the more modern ES6 notation. However, you would need to refactor out some other things as well such as getInitialState, so that might not be immediately feasible.

SPLoaderError.loadComponentError: Failed to load component

1 Answers1