Sp-dev-docs: I unable to build package for SPfx 1.5 version

[rajput9997]

Category

• [x] Question
• [ ] Typo
• [x] Bug
• [ ] Additional article idea

I created SPFx webpart solution along with ReactJs framework. while I build the package solution using gulp bundle --ship, I unable to finish build successfully and following error showing into logged.

The build failed because a task wrote output to stderr.

I believe due to above screenshot error, i unable to complete gulp package-solution --ship. I've used includeClientSideAssets": true into package-solution.json file.

My Attempts:

I checked all version of packages and all are updated. I've confirmed through npm updated.

I executed following command to get clean and again build the solution.

gulp clean
gulp build
gulp build --ship (failed on this case and error shown above screenshot)

Following attached screenshot for package.json file

I'm not sure what is missing part from my end?

Thanks!

[PooLP]

Hi,
React 16 don't work with 1.5.0 Framework, use React 15.

{
  "name": "webpart-hello-world-react-1-5-0",
  "version": "0.0.1",
  "private": true,
  "engines": {
    "node": ">=0.10.0"
  },
  "scripts": {
    "build": "gulp bundle",
    "clean": "gulp clean",
    "test": "gulp test"
  },
  "dependencies": {
    "react": "15.6.2",
    "react-dom": "15.6.2",
    "@types/react": "15.6.6",
    "@types/react-dom": "15.5.6",
    "@microsoft/sp-core-library": "1.5.0",
    "@microsoft/sp-webpart-base": "1.5.0",
    "@microsoft/sp-lodash-subset": "1.5.0",
    "@microsoft/sp-office-ui-fabric-core": "1.5.0",
    "@types/webpack-env": "1.13.1",
    "@types/es6-promise": "0.0.33"
  },
  "devDependencies": {
    "@microsoft/sp-build-web": "1.5.0",
    "@microsoft/sp-module-interfaces": "1.5.0",
    "@microsoft/sp-webpart-workbench": "1.5.0",
    "gulp": "~3.9.1",
    "@types/chai": "3.4.34",
    "@types/mocha": "2.2.38",
    "ajv": "~5.2.2"
  }
}

[rajput9997]

Hi @PooLP , Thanks for your promptly response. I upgraded package solution back to react 15 version and installed into project as well globally but it doesn't resolve my issue yet.

[PooLP]

After downgrading, delete package-lock.json file en node_modules, lib, dist and temp directory and re-run npm install, after, run gulp bundle --ship and gulp package-solution --ship

[valpvt]

Hi folks,
I have same issue after trying to upgrade from 1.4.1 to 1.5.0. I have already removed the package-lock.json and reinstalled all node modules without success.
It does not prevent from having a final package but for instance the styles are not applied to my ApplicationCustomizer extension.

[PooLP]

which version of node.js/npm you are using ?

[rajput9997]

The steps doesn't help out to resolve the issue and showing same error.
nodejs version - v8.5.0
npm version - 6.1.0

[valpvt]

nodejs version - v8.11.2
npm version - 6.1.0

[PooLP]

This day, I will test this https://github.com/waldekmastykarz/docker-spfx, i don't have your problem, but I have anothers problems

[maximreynaud]

Hello,
I have the same problem.

nodejs version - v8.11.2
npm version - 6.1.0

[PooLP]

I have tested on docker image and i don't have problem

Images on Docker Store : https://hub.docker.com/r/waldekm/spfx/
Tuto : https://blog.mastykarz.nl/sharepoint-framework-docker/
Docker + SPFx 1.5.0 : https://blog.mastykarz.nl/sharepoint-framework-1-5-0-docker-image-caveats/

[valpvt]

Hi @PooLP
I have tried the same with the Docker image from @waldekmastykarz and I encountered the same error. So it does not depend on the node/npm environment

[waldekmastykarz]

Have you tried creating a new project from scratch and comparing the differences between the new one and yours just to be sure you haven't missed anything?

[valpvt]

@waldekmastykarz Yes I have compared the files in the config folder and gulpfile, tsconfig, .yo-rc.jspackage.json but did not find anything.
Actually it seems to be related to sass in --ship mode, I notice that I can deploy the final package and assets but I don't have the CSS applied to my ApplicationCustomizer extension.
I hope it can give you a clue?

[waldekmastykarz]

Thanks for the additional info @val0o. Are you getting the same issue with a vanilla [email protected] project?

[valpvt]

@waldekmastykarz Indeed, I have the same issue with a vanilla SPFx ApplicationCustomizer extension

[waldekmastykarz]

@val0o that might be worth submitting a separate issue. With [email protected] coming soon it would be good to have it double checked by the engineering

[rajput9997]

@waldekmastykarz @val0o - Hi All, I've producing the same error even in new project. When i updated to 1.4.1 version, it seem to working fine.

[GwSoJ]

I can confirm that the default build of the hello-world webpart also has the --ship error. Same error exaclty as is mentioned above. I have built and packaged multiple solutions with this hardware before so this is new. I also built a brand new machine and ran through the tutorial exactly and I am getting the same --ship error on that new machine also.

[nateforsyth]

I as well can confirm that the update from 1.4.1 to 1.5.0 caused the issue encountered by the OP.

I'm pretty new to all of this, thought I'd share my steps to roll back to version 1.4.1.

Firstly, uninstall the sp-* packages.
npm uninstall @microsoft/sp-dialog
npm uninstall @microsoft/sp-application-base
npm uninstall @microsoft/decorators
npm uninstall @microsoft/sp-core-library
npm uninstall @microsoft/sp-listview-extensibility
npm uninstall @microsoft/sp-lodash-subset
npm uninstall @microsoft/sp-office-ui-fabric-core
npm uninstall @microsoft/sp-webpart-base
npm uninstall @microsoft/sp-build-web
npm uninstall @microsoft/sp-webpart-workbench
npm uninstall @microsoft/sp-extension-base
npm uninstall @microsoft/sp-http
npm uninstall @microsoft/sp-module-interfaces

Next I reinstalled the desired versions of each.
npm install @microsoft/[email protected] --save
npm install @microsoft/[email protected] --save
npm install @microsoft/[email protected] --save
npm install @microsoft/[email protected] --save
npm install @microsoft/[email protected] --save
npm install @microsoft/[email protected] --save
npm install @microsoft/[email protected] --save
npm install @microsoft/[email protected] --save
npm install @microsoft/[email protected] --save
npm install @microsoft/[email protected] --save
npm install @microsoft/[email protected] --save
npm install @microsoft/[email protected] --save
npm install @microsoft/[email protected] --save

I then pruned and cleared the cache.
npm-prune
npm cache clean --force

Clean, build, and shrinkwrap.
gulp clean
gulp build
npm shrinkwrap

I've then tested in the workbench prior to building a shipping package and deploying to a test tenant.

[VesaJuvonen]

We are closely looking into fixing this soon. Thanks for reporting.

[1011RKP]

i am also having the same Issue...
is this issue got resolved...
Please suggest any fix

[GrahamMcMynn]

Could somebody help clarify the issue? I see the issue:
The build failed because a task wrote output to stderr.
Exiting with exit code: 1

That is an extraneous error that doesn't actually affect things. It is printed because of the following message being written to stderr:
[13:21:52] [typescript] TypeScript version: 2.4.2
Warning: no-duplicate-case rule is deprecated. Replace your usage with the TSLint no-duplicate-switch-case rule.
Warning: valid-typeof rule is deprecated. Replace your usage with the TSLint typeof-compare rule.

That being said, you can still package your solution etc. Is there a scenario that this is blocking somebody from completing? Sorry if I'm totally missing something.

If that error is bugging you, it is possible to fix your solution by following the instructions in the error. You can change no-duplicate-case to no-duplicate-switch-case in ./temp/tslint.json as well as remove valid-typeof (typeof-compare has also been deprecated and is redundant in 2.4.1).

All that being said, it does show up as an error and we will fix it, but I want to understand what is currently blocked incase I am missing something.

Thanks!
Graham

[valpvt]

Hi @mcmynn83, in my case I have a mix of extensions and webparts in my project. Indeed despite the error messages I can get a valid package to deploy. However I notice that the sass classes applied to my extension are not applied, which was working with 1.4.1.
I guess it is fixed in 1.5.1 with the following

Fixed the issue in the yeoman generator that blocked you from creating different types of components in your package

I did not test yet with this version

[VesaJuvonen]

HI @val0o, that fix is not actually for fixing anything in the Sass side, so it will not fix this in 1.5.1. That issue clearly got buried in these comments as this issue was around the unnecessary exception message with bundling. If the sass packaging is an issue for you, please do open up a new issue as we cannot track multiple problems in one issue - since they will be also assigned to different persons internally.

sorry for missing that, but having it as the separate report will absolutely help on providing it the needed attention.

[valpvt]

Thanks for your answer @VesaJuvonen , so I open a new ticket for the Sass issue

[rajput9997]

Hi - I upgraded my package solution to 1.5.1 version and quickly test existing project as well create a new framework project, I've troubleshoot with same error and due to failed of build --ship I unable to see any deployment assets files inside the temp/Deploy folder. I wondering to see to be working fine after downgrading to 1.4.1.
Is it related to package version?

[gzhou2018]

Have the same issues anyone has the solution?

[a2life]

edit I did not read mcmynn83 's comment before posting this.endEdit
I was having the same issue so I rerouted stderr out to erro file and here is what I saw

gulp --ship 2>error.txt

 Warning: no-duplicate-case rule is deprecated. Replace your usage with the TSLint no-duplicate-switch-case rule.
 Warning: valid-typeof rule is deprecated. Replace your usage with the TSLint typeof-compare rule.
 Warning - tslint - src/webparts/helloWorld/HelloWorldWebPart.ts(131,31): error semicolon: Missing semicolon
 Warning - tslint - src/webparts/helloWorld/HelloWorldWebPart.ts(145,11): error semicolon: Missing semicolon
The build failed because a task wrote output to stderr.

So all the TSlint output is going to stderr . If I follow the recommendations in the error output, it still complained "typeof-compare' is now internally handled by TypeScript 2.2 and above etc.,", so I removed
the option and added semicolons to the source file.

go to config/tslint.json and modify as follows
"no-duplicate-case" -> "no-duplicate-switch-case"
delete "valid-typeof" line
set "semicolon" to false, or correct the source file.

save

Now gulp --ship works in my environment. using version 1.5.1

ps. Checked with 1.4.1 environment and indeed the linter output the same messages to stderr. However, gulp --ship dont seem to care.

[PooLP]

@a2life @mcmynn83 it work for me and solves this issue : https://github.com/SharePoint/sp-dev-docs/issues/2077 ... thanks!

[maximreynaud]

@a2life thanks a lot

[VesaJuvonen]

Closing as a fixed one. Thanks, everyone for confirming and reporting.

[msft-github-bot]

Issues that have been closed & had no follow-up activity for at least 7 days are automatically locked. Please refer to our wiki for more details, including how to remediate this action if you feel this was done prematurely or in error: Issue List: Our approach to locked issues