search

pnp / sp-dev-fx-webparts

SharePoint Framework web part, Teams tab, personal app, app page samples
http://aka.ms/spfx-webparts
MIT License
2.05k stars 3.86k forks source link

Node version indicated in .nvmrc file does not work #5233

Closed TracyGH closed 2 weeks ago

TracyGH commented 1 month ago

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.

image

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

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 open@10.1.0: wanted: {"node":">=18"} (current: {"node":"14.21.3","npm":"6.14.18"}) npm WARN notsup Not compatible with your version of node/npm: open@10.1.0 npm WARN notsup Unsupported engine for clipboardy@4.0.0: wanted: {"node":">=18"} (current: {"node":"14.21.3","npm":"6.14.18"}) npm WARN notsup Not compatible with your version of node/npm: clipboardy@4.0.0 npm WARN notsup Unsupported engine for update-notifier@7.3.1: wanted: {"node":">=18"} (current: {"node":"14.21.3","npm":"6.14.18"}) npm WARN notsup Not compatible with your version of node/npm: update-notifier@7.3.1 npm WARN notsup Unsupported engine for @azure/msal-node@2.14.0: wanted: {"node":">=16"} (current: {"node":"14.21.3","npm":"6.14.18"}) npm WARN notsup Not compatible with your version of node/npm: @azure/msal-node@2.14.0 npm WARN notsup Unsupported engine for @inquirer/confirm@3.2.0: wanted: {"node":">=18"} (current: {"node":"14.21.3","npm":"6.14.18"}) npm WARN notsup Not compatible with your version of node/npm: @inquirer/confirm@3.2.0 npm WARN notsup Unsupported engine for @inquirer/input@2.3.0: wanted: {"node":">=18"} (current: {"node":"14.21.3","npm":"6.14.18"}) npm WARN notsup Not compatible with your version of node/npm: @inquirer/input@2.3.0 npm WARN notsup Unsupported engine for @inquirer/select@2.5.0: wanted: {"node":">=18"} (current: {"node":"14.21.3","npm":"6.14.18"}) npm WARN notsup Not compatible with your version of node/npm: @inquirer/select@2.5.0 npm WARN notsup Unsupported engine for @inquirer/type@1.5.5: wanted: {"node":">=18"} (current: {"node":"14.21.3","npm":"6.14.18"}) npm WARN notsup Not compatible with your version of node/npm: @inquirer/type@1.5.5 npm WARN notsup Unsupported engine for @inquirer/core@9.2.1: wanted: {"node":">=18"} (current: {"node":"14.21.3","npm":"6.14.18"}) npm WARN notsup Not compatible with your version of node/npm: @inquirer/core@9.2.1 npm WARN notsup Unsupported engine for @inquirer/type@2.0.0: wanted: {"node":">=18"} (current: {"node":"14.21.3","npm":"6.14.18"}) npm WARN notsup Not compatible with your version of node/npm: @inquirer/type@2.0.0 npm WARN notsup Unsupported engine for yoctocolors-cjs@2.1.2: wanted: {"node":">=18"} (current: {"node":"14.21.3","npm":"6.14.18"}) npm WARN notsup Not compatible with your version of node/npm: yoctocolors-cjs@2.1.2 npm WARN notsup Unsupported engine for @inquirer/figures@1.0.6: wanted: {"node":">=18"} (current: {"node":"14.21.3","npm":"6.14.18"}) npm WARN notsup Not compatible with your version of node/npm: @inquirer/figures@1.0.6 npm WARN notsup Unsupported engine for @azure/core-rest-pipeline@1.16.3: 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/core-rest-pipeline@1.16.3 npm WARN notsup Unsupported engine for @azure/core-auth@1.7.2: 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/core-auth@1.7.2 npm WARN notsup Unsupported engine for @azure/opentelemetry-instrumentation-azure-sdk@1.0.0-beta.6: 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/opentelemetry-instrumentation-azure-sdk@1.0.0-beta.6 npm WARN notsup Unsupported engine for @azure/abort-controller@2.1.2: 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/abort-controller@2.1.2 npm WARN notsup Unsupported engine for @azure/core-util@1.10.0: 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/core-util@1.10.0 npm WARN notsup Unsupported engine for @azure/logger@1.1.4: 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/logger@1.1.4 npm WARN notsup Unsupported engine for @azure/core-tracing@1.1.2: 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/core-tracing@1.1.2 npm WARN notsup Unsupported engine for is-wsl@3.1.0: wanted: {"node":">=16"} (current: {"node":"14.21.3","npm":"6.14.18"}) npm WARN notsup Not compatible with your version of node/npm: is-wsl@3.1.0 npm WARN notsup Unsupported engine for execa@8.0.1: wanted: {"node":">=16.17"} (current: {"node":"14.21.3","npm":"6.14.18"}) npm WARN notsup Not compatible with your version of node/npm: execa@8.0.1 npm WARN notsup Unsupported engine for is64bit@2.0.0: wanted: {"node":">=18"} (current: {"node":"14.21.3","npm":"6.14.18"}) npm WARN notsup Not compatible with your version of node/npm: is64bit@2.0.0 npm WARN notsup Unsupported engine for human-signals@5.0.0: 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: human-signals@5.0.0 npm WARN notsup Unsupported engine for get-stream@8.0.1: wanted: {"node":">=16"} (current: {"node":"14.21.3","npm":"6.14.18"}) npm WARN notsup Not compatible with your version of node/npm: get-stream@8.0.1 npm WARN notsup Unsupported engine for system-architecture@0.1.0: wanted: {"node":">=18"} (current: {"node":"14.21.3","npm":"6.14.18"}) npm WARN notsup Not compatible with your version of node/npm: system-architecture@0.1.0 npm WARN notsup Unsupported engine for default-browser@5.2.1: wanted: {"node":">=18"} (current: {"node":"14.21.3","npm":"6.14.18"}) npm WARN notsup Not compatible with your version of node/npm: default-browser@5.2.1 npm WARN notsup Unsupported engine for default-browser-id@5.0.0: wanted: {"node":">=18"} (current: {"node":"14.21.3","npm":"6.14.18"}) npm WARN notsup Not compatible with your version of node/npm: default-browser-id@5.0.0 npm WARN notsup Unsupported engine for bundle-name@4.1.0: wanted: {"node":">=18"} (current: {"node":"14.21.3","npm":"6.14.18"}) npm WARN notsup Not compatible with your version of node/npm: bundle-name@4.1.0 npm WARN notsup Unsupported engine for run-applescript@7.0.0: wanted: {"node":">=18"} (current: {"node":"14.21.3","npm":"6.14.18"}) npm WARN notsup Not compatible with your version of node/npm: run-applescript@7.0.0 npm WARN notsup Unsupported engine for configstore@7.0.0: wanted: {"node":">=18"} (current: {"node":"14.21.3","npm":"6.14.18"}) npm WARN notsup Not compatible with your version of node/npm: configstore@7.0.0 npm WARN notsup Unsupported engine for boxen@8.0.1: wanted: {"node":">=18"} (current: {"node":"14.21.3","npm":"6.14.18"}) npm WARN notsup Not compatible with your version of node/npm: boxen@8.0.1 npm WARN notsup Unsupported engine for latest-version@9.0.0: wanted: {"node":">=18"} (current: {"node":"14.21.3","npm":"6.14.18"}) npm WARN notsup Not compatible with your version of node/npm: latest-version@9.0.0 npm WARN notsup Unsupported engine for is-installed-globally@1.0.0: wanted: {"node":">=18"} (current: {"node":"14.21.3","npm":"6.14.18"}) npm WARN notsup Not compatible with your version of node/npm: is-installed-globally@1.0.0 npm WARN notsup Unsupported engine for is-in-ci@1.0.0: wanted: {"node":">=18"} (current: {"node":"14.21.3","npm":"6.14.18"}) npm WARN notsup Not compatible with your version of node/npm: is-in-ci@1.0.0 npm WARN notsup Unsupported engine for string-width@7.2.0: wanted: {"node":">=18"} (current: {"node":"14.21.3","npm":"6.14.18"}) npm WARN notsup Not compatible with your version of node/npm: string-width@7.2.0 npm WARN notsup Unsupported engine for type-fest@4.26.1: wanted: {"node":">=16"} (current: {"node":"14.21.3","npm":"6.14.18"}) npm WARN notsup Not compatible with your version of node/npm: type-fest@4.26.1 npm WARN notsup Unsupported engine for wrap-ansi@9.0.0: wanted: {"node":">=18"} (current: {"node":"14.21.3","npm":"6.14.18"}) npm WARN notsup Not compatible with your version of node/npm: wrap-ansi@9.0.0 npm WARN notsup Unsupported engine for widest-line@5.0.0: wanted: {"node":">=18"} (current: {"node":"14.21.3","npm":"6.14.18"}) npm WARN notsup Not compatible with your version of node/npm: widest-line@5.0.0 npm WARN notsup Unsupported engine for camelcase@8.0.0: wanted: {"node":">=16"} (current: {"node":"14.21.3","npm":"6.14.18"}) npm WARN notsup Not compatible with your version of node/npm: camelcase@8.0.0 npm WARN notsup Unsupported engine for get-east-asian-width@1.2.0: wanted: {"node":">=18"} (current: {"node":"14.21.3","npm":"6.14.18"}) npm WARN notsup Not compatible with your version of node/npm: get-east-asian-width@1.2.0 npm WARN notsup Unsupported engine for string-width@7.2.0: wanted: {"node":">=18"} (current: {"node":"14.21.3","npm":"6.14.18"}) npm WARN notsup Not compatible with your version of node/npm: string-width@7.2.0 npm WARN notsup Unsupported engine for dot-prop@9.0.0: wanted: {"node":">=18"} (current: {"node":"14.21.3","npm":"6.14.18"}) npm WARN notsup Not compatible with your version of node/npm: dot-prop@9.0.0 npm WARN notsup Unsupported engine for type-fest@4.26.1: wanted: {"node":">=16"} (current: {"node":"14.21.3","npm":"6.14.18"}) npm WARN notsup Not compatible with your version of node/npm: type-fest@4.26.1 npm WARN notsup Unsupported engine for global-directory@4.0.1: wanted: {"node":">=18"} (current: {"node":"14.21.3","npm":"6.14.18"}) npm WARN notsup Not compatible with your version of node/npm: global-directory@4.0.1 npm WARN notsup Unsupported engine for package-json@10.0.1: wanted: {"node":">=18"} (current: {"node":"14.21.3","npm":"6.14.18"}) npm WARN notsup Not compatible with your version of node/npm: package-json@10.0.1 npm WARN notsup Unsupported engine for ky@1.7.2: wanted: {"node":">=18"} (current: {"node":"14.21.3","npm":"6.14.18"}) npm WARN notsup Not compatible with your version of node/npm: ky@1.7.2 npm WARN applicationinsights@2.9.6 requires a peer of applicationinsights-native-metrics@* but none is installed. You must install peer dependencies yourself. npm WARN adaptivecards@3.0.4 requires a peer of swiper@^8.2.6 but none is installed. You must install peer dependencies yourself.

  • @pnp/cli-microsoft365@9.0.0 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 commented 1 month ago

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 commented 2 weeks ago

@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.