Sp-dev-fx-webparts: Running gulp package-solution gives errors unless gulp serve has been run previously

[SPDoctor]

Category

• [ ] Question
• [x] Bug
• [ ] Enhancement

Expected or Desired Behavior

A solution package should be created using gulp package-solution from a newly scaffolded SPFx solution without errors.

Observed Behavior

If you scaffold a solution and immediately attempt to use gulp package-solution you get errors. If you first do gulp serve, a subsequent attempt at gulp package-solution succeeds. This suggests that there is an error in the gulp dependencies, and that the package-solution task should have a dependency on webpack, write-manifests, copy-assets etc. Note that running gulp build does not solve the problem, you have to go through the gulp serve path.

Steps to Reproduce

Run SharePoint Yeoman generator to create a new SPFx solution using basic JavaScript HelloWorld web part: yo @microsoft/sharepoint. Immediately try to create the deployment package using gulp package-solution.

Example Output

PS C:\Users\BillA\Documents\Projects\OfficeDev\DeployTest1> gulp package-solution
Build target: DEBUG
[17:33:19] Using gulpfile ~\Documents\Projects\OfficeDev\DeployTest1\gulpfile.js
[17:33:19] Starting gulp
[17:33:19] Starting 'package-solution'...
[17:33:19] Starting subtask 'package-solution'...
[17:33:19] Verifying configuration...
TypeError: error is not a function
    at Object.createPackage [as default] (C:\Users\BillA\Documents\Projects\OfficeDev\DeployTest1\node_modules\@microsoft\sp-build-core-tasks\lib\packageSolution\packageSolution
reatePackage.js:58:9)
    at DestroyableTransform._flush (C:\Users\BillA\Documents\Projects\OfficeDev\DeployTest1\node_modules\@microsoft\sp-build-core-tasks\lib\packageSolution\PackageSolutionTask.j
70:36)
    at DestroyableTransform.<anonymous> (C:\Users\BillA\Documents\Projects\OfficeDev\DeployTest1\node_modules\through2\node_modules\readable-stream\lib\_stream_transform.js:115:
)
    at DestroyableTransform.g (events.js:291:16)
    at emitNone (events.js:86:13)
    at DestroyableTransform.emit (events.js:185:7)
    at prefinish (C:\Users\BillA\Documents\Projects\OfficeDev\DeployTest1\node_modules\through2\node_modules\readable-stream\lib\_stream_writable.js:494:12)
    at finishMaybe (C:\Users\BillA\Documents\Projects\OfficeDev\DeployTest1\node_modules\through2\node_modules\readable-stream\lib\_stream_writable.js:502:7)
    at endWritable (C:\Users\BillA\Documents\Projects\OfficeDev\DeployTest1\node_modules\through2\node_modules\readable-stream\lib\_stream_writable.js:514:3)
    at DestroyableTransform.Writable.end (C:\Users\BillA\Documents\Projects\OfficeDev\DeployTest1\node_modules\through2\node_modules\readable-stream\lib\_stream_writable.js:484:
)
    at DestroyableTransform.onend (C:\Users\BillA\Documents\Projects\OfficeDev\DeployTest1\node_modules\vinyl-fs\node_modules\readable-stream\lib\_stream_readable.js:523:10)
    at DestroyableTransform.g (events.js:291:16)
    at emitNone (events.js:91:20)
    at DestroyableTransform.emit (events.js:185:7)
    at C:\Users\BillA\Documents\Projects\OfficeDev\DeployTest1\node_modules\vinyl-fs\node_modules\readable-stream\lib\_stream_readable.js:965:16
    at _combinedTickCallback (internal/process/next_tick.js:73:7)
[17:33:19] Error - Unknown
 error is not a function
[17:33:19] Error - 'package-solution' sub task errored after 128 ms
 No manifests were found in 'dist\*.json'. Ensure a build has completed successfully and that paths.manifestsMatch is correct
[17:33:19] 'package-solution' errored after 148 ms
[17:33:19]
[17:33:20] ==================[ Finished ]==================
Error - Unknown
 error is not a function
Error - 'package-solution' sub task errored after 128 ms
 No manifests were found in 'dist\*.json'. Ensure a build has completed successfully and that paths.manifestsMatch is correct
[17:33:20] Project deploy-test-1 version: 0.0.1
[17:33:20] Build tools version: 2.5.1
[17:33:20] Node version: v6.10.1
[17:33:20] Total duration: 9.26 s
[17:33:20] Task errors: 3
[17:33:20] Error - 'undefined' errored after
 "orchestration aborted"

[waldekmastykarz]

Actually it would be sufficient to run gulp bundle, nevertheless the dependency is there and should be made explicitly in the package-solution task.

[devoooo4u]

I have the similar Issue. I have created a simple solution with 'Hello world' Extension and facing this issue while running gulp serve. Please refer the stacktrace:
λ gulp serve --nobrowser
Build target: DEBUG
[15:11:40] Using gulpfile D:\xxxx\Resources\sp-extentions\gulpfile.js
[15:11:40] Starting gulp
[15:11:40] Starting 'serve'...
[15:11:40] Starting subtask 'configure-sp-build-rig'...
[15:11:40] Finished subtask 'configure-sp-build-rig' after 37 ms
[15:11:40] Starting subtask 'spfx-serve'...
[15:11:41] Finished subtask 'spfx-serve' after 498 ms
[15:11:41] Starting subtask 'pre-copy'...
[15:11:41] Finished subtask 'pre-copy' after 28 ms
[15:11:41] Starting subtask 'copy-static-assets'...
[15:11:41] Starting subtask 'sass'...
{ Error: listen EADDRINUSE :::4321
at Object.exports._errnoException (util.js:1018:11)
at exports._exceptionWithHostPort (util.js:1041:20)
at Server._listen2 (net.js:1262:14)
at listen (net.js:1298:10)
at Server.listen (net.js:1394:5)
at ConnectApp.run (D:\xxxx\Resources\sp-extentions\node_modules\gulp-connect\index.js:82:24)
at new ConnectApp (D:\xxxx\Resources\sp-extentions\node_modules\gulp-connect\index.js:50:10)
at Object.server (D:\xxxx\Resources\sp-extentions\node_modules\gulp-connect\index.js:219:11)
at SpfxServeTask.ServeTask.executeTask (D:\xxxx\Resources\sp-extentions\node_modules\@microsoft\gulp-core-build-serve\lib\ServeTask.js:53:21)
at SpfxServeTask.executeTask (D:\xxxx\Resources\sp-extentions\node_modules\@microsoft\sp-build-core-tasks\lib\spfxServe\SpfxServeTask.js:51:45)
at D:\xxxx\Resources\sp-extentions\node_modules\@microsoft\gulp-core-build\lib\tasks\GulpTask.js:179:32
at SpfxServeTask.GulpTask.execute (D:\xxxx\Resources\sp-extentions\node_modules\@microsoft\gulp-core-build\lib\tasks\GulpTask.js:171:16)
at _executeTask (D:\xxxx\Resources\sp-extentions\node_modules\@microsoft\gulp-core-build\lib\index.js:364:42)
at D:\xxxx\Resources\sp-extentions\node_modules\@microsoft\gulp-core-build\lib\index.js:265:59
at process._tickCallback (internal/process/next_tick.js:109:7)
at Module.runMain (module.js:606:11)
code: 'EADDRINUSE',
errno: 'EADDRINUSE',
syscall: 'listen',
address: '::',
port: 4321 }
[15:11:42] Error - Unknown
listen EADDRINUSE :::4321
[15:11:42] Finished subtask 'sass' after 1.28 s
[15:11:42] Starting subtask 'tslint'...
[15:11:43] Starting subtask 'typescript'...
[15:11:43] [typescript] TypeScript version: 2.4.2
[15:11:44] ==================[ Finished ]==================
Error - Unknown
listen EADDRINUSE :::4321
[15:11:44] Finished subtask 'copy-static-assets' after 2.59 s
[15:11:44] Finished subtask 'tslint' after 1.3 s
[15:11:45] Finished subtask 'typescript' after 2.2 s
[15:11:45] Starting subtask 'ts-npm-lint'...
[15:11:45] Finished subtask 'ts-npm-lint' after 13 ms
[15:11:45] Starting subtask 'api-extractor'...
[15:11:45] Finished subtask 'api-extractor' after 1.28 ms
[15:11:45] Starting subtask 'post-copy'...
[15:11:45] Finished subtask 'post-copy' after 1.09 ms
[15:11:45] Starting subtask 'collectLocalizedResources'...
[15:11:45] Finished subtask 'collectLocalizedResources' after 9.14 ms
[15:11:45] Starting subtask 'configure-webpack'...
[15:11:46] Finished subtask 'configure-webpack' after 626 ms
[15:11:46] Starting subtask 'webpack'...
[15:11:46] Project sp-extentions version: 0.0.1
[15:11:46] Build tools version: 3.0.5
[15:11:46] Node version: v6.10.2
[15:11:46] Total duration: 8.5 s
[15:11:46] Task errors: 2
[15:11:46] Error - 'undefined' errored after
"orchestration aborted"
[15:11:46] Finished subtask 'webpack' after 355 ms
[15:11:46] Starting subtask 'configure-webpack-external-bundling'...
[15:11:46] Finished subtask 'configure-webpack-external-bundling' after 974 μs
[15:11:46] Starting subtask 'copy-assets'...
[15:11:46] Finished subtask 'copy-assets' after 20 ms
[15:11:46] Starting subtask 'write-manifests'...
[15:11:47] Finished subtask 'write-manifests' after 962 ms
[15:11:47] Starting subtask 'reload'...
[15:11:47] Finished subtask 'reload' after 4.47 ms

[waldekmastykarz]

@devoooo4u it seems like you have something else running on port 4321. Could it be that you're trying to serve multiple SPFx projects at the same time?

[NPrice99]

@SPDoctor's problem still exists - gulp bundle fixes it. When will this bug get fixed ?

[waldekmastykarz]

@NPrice99 I think we should start with clarifying if this is a bug indeed or if it's the intended behavior.

[NPrice99]

@waldekmastykarz how do we do that ?

[waldekmastykarz]

@VesaJuvonen, can you provide additional information?

[arunakshi]

I am also having the same issue. The SPFX solution was working with custom webparts until I added new extension. My case is as follows:

1. One colleague developed the webparts with old version of Yeoman template.
2. Yesterday, I added the extension with new template in the same spfx project. I found that there is a conflict with Versions. I updated my npm modules.
3. After that,I do not see errors with gulp bundle. But I get the following errors with gulp serve --nobrowser

Starting subtask 'copy-static-assets'...
[10:09:14] Starting subtask 'sass'...
{ Error: listen EADDRINUSE :::4321
at Object.exports._errnoException (util.js:1020:11)
at exports._exceptionWithHostPort (util.js:1043:20)
at Server._listen2 (net.js:1258:14)
at listen (net.js:1294:10)
at Server.listen (net.js:1390:5)

[arunakshi]

I could resolve this issue by changing the port number to 4322 as @waldekmastykarz suggested and then I can bundle without errors.

[mellolr1]

I can successfully run gulp clean, gulp build, gulp server and gulp bundle. When I run gulp package-solution I get this "error is not a function" error.

PS F:melloldevSPFxlist-form> gulp package-solution
Build target: DEBUG
[09:02:28] Using gulpfile F:melloldevSPFxlist-formgulpfile.js
[09:02:28] Starting gulp
[09:02:28] Starting 'package-solution'...
[09:02:28] Starting subtask 'package-solution'...
[09:02:28] [package-solution] Found manifest: F:melloldevSPFxlist-formdist837a384e-3f46-4f92-92db-0994829f229b.manifest.json
[09:02:28] Verifying configuration...
[09:02:28] Done!

[09:02:28] Normalizing solution information...
[09:02:28] Attempting creating component definitions for {1} manifests
[09:02:28] Created component definitions for {1} manifests
[09:02:28] config.solution.features not set! Instead generating a feature for each component.
[09:02:28] Creating feature for List Form...
[09:02:28] Done!

[09:02:28] Reading custom Feature XML...
[09:02:28] Done!

[09:02:28] Reading resources...
[09:02:28] Done!

[09:02:28] Reading Sharepoint Assets & Creating XML...
[09:02:28] Done!

[09:02:28] Writing solution XML to sharepointsolutiondebug...
[09:02:28] Cleaned sharepointsolutiondebug
[09:02:28] Created file: sharepointsolutiondebugAppManifest.xml
[09:02:28] Created file: sharepointsolutiondebug_relsAppManifest.xml.rels
[09:02:28] Created file: sharepointsolutiondebug837a384e-3f46-4f92-92db-0994829f229bWebPart_837a384e-3f46-4f92-92db-0994829f229b.xml
[09:02:28] Created file: sharepointsolutiondebug[Content_Types].xml
[09:02:28] Created file: sharepointsolutiondebug_rels.rels
[09:02:28] Created file: sharepointsolutiondebugfeature_837a384e-3f46-4f92-92db-0994829f229b.xml
[09:02:28] Created file: sharepointsolutiondebugfeature_837a384e-3f46-4f92-92db-0994829f229b.xml.config.xml
[09:02:28] Created file: sharepointsolutiondebug_relsfeature_837a384e-3f46-4f92-92db-0994829f229b.xml.rels
[09:02:28] Error - 'package-solution' sub task errored after 159 ms
error is not a function
[09:02:28] 'package-solution' errored after 162 ms
[09:02:28]
[09:02:29] ==================[ Finished ]==================
Error - 'package-solution' sub task errored after 159 ms
error is not a function
[09:02:29] Project list-form version: 0.0.1
[09:02:29] Build tools version: 2.5.3
[09:02:29] Node version: v8.15.1
[09:02:29] Total duration: 3.28 s
[09:02:29] Task errors: 1

[mellolr1]

I can successfully run gulp clean, gulp build, gulp server and gulp bundle. When I run gulp package-solution I get this "error is not a function" error.

I had been going back and forth between running bundle and package-solution with and without --ship and having the same result. Ran it once more with --ship without any other changes and suddenly it worked.

[anandasanyal]

It was working few minutes ago, Started giving error, nothing has changed in code or in the system. Why it's so unstable, It's quite frustrating.

[SPDoctor]

@anandasanyal, @mellolr1 I don't think your problems are directly connected to this issue. I suggest you open a new issue in GitHub.

[legendgod]

I just try to start my first project and fail to run gulp package-solution. The error message is exactly same as reported at May 2017.

Here is my environment:
Windows 10 PC
node v6.11.2
npm v3.10.10
gulp v3.9.1
[email protected]
@microsoft/[email protected]

I have tried gulp serve first (it works fine) and force stop it by Ctrl+C. Then run gulp package-solution.

[SPDoctor]

I suggest you get the LTS version of NodeJS and get the latest version of the of generator-sharepoint (1.9), yeoman and gulp, then generate a new project and see if that solves the problem.

[legendgod]

I suggest you get the LTS version of NodeJS and get the latest version of the of generator-sharepoint (1.9), yeoman and gulp, then generate a new project and see if that solves the problem.

I can work around it by run "gulp bundle --ship" first and then run "gulp package-solution --ship". Thanks.
I cannot use latest version because SP2016 only support old version. Microsoft is terrible.

[SPDoctor]

You can still use the latest Yeoman generator and select "SharePoint 2016 onwards, including 2019 and SharePoint Online" when it asks for baseline packages. This will load SPFx v1.1.0. See https://docs.microsoft.com/en-us/sharepoint/dev/spfx/sharepoint-2016-support.

I think it's unreasonable to expect Microsoft to support the latest SPFx with older versions of SharePoint.

[legendgod]

You can still use the latest Yeoman generator and select "SharePoint 2016 onwards, including 2019 and SharePoint Online" when it asks for baseline packages. This will load SPFx v1.1.0. See https://docs.microsoft.com/en-us/sharepoint/dev/spfx/sharepoint-2016-support.

I think it's unreasonable to expect Microsoft to support the latest SPFx with older versions of SharePoint.

I said Microsoft is terrible because there is no single document talk about which version SP2016 is supporting. It force everyone try and error. Before I raise my question about gulp, I have already troubleshooting for half month just to get to the this step. =(

[hugoabernier]

@SPDoctor did you ever resolve this issue?

I'll go ahead and close it as it relates to an older version of the framework.

If you're still running into this issue, feel free to open a new issue.

[SPDoctor]

@hugoabernier it now gives a message saying please build first and then throws a load more errors. That's near enough a resolution for me :-)