M365 – SharePoint Online – 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”

Hi All,

Today new issue and new resolution 🙂

Issue is because my mistake but lesson learned so thought to share. Sharing is caring 🙂

Background: We have our Intranet application and SPFX components (Extensions and WebParts) developed. We have few changes in our SPFX components and we need to deploy those at our tenant. 

We used to deploy our SPFX components using 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 gulp bundle get executed successfully but having an below error on execution of gulp package-solution

I never went to the details of gulp commands but because of this error I went to bit details. Let’s discuss and have a fun 🙂

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 to gulp command details. For more details please find URLs in references section. Directly go to the solution. 

This is very strange actually since its very rare to see error during packaging the solution. Generally error happens at build or bundle level.

I was wondering what wrong happening here. I again went through the command which I executed as

• 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, package created successfully 🙂

So here I’ll 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 its dependencies from node_modules into a single JavaScript compiled file and saved in lib folder but files are not in get copied into temp/deploy folder. This is 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 temp/deploy folder.

I hope this will help to understand the concept in more detail.

References:

1. gulp quick start
2. What is gulp?
3. Introduction to Gulp
4. Gulp for Beginners
5. deploy vs. dist vs. lib – On SharePoint Framework build folders

Thanks for reading 🙂

Keep reading, share your thoughts, experiences. Feel free to contact us to discuss more.

If you have any suggestion / feedback / doubt, you are most welcome.

Stay tuned on Knowledge-Junction, will come up with more such articles.