I have created an SPFx solution and started with the 'HelloWorld' WebPart, then I decided to add an extension to the same solution in order to manage the header of the pages by injecting some external CSS and JS libraries such as jQuery and Bootstrap. Here are the commands that I used:
PowerShell commands to create the solution
- md sp-solution-hub
- cd sp-solution-hub
- yo @microsoft/sharepoint
Then 'gulp serve' to see the new WebPart in debug mode. After that, I decided to add a new extension to the same solution.
PowerShell commands to add an extension to the SPFx solution
- yo @microsoft/sharepoint
- Then choose to add an extension instead of a WebPart
Now, if I run 'gulp serve' I can see that the extension is working properly. But if I deploy the solution to SharePoint Online, I can see the WebPart but not the extension.
Here are the PowerShell commands to package the SPFx solution
- gulp clean
- gulp build
- gulp bundle --ship
- gulp package-solution --ship
After, troubleshooting and researching the issue I found out that when adding an extension to an existing SPFx solution that includes WebParts only, the yeoman scaffolding is updating the 'package-solution.json' by adding the features section and it contains the version of the extension.
In order to force SharePoint to recognize the new extension, I had to modify the feature version in the 'package-solution.json' file. This can be a different number than the version number of the solution, but it is recommended to keep them the same, as per the following figure:
After deployment you will notice that the version number is changed in SharePoint App Catalog as per the following figure:
I hope this helps, let me know if you have any question.