Since SPFx 1.8.2 supports Node.js 10, it's a best practice to upgrade Node.js. We have a SPFx 1.7.1 that has been developed for over six month. What I did is to upgrade the SPFx to 1.8.2 first and then upgrade Node.js to 10. Here is the complete upgrade procedure based on our upgrade experience. There are few previous upgrade articles you may found useful.
1. Make a copy of the current project before upgrading. Run the following command to see the upgrade scope.
npm outdated
Here is what I have for my project. You can verify your SPFx version. In this case it's 1.7.1.
2. Install office365-cli upgarde command package using the following command. This is recommend upgrade method.
npm install -g @pnp/office365-cli
3. Use cli to generate upgrade instructions as the following command. Please run this command at the root of the project. The instruction will be saved to a file named "upgrade.md" displayed in the below screenshot.
o365 spfx project upgrade -o md > upgrade.md
4. Follow the each step in "upgrade.md" file to upgrade all the necessary packages. Each command has the instruction in the "upgrade.md" file. You might need to add "," for few lined added like the one below.
### FN012017 tsconfig.json extends
property | Required
Update tsconfig.json extends
property
In file [./tsconfig.json](./tsconfig.json) update
the code as follows:
```json
{
"extends": "./node_modules/@microsoft/rush-stack-compiler-2.9/includes/tsconfig-web.json"
}
```
File: [./tsconfig.json](./tsconfig.json)
This is the line you need to add "," at the end.
"extends": "./node_modules/@microsoft/rush-stack-compiler-2.9/includes/tsconfig-web.json",
"supportedHosts": ["SharePointWebPart"],
5. Run the following command to identify any missing third party components. Please pay attention to the packaged in RED.
npm outdated
You might need to reinstall them and here are the two we used.
npm install react-select --save
npm install @types/react-select –save
6. Upgrade other package in RED like @pnp/sp using the following command.
npm install @pnp/logging @pnp/common @pnp/odata @pnp/sp –save
7. Try to clean and build the project and fix any issue. You may not have any compilation error but you should open the source file one by one to verify if there is any error. In our case, we have one error on the "TeachingBubble" Office fabric UI component as below. However, the gulp did not catch the error.
This is the change we made to fix this error.
{isTeachingBubbleVisible ? (
<div>
<TeachingBubble
targetElement={this._menuButtonElement}
hasSmallHeadline={true}
onDismiss={this._onTipDismiss}
hasCloseIcon={true}
primaryButtonProps={examplePrimaryButton}
headline="Some useful tip here.
Boom!"
/>
Some notes here about
publiations and submissions. Could
include link to a web
page with additional details.
</div>
) : null}
During future upgrade, some react component may be changed and you will need to upgrade the code to latest implementation.
Please double check all source files and ensure no compilation error.
8. Upgrade Visual Studio code to latest version that is 1.33. at this time. This is recommended but not required.
10. Compile the project and verify everything work as expected.
gulp build
gulp serve
11. Upgrade Node.js to 10 that is recommended but not required.
Remove the existing Node.js 8 from "Apps & features". Then download Node.js 10 and install. You could verify the new version using the following command. You could "ctr' + click" to open the file needs to be modified.
node -v
12. You may upgrade npm also.
npm install -g npm@latest
13. Upgrade gulp and yeomen generator using the following commands. You should also verify the generator version.
npm install -g yo gulp
npm view @microsoft/generator-sharepoint version
14. Rebuild environment related to new gulp and Node.js using the following command.
npm rebuild node-sass
15. Build the project and verify again.
gulp clean
gulp build
gulp serve
At this time, you should have the upgraded SPFx project. However, we found we have to use different generator to create new new SPFx project in 1.8.2 version. The detailed commands are listed below.
npm install -g @pnp/generator-spfx
yo @pnp/spfx
The project generated will use SPFx 1.8.2. I'm not sure if tehre is a way to use existing command yo @microsoft/sharepoint to create SPFx 1.8.2 project.
