Skip to main content

Some common SPFX solution deployment errors like - Component ID {0} exists in solution {1} already

In this article, we are going to learn about some common error we faced while developing and deploying the SPFx solution. There are several mistakes we make while working with the exsisting code, I will be sharing the solution to get rid from those errors.

Error 1 :

When you create a solution and run with the gulp everything seems fine but when you deploy the package to app catalog you see these errors :

Component ID {0} exists in solution {1} already


 or 

Component ID {0} exists in solution {1} already. And having some correlation ID

or 

A solution with the same product ID already exists.  Please upload the file with the same name and replace the existing solution


Solution: 

This error stated that you are using the solution with same id which is already deployed at your app catalog. You can change the   Do the steps mentioned below:

1. Go to your solution, Under Config move to package-solution.json file and change the id. You need to replace the GUID,  GUID's can be created using online tools.

2  Once you replace the GUID, make sure you delete all the temporary files from the Release, Lib, Dist, and Debug folders. These files get created when we build the solutions.

3  Now rebuild the solution and build the package again.

4  Upload the package to app catalog and it will work now.

Note : If you are provision list with the SPFx solution and you see this error in that case you also need to change the guid you provide for provisioning list.

Error 2 :

Some time you work with the SPFx solution and you deploy your solution at app catalog very frequently without updating the version and everything seems fine and suddenly, you see this issue at the page where you added the webpart. 

Something went wrong. If the problem persists, contact the site administrator and give them the information in Technical Details. And also contain Unable to load script https://teanant-name/sites/AppCatalog/ClientSideAssets/  in the error description.

Solution : 

1  Go to your solution, Under Config move to package-solution.json file.

2  Change the version of your solution.

3  Rebuild the solution and create new package.

4  Go to your appvcatalog site and delete the exsisiting package from app catalog and also from recycle bin.

5  Upload the latest package and it will work now.

Note: If you follow the steps mentioned above and issue still persist. In that case change the browser and follow same steps.

Error 3:  

When we deploy the sharepoint assets with SPFx solution, we create elements.xml and schema.xml and  if the the format of both the file is not correct we will get the error mentioned below:

Invalid SharePoint App package. Error: Unexpected XML declaration. The XML declaration must be the first node in the document, and no white space characters are allowed to appear before it. 

Solution:

1 Go to the sharepoint folder in the solution and check the XML files you created.

2 Build the solution and create the package.

3 Deploy it again.

 You can check this blog : How to provision list with SPFx solution

Error 4: 

There were errors when validating the App manifest.: Xml Validation Exception: 'The 'Name' attribute is invalid - The value '-client-side-solution' is invalid according to its datatype

Solution:

This error stated that the client side solution name is not correct. Client side solution name should not begin with the special character.

1  Go to your solution, Under Config move to package-solution.json file.

2  Change the name of client solution.

3  Rebuild and deploy tha package again.

Thanks!!!

If you want to set up multiple node versions on your machine

Labels:

Comments

Post a Comment

Popular posts from this blog

SPFx Interview Questions With Answers

In this article, we are going to discuss interview questions related to the SPFx (SharePoint Framework Development ). It will help you to prepare for the interview and in getting clarity on the core concepts of SPFx development. What is SPFx? SPFx, short for SharePoint Framework,  SPFx  allows us for client-side SharePoint development, we can easily connect with SharePoint data and it also supports for open source tools. What is the major difference between SPFx web part and the SharePoint app? Both the development model supports client-side development but the major difference between these two is that the SharePoint app(add-in) runs on the iframe. What you can build with SPFx? Using SPFx framework we can customize the SharePoint pages. We can build things mentioned below using the SharePoint Framework(SPFx). Web parts, Extensions, Adaptive Card, Library Component How many types of extensions we can create using SPFx? SPFx has three extension types: Application Customizers: U...
2 comments
Read more

How to register an app in SharePoint

In this article, we are going to learn how to register an app/add-in in SharePoint online. If you have created a Sharepoint provider-hosted add-in or other SharePoint solution and to access the SharePoint site or list using the app/add-in you need to register the add-in on SharePoint and to grant permission. Register app in SharePoint 1. Login into SharePoint and Navigate to register an app page. Use the URL mentioned below:          [Sitecollection URL]/_layouts/15/appregnew.aspx 2.  Once you navigate to the Register app page, a form will open. You need to fill all the fields on the form. Client Id and Client Secret  generated when we click on the generate button available next to the fields.  Title : Name of the add-in which you want to give. App Domain : Where your domain is hosted, for the local environment you can place             "www.localhost.com". Do not include HTTP or HTTPS...
Post a Comment
Read more

SharePoint Framework SPFx Node Version Compatibility

How to check the compatibility between the SPFx version and the Node.js version The SharePoint Framework (SPFx) is a client-side development platform used to develop web parts and extensions for SharePoint. The SharePoint Framework (SPFx) is compatible with the Node.js versions. Existing SPFx solutions may have different SPFx versions as compared to the current solutions. To make the SPFx solution run, Node.js is required, and in this blog, I am sharing steps to check the compatible node module for SPFx.  Find the SPFx version from the solution:  Open the project solution and navigate to the "package.json" file. In package.json file you will find  "@microsoft/sp-core-library" key and value of this particular key is the version of the SPFx.       Ex:    "@microsoft/sp-core-library": "1.14.0" Another way to find the SPFx version is by command, open the command prompt and run the command mentioned below: npm ls -g --depth=0 @microsoft/generator-s...
Post a Comment
Read more