SPFx - Resolved Error Of 'Gulp Package - Solution' - "the WebParts Manifests List Is Empty. Please Ensure You Have Done A Build And That Your Config File Is Pointed At The Correct Folder"

In this article we will discuss one of the errors we are facing while deploying (packaging the solution) the SPFX component to my O365 tenant.

Background

 
 We have our Intranet application and SPFX components (Extensions and WebParts) developed. We have a few changes in our SPFX components and we need to deploy those at our tenant. 
 
We used to deploy our SPFX components using the following gulp command and I executed those,
  • gulp clean
  • gulp build
  • gulp bundle
  • gulp package-solution –ship
So, I was executing the gulp command. gulp build and gulpbundle got executed successfully but having the below error on execution of gulp package-solution --ship. I never went into the details of gulp commands (focusing on SPFX components logic :) ) but because of this error, I went into the details, looking for why the command failed. 
 

Error

 
The webparts manifests list is empty. Please ensure you have done a build and that your config file is pointed at the correct folder.
 
Error – ‘package-solution’ sub task errored after 66 ms
 
at Object.createPackage [as default] (C:\CodeBase\KnowledgeJunction.Intranet.Webparts\node_modules\@microsoft\sp-build-core-tasks\lib\packageSolution\packageSolution\createPackage.js:25:19)
 
at DestroyableTransform.gulp.src.pipe.through2.obj [as _flush] (C:\CodeBase\KnowledgeJunction.Intranet.Webparts\node_modules\@microsoft\sp-build-core-tasks\lib\packageSolution\PackageSolutionTask.js:116:36)
 
at DestroyableTransform.prefinish (C:\CodeBase\KnowledgeJunction.Intranet.Webparts\node_modules\through2\node_modules\readable-stream\lib\_stream_transform.js:138:10)
 
at DestroyableTransform.emit (events.js:180:13)
 
at prefinish (C:\CodeBase\KnowledgeJunction.Intranet.Webparts\node_modules\through2\node_modules\readable-stream\lib\_stream_writable.js:619:14)
 
at finishMaybe (C:\CodeBase\KnowledgeJunction.Intranet.Webparts\node_modules\through2\node_modules\readable-stream\lib\_stream_writable.js:627:5)
 
at endWritable (C:\CodeBase\KnowledgeJunction.Intranet.Webparts\node_modules\through2\node_modules\readable-stream\lib\_stream_writable.js:638:3)
 
at DestroyableTransform.Writable.end (C:\CodeBase\KnowledgeJunction.Intranet.Webparts\node_modules\through2\node_modules\readable-stream\lib\_stream_writable.js:594:41)
 
at DestroyableTransform.onend (C:\CodeBase\KnowledgeJunction.Intranet.Webparts\node_modules\vinyl-fs\node_modules\readable-stream\lib\_stream_readable.js:523:10)
 
at Object.onceWrapper (events.js:272:13)
 
at DestroyableTransform.emit (events.js:185:15)
 
at C:\CodeBase\KnowledgeJunction.Intranet.Webparts\node_modules\vinyl-fs\node_modules\readable-stream\lib\_stream_readable.js:965:16
to “https://publiccdn.sharepointonline.com/knowledgejunction.sharepoint.com/CDN/“, however, the “includeClientSideAssets” setting in “config/package-solution.json” is “true” and will be ignored. If you meant to deploy your assets in your SPPKG to SharePoint, reset the value of “cdnBasePath” to “<!– PATH TO CDN –>”.
 
No manifests were found in ‘*.json’. Ensure a build has completed successfully and that paths.manifestsMatch is correct.
 

Solution

 
Here, I won’t go into gulp command details. For more details, please find URLs in the references section. Let us go directly to the solution. 
 
This is very strange actually since it's very rare to see an error during packaging the solution. Generally, the error happens at the build or bundle level.
 
I was wondering what's wrong happening here. I again went through the commands I executed.
  • gulp build
  • gulp bundle
  • gulp package-solution –ship
I observed that I didn’t use –ship attribute with gulp bundle command.
 
When I again executed commands and gulp bundle with –ship attribute, the package was created successfully 🙂.
 
So here, I’d like to explain what actually –ship parameter does with gulp bundle command. 
 
Gulp bundle command - gulp bundle command without –ship bundles all TypeScript files and their dependencies from node_modules into a single JavaScript compiled file and saved in lib folder but files are not copied into temp/deploy folder. This is a very important point to understand.
 
Gulp bundle –ship – with –ship attribute minified .js files are created in temp/deploy folder which we requires to upload in CDN provider. –ship is for build tool to indicate build is for distribution. These minified files are copied into the temp/deploy folder.
 
I hope this will help you to understand the concept in more detail.
 
References