[SPLoaderError.loadComponentError]: *** Не удалось загрузить компонент

Я разработал веб-часть в Sharepoint Framework, когда я компилирую ее с помощью gulp build, она компилируется нормально, однако, когда я выполняю gulp serve и добавляю веб-часть в рабочую среду, я получаю эту ошибку:

[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"
    }
  }]
}

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();
   }
  }
}

person Luis Valencia    schedule 02.05.2018    source источник
comment
у вас есть ссылка на репозиторий git? Вы можете поделиться этим URL?   -  person Gautam Sheth    schedule 07.05.2018
comment
да, здесь: github.com / levalencia / sp-dev-fx-webparts / tree /   -  person Luis Valencia    schedule 07.05.2018


Ответы (2)


То же самое случилось со мной, когда я реализовал шаблон проектирования фабрики. Проблема возникает из-за того, что вы ссылаетесь на импорт циклически. Например, если у вас есть класс A и класс B:

Класс A.B использует на заводе класс B.A.

Я вижу, что у вас DAOFactory как импорт в SharepointListDAOFactory, а внутри SharepointListDAOFactory вы импортировали DAOFactory. Чтобы исправить это, нужно переместить import SharepointListDAOFactory from "./SharepointListDAOFactory"; в классе DAOFactory в конец файла или преобразовать абстрактные классы в интерфейсы и использовать их по-другому.

Обновленный код:

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";    
person Devin Prejean    schedule 08.05.2018
comment
Это исправляет, хотите, чтобы я отправил вам запрос на перенос? Это ЕДИНСТВЕННОЕ изменение, которое я внес, так что если бы вы сделали его сами, было бы быстрее, но я согласен сделать это вместо этого. - person Devin Prejean; 08.05.2018
comment
Сообщение этого парня в блоге действительно помогло мне реорганизовать мою фабрику, чтобы использовать интерфейсы вместо абстрактных классов. thedulinreport.com/2017/07/30/ - person Devin Prejean; 08.05.2018
comment
позвольте мне проверить, работает ли он, и если да, я снова опубликую код. большое спасибо. - person Luis Valencia; 08.05.2018
comment
Я удалил абстрактную папку factory, но снова создал папку Builder, как в исходном вопросе, я подумал, что после ее воссоздания и правильного ввода кода вручную он будет работать, но все же я получаю ту же ошибку. Я снова загрузил @Devin Prejean, вы можете проверить? github.com/levalencia/sp- dev-fx-webparts / tree / - person Luis Valencia; 08.05.2018
comment
Ваш новый код - это совсем другая проблема. Вы получаете ту же ошибку, что и с абстрактной фабрикой? - person Devin Prejean; 08.05.2018
comment
Я исправил ваш другой код ... мне потребовалось время, но он у меня есть. Пытаюсь сделать вам пул-реквест. - person Devin Prejean; 08.05.2018
comment
не могли бы вы объяснить мне, в чем вы ошиблись. - person Luis Valencia; 08.05.2018
comment
Я удалил абстрактный узор, потому что хотел начать с нуля, шаблон Builder - это точно такая же проблема! файлы кода разные, но ошибка та же. - person Luis Valencia; 08.05.2018
comment
Позвольте нам продолжить это обсуждение в чате. - person Luis Valencia; 08.05.2018

Попробуйте добавить sp-module-loader в свой config.json следующим образом:

"@microsoft/sp-module-loader": "node_modules/@microsoft/sp-module-loader/dist/sp-module-loader.js"

Примеры кода с github для справки:

Примеры клиентских веб-частей SharePoint FrameWork

person LZ_MSFT    schedule 04.05.2018
comment
К сожалению, это не сработало, вам нужно, чтобы я вставил еще код, чтобы мы могли найти решение? - person Luis Valencia; 04.05.2018