Failed to load component for container - ModuleError: failed to load

[Prajwal_N1]

Hi all,

I'm experiencing an issue with loading a component in my SAPUI5 application. The error message I'm seeing is:

"Failed to load component for container - ModuleError: failed to load 'employeeapplication/SharedBlocks/PersonalDetails.js' from ./SharedBlocks/PersonalDetails.js: script load error"

My manifest.json file looks like this:

{

  "_version": "1.59.0",

  "sap.app": {

    "id": "employeeapplication",

    "type": "application",

    "i18n": "i18n/i18n.properties",

    "applicationVersion": {

      "version": "0.0.1"

    },

    "title": "{{appTitle}}",

    "description": "{{appDescription}}",

    "resources": "resources.json",

    "sourceTemplate": {

      "id": "@sap/generator-fiori:basic",

      "version": "1.14.1",

      "toolsId": "9e31bfee-31bb-417f-bee7-4d3c1801703c"

    },

    "dataSources": {

      "mainService": {

        "uri": "/sap/opu/odata/sap/ZUI_C_PNL/",

        "type": "OData",

        "settings": {

          "annotations": [],

          "localUri": "localService/metadata.xml",

          "odataVersion": "2.0"

        }

      }

    },

    "crossNavigation": {

      "inbounds": {

        "zpc_emp-display": {

          "semanticObject": "zpc_emp",

          "action": "display",

          "title": "{{flpTitle}}",

          "signature": {

            "parameters": {},

            "additionalParameters": "allowed"

          }

        }

      }

    }

  },

  "sap.ui": {

    "technology": "UI5",

    "icons": {

      "icon": "",

      "favIcon": "",

      "phone": "",

      "phone@2": "",

      "tablet": "",

      "tablet@2": ""

    },

    "deviceTypes": {

      "desktop": true,

      "tablet": true,

      "phone": true

    }

  },

  "sap.ui5": {

    "flexEnabled": true,

    "dependencies": {

      "minUI5Version": "1.121.6",

      "libs": {

        "sap.m": {},

        "sap.ui.core": {},

        "sap.f": {},

        "sap.suite.ui.generic.template": {},

        "sap.ui.comp": {},

        "sap.ui.generic.app": {},

        "sap.ui.table": {},

        "sap.ushell": {}

      }

    },

    "contentDensities": {

      "compact": true,

      "cozy": true

    },

    "models": {

      "i18n": {

        "type": "sap.ui.model.resource.ResourceModel",

        "settings": {

          "bundleName": "employeeapplication.i18n.i18n"

        }

      },

      "": {

        "dataSource": "mainService",

        "preload": true,

        "settings": {}

      }

    },

    "resources": {

      "css": [

        {

          "uri": "css/style.css"

        }

      ],

      "js": [

        {

          "uri": "SharedBlocks/PersonalDetails.js"

        }

      ]

    },

    "blocks": {

      "uri": "SharedBlocks/",

      "blocks": {

        "PersonalDetails": {

          "uri": "SharedBlocks/PersonalDetails.js"

        }

      }

    },  

    "routing": {

      "config": {

        "routerClass": "sap.m.routing.Router",

        "viewType": "XML",

        "async": true,

        "viewPath": "employeeapplication.view",

        "controlAggregation": "pages",

        "controlId": "app",

        "clearControlAggregation": false

      },      

      "routes": [

        {

          "name": "Home",

          "pattern": "",

          "target": [

            "TargetEmployeeData"

          ]

        },

        {

          "name": "detail",

          "pattern": "product/{Empid}",

          "target": [

            "Targetpnl"

          ]

        },

        {

          "name": "create_personal_details",

          "pattern": "create",

          "target": [

            "Targetcreatepnl"

          ]

        }

      ],

      "targets": {

        "TargetEmployeeData": {

          "viewType": "XML",

          "transition": "slide",

          "clearControlAggregation": false,

          "viewName": "EmployeeData"

        },

        "Targetpnl": {

          "viewType": "XML",

          "transition": "slide",

          "clearControlAggregation": false,

          "viewName": "pnl"

        },

        "Targetcreatepnl": {

          "viewType": "XML",

          "transition": "slide",

          "clearControlAggregation": false,

          "viewName": "createpnl"

        }

      }

    },

    "rootView": {

      "viewName": "employeeapplication.view.App",

      "type": "XML",

      "async": true,

      "id": "App"

    }

  },

  "sap.cloud": {

    "public": true,

    "service": "employeeapplication"

  }

}

And my PersonalDetails.js file looks like this:

sap.ui.define([
"sap/ui/core/UIComponent"
], function(UIComponent) {
"use strict";

return UIComponent.extend("employeeapplication.SharedBlocks.PersonalDetails", {
metadata: {
properties: {
// your properties here
}
},

init: function() {
// your initialization code here
}
});
});

error in console  I am facing .

[junwu]

what cool thing you are trying to do?

[Prajwal_N1]

"Thanks for asking! I'm trying to load a component in my SAPUI5 application, but I'm running into an error. I've posted my manifest.json and PersonalDetails.js code above, but I forgot to include the XML code. Let me add that in.

pnl.view.xml

<mvc:View xmlns:form="sap.ui.layout.form" controllerName="employeeapplication.controller.pnl"
	xmlns:personal="employeeapplication.SharedBlocks.PersonalDetails"
	> 
<ObjectPageSection id="_IDGenObjectPageSection235" titleUppercase="false" title="Finance Project Details">
            <subSections>
                <ObjectPageSubSection id="financeDetailsId8" titleUppercase="false"  >
                    <blocks>
                     <personal:PersonalDetails id="_IDGenPersonalDetails1"/>
                    </blocks>
                </ObjectPageSubSection>
            </subSections>
        </ObjectPageSection>

sharedBlocks/personalDetails/PersonalDetails.view.xml

<mvc:View xmlns:mvc="sap.ui.core.mvc" xmlns:forms="sap.ui.layout.form" xmlns="sap.m">
<form:SimpleForm id="_IDGenSimpleForm131" 
						editable="false"
					layout="ResponsiveGridLayout"
					labelSpanL="1"
					labelSpanM="2"
					emptySpanL="0"
					emptySpanM="0"
					columnsL="0"
					columnsM="0">
					<form:content>
						<m:Label id="_IDGenLabe132" text="Employee Id" />
						<m:Input id="_IDGenText1213" value="{Empid}"  enabled="false" />
						<m:Label id="_IDGenLabel231" text="Currency" />
						<m:Input  id="_IDGenText11223" value="{Curr}" enabled="false" />
						<m:Label id="_IDGenLabe1243" text="CTC" />
						<m:Input id="_IDGenText11233" value="{Ctc}" enabled="false" />
						<m:Label id="_IDGenLabel2231" text="Gross Salary " />
						<m:Input id="_IDGenText112231" value="{GrossSal}" enabled="false" />
						<m:Label id="_IDGenLabel2831" text="Days " />
						<m:Input id="_IDGenText112241" value="{Day_S}" enabled="false" />
						<m:Label id="_IDGenLabel2241" text="Joining Date" />
						<m:Input id="_IDGenText112251" value="{JoiningData}" enabled="false" />
					</form:content>
						</form:SimpleForm>

</mvc:View>

I'm trying to figure out what's causing the issue and how to fix it. 

[junwu]

Why it is not in the webapp folder?