title: [SPLoaderError.loadComponentError]: ***Failed to load component
body: <p>I developed a webpart in Sharepoint Framework, when I compile it with gulp build it compiles fine, however when I do gulp serve and I add the webpart to the workbench I get this error:</p>
  
  <pre><code>[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)
  </code></pre>
  
  <p>The main code files are below
  BuilderWebpart.ts</p>
  
  <pre><code> 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&lt;IBuilderWebPartProps&gt; {
  
        public render(): void {
          const element: React.ReactElement&lt;IBuilderProps &gt; = 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"
                      })
                    ]
                  }
                ]
              }
            ]
          };
        }
      }
  </code></pre>
  
  <p>BuilderWebPart.manifest.json</p>
  
  <pre><code>{
    "$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"
      }
    }]
  }
  </code></pre>
  
  <p>Builder.tsx</p>
  
  <pre><code>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&lt;IBuilderProps, {}&gt; {
  
    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&lt;IBuilderProps&gt; {
      return (
          &lt;div className={styles.builder}&gt;
            &lt;div className={styles.container}&gt;
              &lt;div className={`ms-Grid-row ms-bgColor-themeDark ms-fontColor-white ${styles.row}`}&gt;
                &lt;div className="ms-Grid-col ms-lg10 ms-xl8 ms-xlPush2 ms-lgPush1"&gt;
                  &lt;span className="ms-font-xl ms-fontColor-white"&gt;Welcome to Burger Company!&lt;/span&gt;
                  &lt;p className="ms-font-l ms-fontColor-white"&gt;You have selected the following.&lt;/p&gt;
                    &lt;span className={styles.label}&gt;{this.meal.showItems()}&lt;/span&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        );
      }
    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();
     }
    }
  }
  </code></pre>