Node version indicated in .nvmrc file does not work

[TracyGH]

Disclaimer

Yes

Sample

https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-calendar

Contributor(s)

@Abderahman88 @Eli-Schei @joaojmendes @derhallim @mohammadamer @nanddeepn

What happened?

After successfully running npm install in the react-calendar sample directory, I attempted to run gulp build or gulp serve.
Both produced the same behavior indicated in this issue created 3 weeks ago, which was closed without a comment or resolution.

See below.

Steps to reproduce

1. I followed the main sample instructions which indicated that I should use the Node version found in the .nvmrc file.
2. I also confirmed the sample was compatible with Node v12 by reviewing its ReadMe file.
3. I confirmed the correct node version (12.13.0) by running node -v
4. Observe that the project produces the errors indicated above when trying to gulp build or gulp serve.
5. Once I switched to using Node version 14.21.3, the project worked as expected.

Expected behavior

I expected to be able to run the recommended version of Node (12.13.0) and have the project gulp build and gulp serve successfully. If that is not the case, shouldn't the compatibility section and .nvmrc file be updated?

Target SharePoint environment

SharePoint Online

Developer environment

Windows

Browsers

• Internet Explorer
• Microsoft Edge
• Google Chrome
• FireFox
• Safari
• mobile (iOS/iPadOS)
• mobile (Android)
• not applicable
• other (enter in the "Additional environment details" area below)

What version of Node.js is currently installed on your workstation?

Several, including v12.13.0

What version of Node.js is required by the sample?

v12.13.0

Paste the results of SPFx doctor

I received lots of warnings when installing the CLI for Microsoft 365 and was unable to run the m365 setup command.
Please see below for the full error.

PS C:\Users\Tracy.Sterling\Dev\sp-dev-fx-webparts-main\samples\react-calendar> npm i -g @pnp/cli-microsoft365
C:\Program Files\nodejs\m365 -> C:\Program Files\nodejs\node_modules@pnp\cli-microsoft365\dist\index.js
C:\Program Files\nodejs\m365_comp -> C:\Program Files\nodejs\node_modules@pnp\cli-microsoft365\dist\autocomplete.js
C:\Program Files\nodejs\microsoft365 -> C:\Program Files\nodejs\node_modules@pnp\cli-microsoft365\dist\index.js
C:\Program Files\nodejs\m365_chili -> C:\Program Files\nodejs\node_modules@pnp\cli-microsoft365\dist\chili\index.js
npm WARN notsup Unsupported engine for [email protected]: wanted: {"node":">=18"} (current: {"node":"14.21.3","npm":"6.14.18"})
npm WARN notsup Not compatible with your version of node/npm: [email protected]
npm WARN notsup Unsupported engine for [email protected]: wanted: {"node":">=18"} (current: {"node":"14.21.3","npm":"6.14.18"})
npm WARN notsup Not compatible with your version of node/npm: [email protected]
npm WARN notsup Unsupported engine for [email protected]: wanted: {"node":">=18"} (current: {"node":"14.21.3","npm":"6.14.18"})
npm WARN notsup Not compatible with your version of node/npm: [email protected]
npm WARN notsup Unsupported engine for @azure/[email protected]: wanted: {"node":">=16"} (current: {"node":"14.21.3","npm":"6.14.18"})
npm WARN notsup Not compatible with your version of node/npm: @azure/[email protected]
npm WARN notsup Unsupported engine for @inquirer/[email protected]: wanted: {"node":">=18"} (current: {"node":"14.21.3","npm":"6.14.18"})
npm WARN notsup Not compatible with your version of node/npm: @inquirer/[email protected]
npm WARN notsup Unsupported engine for @inquirer/[email protected]: wanted: {"node":">=18"} (current: {"node":"14.21.3","npm":"6.14.18"})
npm WARN notsup Not compatible with your version of node/npm: @inquirer/[email protected]
npm WARN notsup Unsupported engine for @inquirer/[email protected]: wanted: {"node":">=18"} (current: {"node":"14.21.3","npm":"6.14.18"})
npm WARN notsup Not compatible with your version of node/npm: @inquirer/[email protected]
npm WARN notsup Unsupported engine for @inquirer/[email protected]: wanted: {"node":">=18"} (current: {"node":"14.21.3","npm":"6.14.18"})
npm WARN notsup Not compatible with your version of node/npm: @inquirer/[email protected]
npm WARN notsup Unsupported engine for @inquirer/[email protected]: wanted: {"node":">=18"} (current: {"node":"14.21.3","npm":"6.14.18"})
npm WARN notsup Not compatible with your version of node/npm: @inquirer/[email protected]
npm WARN notsup Unsupported engine for @inquirer/[email protected]: wanted: {"node":">=18"} (current: {"node":"14.21.3","npm":"6.14.18"})
npm WARN notsup Not compatible with your version of node/npm: @inquirer/[email protected]
npm WARN notsup Unsupported engine for [email protected]: wanted: {"node":">=18"} (current: {"node":"14.21.3","npm":"6.14.18"})
npm WARN notsup Not compatible with your version of node/npm: [email protected]
npm WARN notsup Unsupported engine for @inquirer/[email protected]: wanted: {"node":">=18"} (current: {"node":"14.21.3","npm":"6.14.18"})
npm WARN notsup Not compatible with your version of node/npm: @inquirer/[email protected]
npm WARN notsup Unsupported engine for @azure/[email protected]: wanted: {"node":">=18.0.0"} (current: {"node":"14.21.3","npm":"6.14.18"})
npm WARN notsup Not compatible with your version of node/npm: @azure/[email protected]
npm WARN notsup Unsupported engine for @azure/[email protected]: wanted: {"node":">=18.0.0"} (current: {"node":"14.21.3","npm":"6.14.18"})
npm WARN notsup Not compatible with your version of node/npm: @azure/[email protected]
npm WARN notsup Unsupported engine for @azure/[email protected]: wanted: {"node":">=18.0.0"} (current: {"node":"14.21.3","npm":"6.14.18"})
npm WARN notsup Not compatible with your version of node/npm: @azure/[email protected]
npm WARN notsup Unsupported engine for @azure/[email protected]: wanted: {"node":">=18.0.0"} (current: {"node":"14.21.3","npm":"6.14.18"})
npm WARN notsup Not compatible with your version of node/npm: @azure/[email protected]
npm WARN notsup Unsupported engine for @azure/[email protected]: wanted: {"node":">=18.0.0"} (current: {"node":"14.21.3","npm":"6.14.18"})
npm WARN notsup Not compatible with your version of node/npm: @azure/[email protected]
npm WARN notsup Unsupported engine for @azure/[email protected]: wanted: {"node":">=18.0.0"} (current: {"node":"14.21.3","npm":"6.14.18"})
npm WARN notsup Not compatible with your version of node/npm: @azure/[email protected]
npm WARN notsup Unsupported engine for @azure/[email protected]: wanted: {"node":">=18.0.0"} (current: {"node":"14.21.3","npm":"6.14.18"})
npm WARN notsup Not compatible with your version of node/npm: @azure/[email protected]
npm WARN notsup Unsupported engine for [email protected]: wanted: {"node":">=16"} (current: {"node":"14.21.3","npm":"6.14.18"})
npm WARN notsup Not compatible with your version of node/npm: [email protected]
npm WARN notsup Unsupported engine for [email protected]: wanted: {"node":">=16.17"} (current: {"node":"14.21.3","npm":"6.14.18"})
npm WARN notsup Not compatible with your version of node/npm: [email protected]
npm WARN notsup Unsupported engine for [email protected]: wanted: {"node":">=18"} (current: {"node":"14.21.3","npm":"6.14.18"})
npm WARN notsup Not compatible with your version of node/npm: [email protected]
npm WARN notsup Unsupported engine for [email protected]: wanted: {"node":">=16.17.0"} (current: {"node":"14.21.3","npm":"6.14.18"})
npm WARN notsup Not compatible with your version of node/npm: [email protected]
npm WARN notsup Unsupported engine for [email protected]: wanted: {"node":">=16"} (current: {"node":"14.21.3","npm":"6.14.18"})
npm WARN notsup Not compatible with your version of node/npm: [email protected]
npm WARN notsup Unsupported engine for [email protected]: wanted: {"node":">=18"} (current: {"node":"14.21.3","npm":"6.14.18"})
npm WARN notsup Not compatible with your version of node/npm: [email protected]
npm WARN notsup Unsupported engine for [email protected]: wanted: {"node":">=18"} (current: {"node":"14.21.3","npm":"6.14.18"})
npm WARN notsup Not compatible with your version of node/npm: [email protected]
npm WARN notsup Unsupported engine for [email protected]: wanted: {"node":">=18"} (current: {"node":"14.21.3","npm":"6.14.18"})
npm WARN notsup Not compatible with your version of node/npm: [email protected]
npm WARN notsup Unsupported engine for [email protected]: wanted: {"node":">=18"} (current: {"node":"14.21.3","npm":"6.14.18"})
npm WARN notsup Not compatible with your version of node/npm: [email protected]
npm WARN notsup Unsupported engine for [email protected]: wanted: {"node":">=18"} (current: {"node":"14.21.3","npm":"6.14.18"})
npm WARN notsup Not compatible with your version of node/npm: [email protected]
npm WARN notsup Unsupported engine for [email protected]: wanted: {"node":">=18"} (current: {"node":"14.21.3","npm":"6.14.18"})
npm WARN notsup Not compatible with your version of node/npm: [email protected]
npm WARN notsup Unsupported engine for [email protected]: wanted: {"node":">=18"} (current: {"node":"14.21.3","npm":"6.14.18"})
npm WARN notsup Not compatible with your version of node/npm: [email protected]
npm WARN notsup Unsupported engine for [email protected]: wanted: {"node":">=18"} (current: {"node":"14.21.3","npm":"6.14.18"})
npm WARN notsup Not compatible with your version of node/npm: [email protected]
npm WARN notsup Unsupported engine for [email protected]: wanted: {"node":">=18"} (current: {"node":"14.21.3","npm":"6.14.18"})
npm WARN notsup Not compatible with your version of node/npm: [email protected]
npm WARN notsup Unsupported engine for [email protected]: wanted: {"node":">=18"} (current: {"node":"14.21.3","npm":"6.14.18"})
npm WARN notsup Not compatible with your version of node/npm: [email protected]
npm WARN notsup Unsupported engine for [email protected]: wanted: {"node":">=18"} (current: {"node":"14.21.3","npm":"6.14.18"})
npm WARN notsup Not compatible with your version of node/npm: [email protected]
npm WARN notsup Unsupported engine for [email protected]: wanted: {"node":">=16"} (current: {"node":"14.21.3","npm":"6.14.18"})
npm WARN notsup Not compatible with your version of node/npm: [email protected]
npm WARN notsup Unsupported engine for [email protected]: wanted: {"node":">=18"} (current: {"node":"14.21.3","npm":"6.14.18"})
npm WARN notsup Not compatible with your version of node/npm: [email protected]
npm WARN notsup Unsupported engine for [email protected]: wanted: {"node":">=18"} (current: {"node":"14.21.3","npm":"6.14.18"})
npm WARN notsup Not compatible with your version of node/npm: [email protected]
npm WARN notsup Unsupported engine for [email protected]: wanted: {"node":">=16"} (current: {"node":"14.21.3","npm":"6.14.18"})
npm WARN notsup Not compatible with your version of node/npm: [email protected]
npm WARN notsup Unsupported engine for [email protected]: wanted: {"node":">=18"} (current: {"node":"14.21.3","npm":"6.14.18"})
npm WARN notsup Not compatible with your version of node/npm: [email protected]
npm WARN notsup Unsupported engine for [email protected]: wanted: {"node":">=18"} (current: {"node":"14.21.3","npm":"6.14.18"})
npm WARN notsup Not compatible with your version of node/npm: [email protected]
npm WARN notsup Unsupported engine for [email protected]: wanted: {"node":">=18"} (current: {"node":"14.21.3","npm":"6.14.18"})
npm WARN notsup Not compatible with your version of node/npm: [email protected]
npm WARN notsup Unsupported engine for [email protected]: wanted: {"node":">=16"} (current: {"node":"14.21.3","npm":"6.14.18"})
npm WARN notsup Not compatible with your version of node/npm: [email protected]
npm WARN notsup Unsupported engine for [email protected]: wanted: {"node":">=18"} (current: {"node":"14.21.3","npm":"6.14.18"})
npm WARN notsup Not compatible with your version of node/npm: [email protected]
npm WARN notsup Unsupported engine for [email protected]: wanted: {"node":">=18"} (current: {"node":"14.21.3","npm":"6.14.18"})
npm WARN notsup Not compatible with your version of node/npm: [email protected]
npm WARN notsup Unsupported engine for [email protected]: wanted: {"node":">=18"} (current: {"node":"14.21.3","npm":"6.14.18"})
npm WARN notsup Not compatible with your version of node/npm: [email protected]
npm WARN [email protected] requires a peer of applicationinsights-native-metrics@* but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of swiper@^8.2.6 but none is installed. You must install peer dependencies yourself.

• @pnp/[email protected]
  added 232 packages from 324 contributors in 17.697s
  PS C:\Users\Tracy.Sterling\Dev\sp-dev-fx-webparts-main\samples\react-calendar> m365 setup
  file:///C:/Users/Tracy.Sterling/AppData/Roaming/nvm/v14.21.3/node_modules/@pnp/cli-microsoft365/node_modules/update-notifier/update-notifier.js:39
  options.pkg ??= {};
  ^^^

SyntaxError: Unexpected token '??='
at Loader.moduleStrategy (internal/modules/esm/translators.js:149:18)

Additional environment details

No response

[mohammadamer]

Hello @TracyGH

I see your point. I actually managed to build and serve using node 12.13.0 but that was on the end of June when I committed the last change.

If node version 14.21.3 worked with you then this is great. it is mentioned in the ReadME in Compatibility section that node version 14 is also compatible.

Additionally, I am in the process of updating the Calendar's node version to SPFx version 1.16.1. Following this update, node version 16.20.2 will be required. We will ensure the ReadMe file is updated accordingly to facilitate your use of the Calendar webpart.

[hugoabernier]

@TracyGH thanks for bringing this up to us. I personally test every pull request sample with the version of node stated by the author of the PR to ensure they work.

As @mohammadamer stated, you can use any of the versions of node supported in the README document.

I'll go ahead and close this issue, but feel free to open a new issue if you have any further issues building the sample using a supported version of node.