reactjs - [SPLoaderError.loadComponentError] : ***Failed to load component

Question

我在 Sharepoint Framework 中开发了一个 webpart，当我用 gulp build 编译它时编译正常，但是当我做 gulp serve 并将 webpart 添加到工作台时，我得到这个错误:

[SPLoaderError.loadComponentError]:
***Failed to load component "3a000c20-ed9a-44db-a466-db477bfc0132" (BuilderWebPart).
Original error: ***Failed to load entry point from component "3a000c20-ed9a-44db-a466-db477bfc0132" (BuilderWebPart).
Original error: Error loading https://component-id.invalid/3a000c20-ed9a-44db-a466-db477bfc0132_0.0.1
    Cannot find module "resx-strings"

***INNERERROR:
***Failed to load entry point from component "3a000c20-ed9a-44db-a466-db477bfc0132" (BuilderWebPart).
Original error: Error loading https://component-id.invalid/3a000c20-ed9a-44db-a466-db477bfc0132_0.0.1
    Cannot find module "resx-strings"
***CALLSTACK:
Error
   at SPError._generateErrorStackForIE (https://localhost:4321/node_modules/@microsoft/sp-loader/dist/sp-loader-assembly_en-us.js:10202:13)
   at SPError (https://localhost:4321/node_modules/@microsoft/sp-loader/dist/sp-loader-assembly_en-us.js:10183:9)
   at SPLoaderError (https://localhost:4321/node_modules/@microsoft/sp-loader/dist/sp-loader-assembly_en-us.js:4211:9)
   at ErrorBuilder.buildErrorWithVerboseLog (https://localhost:4321/node_modules/@microsoft/sp-loader/dist/sp-loader-assembly_en-us.js:3821:9)
   at ErrorBuilder.buildLoadComponentError (https://localhost:4321/node_modules/@microsoft/sp-loader/dist/sp-loader-assembly_en-us.js:3743:9)
   at Anonymous function (https://localhost:4321/node_modules/@microsoft/sp-loader/dist/sp-loader-assembly_en-us.js:7952:9)
   at tryCatch (https://localhost:4321/node_modules/@microsoft/sp-loader/dist/sp-loader-assembly_en-us.js:998:5)
   at invokeCallback (https://localhost:4321/node_modules/@microsoft/sp-loader/dist/sp-loader-assembly_en-us.js:1013:5)
   at publish (https://localhost:4321/node_modules/@microsoft/sp-loader/dist/sp-loader-assembly_en-us.js:981:7)
   at publishRejection (https://localhost:4321/node_modules/@microsoft/sp-loader/dist/sp-loader-assembly_en-us.js:923:3)

主要代码文件如下 BuilderWebpart.ts

 import * as React from "react";
    import * as ReactDom from "react-dom";
    import { Version } from "@microsoft/sp-core-library";
    import {
      BaseClientSideWebPart,
      IPropertyPaneConfiguration,
      PropertyPaneTextField,
      PropertyPaneDropdown
    } from "@microsoft/sp-webpart-base";

    //import * as strings from "BuilderWebPartStrings";
    import Builder from "./components/Builder";
    import { IBuilderProps } from "./components/IBuilderProps";
    import { IBuilderWebPartProps } from "./IBuilderWebPartProps";


    export default class BuilderWebPart extends BaseClientSideWebPart<IBuilderWebPartProps> {

      public render(): void {
        const element: React.ReactElement<IBuilderProps > = React.createElement(
          Builder,
          {
            description: this.properties.description,
            selectedMeal: this.properties.selectedMeal
          }
        );

        ReactDom.render(element, this.domElement);
      }

      protected get dataVersion(): Version {
        return Version.parse('1.0');
      }


      protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration  {
        return {
          pages: [
            {
              header: {
                description: "Header"
              },
              groups: [
                {
                  groupName: "Group",
                  groupFields: [
                    PropertyPaneDropdown("meal", {
                      label: "Select meal",
                      options: [
                        { key: "Veg", text: "Veg" },
                        { key: "Nonveg", text: "Nonveg" }
                      ],
                      selectedKey: "Nonveg"
                    })
                  ]
                }
              ]
            }
          ]
        };
      }
    }

BuilderWebPart.manifest.json

{
  "$schema": "https://dev.office.com/json-schemas/spfx/client-side-web-part-manifest.schema.json",
  "id": "3a000c20-ed9a-44db-a466-db477bfc0132",
  "alias": "BuilderWebPart",
  "componentType": "WebPart",

  // The "*" signifies that the version should be taken from the package.json
  "version": "*",
  "manifestVersion": 2,

  // If true, the component can only be installed on sites where Custom Script is allowed.
  // Components that allow authors to embed arbitrary script code should set this to true.
  // https://support.office.com/en-us/article/Turn-scripting-capabilities-on-or-off-1f2c515f-5d7e-448a-9fd7-835da935584f
  "requiresCustomScript": false,

  "preconfiguredEntries": [{
    "groupId": "5c03119e-3074-46fd-976b-c60198311f70", // Other
    "group": { "default": "Other" },
    "title": { "default": "builder" },
    "description": { "default": "builder description" },
    "officeFabricIconFontName": "Page",
    "properties": {
      "description": "builder"
    }
  }]
}

生成器.tsx

import * as React from "react";
import styles from "./Builder.module.scss";
import { IBuilderProps } from "./IBuilderProps";
import { escape } from "@microsoft/sp-lodash-subset";
import MealBuilder from "./MealBuilder";
import Meal from "./Meal";
import { IPropertyPaneConfiguration } from "@microsoft/sp-webpart-base/lib/propertyPane/propertyPane/IPropertyPane";
import {
  PropertyPaneDropdown
} from "@microsoft/sp-webpart-base";
import Version from "@microsoft/sp-core-library/lib/Version";

export default class Builder extends React.Component<IBuilderProps, {}> {

  private mealBuilder: MealBuilder ;
  private items: string;
  private meal: Meal;

  constructor(props: IBuilderProps, state: any) {
    super(props);
    this.setMeal(props.selectedMeal);
    this.mealBuilder = new MealBuilder();
  }

  public render(): React.ReactElement<IBuilderProps> {
    return (
        <div className={styles.builder}>
          <div className={styles.container}>
            <div className={`ms-Grid-row ms-bgColor-themeDark ms-fontColor-white ${styles.row}`}>
              <div className="ms-Grid-col ms-lg10 ms-xl8 ms-xlPush2 ms-lgPush1">
                <span className="ms-font-xl ms-fontColor-white">Welcome to Burger Company!</span>
                <p className="ms-font-l ms-fontColor-white">You have selected the following.</p>
                  <span className={styles.label}>{this.meal.showItems()}</span>
              </div>
            </div>
          </div>
        </div>
      );
    }
  protected get dataVersion(): Version {
    return Version.parse("1.0");
  }
  private setMeal(selectedMeal: string): void {
     if(selectedMeal === "VegMeal") {
        this.meal = this.mealBuilder.prepareVegMeal();
     }
     if(selectedMeal === "NonVegMeal") {
      this.meal = this.mealBuilder.prepareNonVegMeal();
   }
  }
}

Answer 1

当我实现工厂设计模式时，同样的事情也发生在我身上。发生此问题是因为您以循环方式引用导入。例如，如果您有 A 类和 B 类:

A.B 类在工厂中使用 B.A 类。

我看到您在 SharepointListDAOFactory 中导入了 DAOFactory，并且在 SharepointListDAOFactory 中导入了 DAOFactory。更正的方法是将 DAOFactory 类中的 import SharepointListDAOFactory from "./SharepointListDAOFactory"; 移动到文件底部或将抽象类重构为接口(interface)并使用他们不同。

更新代码:

import ICustomerDAO from "./ICustomerDAO";
import DataSources from "./DatasourcesEnum";

abstract class DAOFactory {

public abstract getCustomerDAO(): ICustomerDAO;

public  static getDAOFactory(whichFactory: DataSources): DAOFactory {
    switch (whichFactory) {
      case DataSources.SharepointList:
        return new SharepointListDAOFactory();
      case DataSources.JsonData:
        return new JsonDAOFactory();
      default  :
        return null;
    }
  }
}

export default DAOFactory;
import SharepointListDAOFactory from "./SharepointListDAOFactory";
import JsonDAOFactory from "./JsonDAOFactory";