SPFx 1.18.x support

[Tanddant]

Category

• Enhancement
• Bug
• Question

Version

Please specify what version of the library you are using: [3.15.0]

Expected / Desired Behavior / Question

Being able to install the package, and use i - I guess that's really all.

Observed Behavior

Since SPFx 1.18 changed the node version I'm having some issue, installing on a SPFx 1.18.1 solution gives me the following install log:

npm install @pnp/spfx-controls-react --save --save-exact     
                                                                                                                                               
npm WARN ERESOLVE overriding peer dependency
npm WARN While resolving: @rushstack/webpack4-localization-plugin@0.17.46
npm WARN Found: @rushstack/set-webpack-public-path-plugin@4.0.15
npm WARN node_modules/spfx-fast-serve-helpers/node_modules/@rushstack/set-webpack-public-path-plugin
npm WARN   @rushstack/set-webpack-public-path-plugin@"4.0.15" from @microsoft/spfx-heft-plugins@1.18.0
npm WARN   node_modules/spfx-fast-serve-helpers/node_modules/@microsoft/spfx-heft-plugins
npm WARN     @microsoft/spfx-heft-plugins@"1.18.0" from spfx-fast-serve-helpers@1.18.1
npm WARN     node_modules/spfx-fast-serve-helpers
npm WARN
npm WARN Could not resolve dependency:
npm WARN peerOptional @rushstack/set-webpack-public-path-plugin@"^4.0.16" from @rushstack/webpack4-localization-plugin@0.17.46
npm WARN node_modules/spfx-fast-serve-helpers/node_modules/@rushstack/webpack4-localization-plugin
npm WARN   @rushstack/webpack4-localization-plugin@"0.17.46" from @microsoft/spfx-heft-plugins@1.18.0
npm WARN   node_modules/spfx-fast-serve-helpers/node_modules/@microsoft/spfx-heft-plugins
npm WARN ERESOLVE overriding peer dependency
npm WARN While resolving: @microsoft/loader-load-themed-styles@2.0.68
npm WARN Found: @microsoft/load-themed-styles@1.10.292
npm WARN node_modules/spfx-fast-serve-helpers/node_modules/@microsoft/spfx-heft-plugins/node_modules/@microsoft/load-themed-styles
npm WARN   @microsoft/load-themed-styles@"1.10.292" from @microsoft/spfx-heft-plugins@1.18.0
npm WARN   node_modules/spfx-fast-serve-helpers/node_modules/@microsoft/spfx-heft-plugins
npm WARN     @microsoft/spfx-heft-plugins@"1.18.0" from spfx-fast-serve-helpers@1.18.1
npm WARN     node_modules/spfx-fast-serve-helpers
npm WARN
npm WARN Could not resolve dependency:
npm WARN peer @microsoft/load-themed-styles@"^2.0.70" from @microsoft/loader-load-themed-styles@2.0.68
npm WARN node_modules/spfx-fast-serve-helpers/node_modules/@microsoft/spfx-heft-plugins/node_modules/@microsoft/loader-load-themed-styles
npm WARN   @microsoft/loader-load-themed-styles@"2.0.68" from @microsoft/spfx-heft-plugins@1.18.0
npm WARN   node_modules/spfx-fast-serve-helpers/node_modules/@microsoft/spfx-heft-plugins
npm WARN
npm WARN Conflicting peer dependency: @microsoft/load-themed-styles@2.0.88
npm WARN node_modules/@microsoft/load-themed-styles
npm WARN   peer @microsoft/load-themed-styles@"^2.0.70" from @microsoft/loader-load-themed-styles@2.0.68
npm WARN   node_modules/spfx-fast-serve-helpers/node_modules/@microsoft/spfx-heft-plugins/node_modules/@microsoft/loader-load-themed-styles
npm WARN     @microsoft/loader-load-themed-styles@"2.0.68" from @microsoft/spfx-heft-plugins@1.18.0
npm WARN     node_modules/spfx-fast-serve-helpers/node_modules/@microsoft/spfx-heft-plugins
npm WARN EBADENGINE Unsupported engine {
npm WARN EBADENGINE   package: 'Test-Solution@0.0.1',
npm WARN EBADENGINE   required: { node: '>=16.13.0 <17.0.0' },
npm WARN EBADENGINE   current: { node: 'v18.17.1', npm: '9.6.7' }
npm WARN EBADENGINE }
npm WARN EBADENGINE Unsupported engine {
npm WARN EBADENGINE   package: '@microsoft/decorators@1.17.3',
npm WARN EBADENGINE   required: {
npm WARN EBADENGINE     node: '>=12.13.0 <13.0.0 || >=14.15.0 <15.0.0 || >=16.13.0 <17.0.0'
npm WARN EBADENGINE   },
npm WARN EBADENGINE   current: { node: 'v18.17.1', npm: '9.6.7' }
npm WARN EBADENGINE }
npm WARN EBADENGINE Unsupported engine {
npm WARN EBADENGINE   package: '@microsoft/sp-application-base@1.17.3',
npm WARN EBADENGINE   required: {
npm WARN EBADENGINE     node: '>=12.13.0 <13.0.0 || >=14.15.0 <15.0.0 || >=16.13.0 <17.0.0'
npm WARN EBADENGINE   },
npm WARN EBADENGINE   current: { node: 'v18.17.1', npm: '9.6.7' }
npm WARN EBADENGINE }
npm WARN EBADENGINE Unsupported engine {
npm WARN EBADENGINE   package: '@microsoft/sp-core-library@1.17.3',
npm WARN EBADENGINE   required: {
npm WARN EBADENGINE     node: '>=12.13.0 <13.0.0 || >=14.15.0 <15.0.0 || >=16.13.0 <17.0.0'
npm WARN EBADENGINE   },
npm WARN EBADENGINE   current: { node: 'v18.17.1', npm: '9.6.7' }
npm WARN EBADENGINE }
npm WARN EBADENGINE Unsupported engine {
npm WARN EBADENGINE   package: '@microsoft/sp-dialog@1.17.3',
npm WARN EBADENGINE   required: {
npm WARN EBADENGINE     node: '>=12.13.0 <13.0.0 || >=14.15.0 <15.0.0 || >=16.13.0 <17.0.0'
npm WARN EBADENGINE   },
npm WARN EBADENGINE   current: { node: 'v18.17.1', npm: '9.6.7' }
npm WARN EBADENGINE }
npm WARN EBADENGINE Unsupported engine {
npm WARN EBADENGINE   package: '@microsoft/sp-listview-extensibility@1.17.3',
npm WARN EBADENGINE   required: {
npm WARN EBADENGINE     node: '>=12.13.0 <13.0.0 || >=14.15.0 <15.0.0 || >=16.13.0 <17.0.0'
npm WARN EBADENGINE   },
npm WARN EBADENGINE   current: { node: 'v18.17.1', npm: '9.6.7' }
npm WARN EBADENGINE }
npm WARN EBADENGINE Unsupported engine {
npm WARN EBADENGINE   package: '@microsoft/sp-loader@1.17.3',
npm WARN EBADENGINE   required: {
npm WARN EBADENGINE     node: '>=12.13.0 <13.0.0 || >=14.15.0 <15.0.0 || >=16.13.0 <17.0.0'
npm WARN EBADENGINE   },
npm WARN EBADENGINE   current: { node: 'v18.17.1', npm: '9.6.7' }
npm WARN EBADENGINE }
npm WARN EBADENGINE Unsupported engine {
npm WARN EBADENGINE   package: '@microsoft/sp-lodash-subset@1.17.3',
npm WARN EBADENGINE   required: {
npm WARN EBADENGINE     node: '>=12.13.0 <13.0.0 || >=14.15.0 <15.0.0 || >=16.13.0 <17.0.0'
npm WARN EBADENGINE   },
npm WARN EBADENGINE   current: { node: 'v18.17.1', npm: '9.6.7' }
npm WARN EBADENGINE }
npm WARN EBADENGINE Unsupported engine {
npm WARN EBADENGINE   package: '@microsoft/sp-office-ui-fabric-core@1.17.3',
npm WARN EBADENGINE   required: {
npm WARN EBADENGINE     node: '>=12.13.0 <13.0.0 || >=14.15.0 <15.0.0 || >=16.13.0 <17.0.0'
npm WARN EBADENGINE   },
npm WARN EBADENGINE   current: { node: 'v18.17.1', npm: '9.6.7' }
npm WARN EBADENGINE }
npm WARN EBADENGINE Unsupported engine {
npm WARN EBADENGINE   package: '@microsoft/sp-property-pane@1.17.3',
npm WARN EBADENGINE   required: {
npm WARN EBADENGINE     node: '>=12.13.0 <13.0.0 || >=14.15.0 <15.0.0 || >=16.13.0 <17.0.0'
npm WARN EBADENGINE   },
npm WARN EBADENGINE   current: { node: 'v18.17.1', npm: '9.6.7' }
npm WARN EBADENGINE }
npm WARN EBADENGINE Unsupported engine {
npm WARN EBADENGINE   package: '@microsoft/sp-webpart-base@1.17.3',
npm WARN EBADENGINE   required: {
npm WARN EBADENGINE     node: '>=12.13.0 <13.0.0 || >=14.15.0 <15.0.0 || >=16.13.0 <17.0.0'
npm WARN EBADENGINE   },
npm WARN EBADENGINE   current: { node: 'v18.17.1', npm: '9.6.7' }
npm WARN EBADENGINE }
npm WARN EBADENGINE Unsupported engine {
npm WARN EBADENGINE   package: '@microsoft/sp-core-library@1.15.0',
npm WARN EBADENGINE   required: {
npm WARN EBADENGINE     node: '>=12.13.0 <13.0.0 || >=14.15.0 <15.0.0 || >=16.13.0 <17.0.0'
npm WARN EBADENGINE   },
npm WARN EBADENGINE   current: { node: 'v18.17.1', npm: '9.6.7' }
npm WARN EBADENGINE }
npm WARN EBADENGINE Unsupported engine {
npm WARN EBADENGINE   package: '@microsoft/sp-component-base@1.17.3',
npm WARN EBADENGINE   required: {
npm WARN EBADENGINE     node: '>=12.13.0 <13.0.0 || >=14.15.0 <15.0.0 || >=16.13.0 <17.0.0'
npm WARN EBADENGINE   },
npm WARN EBADENGINE   current: { node: 'v18.17.1', npm: '9.6.7' }
npm WARN EBADENGINE }
npm WARN EBADENGINE Unsupported engine {
npm WARN EBADENGINE   package: '@microsoft/sp-core-library@1.17.3',
npm WARN EBADENGINE   required: {
npm WARN EBADENGINE     node: '>=12.13.0 <13.0.0 || >=14.15.0 <15.0.0 || >=16.13.0 <17.0.0'
npm WARN EBADENGINE   },
npm WARN EBADENGINE   current: { node: 'v18.17.1', npm: '9.6.7' }
npm WARN EBADENGINE }
npm WARN EBADENGINE Unsupported engine {
npm WARN EBADENGINE   package: '@microsoft/sp-diagnostics@1.17.3',
npm WARN EBADENGINE   required: {
npm WARN EBADENGINE     node: '>=12.13.0 <13.0.0 || >=14.15.0 <15.0.0 || >=16.13.0 <17.0.0'
npm WARN EBADENGINE   },
npm WARN EBADENGINE   current: { node: 'v18.17.1', npm: '9.6.7' }
npm WARN EBADENGINE }
npm WARN EBADENGINE Unsupported engine {
npm WARN EBADENGINE   package: '@microsoft/sp-dynamic-data@1.17.3',
npm WARN EBADENGINE   required: {
npm WARN EBADENGINE     node: '>=12.13.0 <13.0.0 || >=14.15.0 <15.0.0 || >=16.13.0 <17.0.0'
npm WARN EBADENGINE   },
npm WARN EBADENGINE   current: { node: 'v18.17.1', npm: '9.6.7' }
npm WARN EBADENGINE }
npm WARN EBADENGINE Unsupported engine {
npm WARN EBADENGINE   package: '@microsoft/sp-image-helper@1.17.3',
npm WARN EBADENGINE   required: {
npm WARN EBADENGINE     node: '>=12.13.0 <13.0.0 || >=14.15.0 <15.0.0 || >=16.13.0 <17.0.0'
npm WARN EBADENGINE   },
npm WARN EBADENGINE   current: { node: 'v18.17.1', npm: '9.6.7' }
npm WARN EBADENGINE }
npm WARN EBADENGINE Unsupported engine {
npm WARN EBADENGINE   package: '@microsoft/sp-lodash-subset@1.17.3',
npm WARN EBADENGINE   required: {
npm WARN EBADENGINE     node: '>=12.13.0 <13.0.0 || >=14.15.0 <15.0.0 || >=16.13.0 <17.0.0'
npm WARN EBADENGINE   },
npm WARN EBADENGINE   current: { node: 'v18.17.1', npm: '9.6.7' }
npm WARN EBADENGINE }
npm WARN EBADENGINE Unsupported engine {
npm WARN EBADENGINE   package: '@microsoft/sp-page-context@1.17.3',
npm WARN EBADENGINE   required: {
npm WARN EBADENGINE     node: '>=12.13.0 <13.0.0 || >=14.15.0 <15.0.0 || >=16.13.0 <17.0.0'
npm WARN EBADENGINE   },
npm WARN EBADENGINE   current: { node: 'v18.17.1', npm: '9.6.7' }
npm WARN EBADENGINE }
npm WARN EBADENGINE Unsupported engine {
npm WARN EBADENGINE   package: '@microsoft/sp-core-library@1.17.3',
npm WARN EBADENGINE   required: {
npm WARN EBADENGINE     node: '>=12.13.0 <13.0.0 || >=14.15.0 <15.0.0 || >=16.13.0 <17.0.0'
npm WARN EBADENGINE   },
npm WARN EBADENGINE   current: { node: 'v18.17.1', npm: '9.6.7' }
npm WARN EBADENGINE }
npm WARN EBADENGINE Unsupported engine {
npm WARN EBADENGINE   package: '@microsoft/sp-diagnostics@1.17.3',
npm WARN EBADENGINE   required: {
npm WARN EBADENGINE     node: '>=12.13.0 <13.0.0 || >=14.15.0 <15.0.0 || >=16.13.0 <17.0.0'
npm WARN EBADENGINE   },
npm WARN EBADENGINE   current: { node: 'v18.17.1', npm: '9.6.7' }
npm WARN EBADENGINE }
npm WARN EBADENGINE Unsupported engine {
npm WARN EBADENGINE   package: '@microsoft/sp-http@1.17.3',
npm WARN EBADENGINE   required: {
npm WARN EBADENGINE     node: '>=12.13.0 <13.0.0 || >=14.15.0 <15.0.0 || >=16.13.0 <17.0.0'
npm WARN EBADENGINE   },
npm WARN EBADENGINE   current: { node: 'v18.17.1', npm: '9.6.7' }
npm WARN EBADENGINE }
npm WARN EBADENGINE Unsupported engine {
npm WARN EBADENGINE   package: '@microsoft/sp-loader@1.17.3',
npm WARN EBADENGINE   required: {
npm WARN EBADENGINE     node: '>=12.13.0 <13.0.0 || >=14.15.0 <15.0.0 || >=16.13.0 <17.0.0'
npm WARN EBADENGINE   },
npm WARN EBADENGINE   current: { node: 'v18.17.1', npm: '9.6.7' }
npm WARN EBADENGINE }
npm WARN EBADENGINE Unsupported engine {
npm WARN EBADENGINE   package: '@microsoft/sp-lodash-subset@1.17.3',
npm WARN EBADENGINE   required: {
npm WARN EBADENGINE     node: '>=12.13.0 <13.0.0 || >=14.15.0 <15.0.0 || >=16.13.0 <17.0.0'
npm WARN EBADENGINE   },
npm WARN EBADENGINE   current: { node: 'v18.17.1', npm: '9.6.7' }
npm WARN EBADENGINE }
npm WARN EBADENGINE Unsupported engine {
npm WARN EBADENGINE   package: '@microsoft/sp-page-context@1.17.3',
npm WARN EBADENGINE   required: {
npm WARN EBADENGINE     node: '>=12.13.0 <13.0.0 || >=14.15.0 <15.0.0 || >=16.13.0 <17.0.0'
npm WARN EBADENGINE   },
npm WARN EBADENGINE   current: { node: 'v18.17.1', npm: '9.6.7' }
npm WARN EBADENGINE }
npm WARN EBADENGINE Unsupported engine {
npm WARN EBADENGINE   package: '@microsoft/sp-component-base@1.17.3',
npm WARN EBADENGINE   required: {
npm WARN EBADENGINE     node: '>=12.13.0 <13.0.0 || >=14.15.0 <15.0.0 || >=16.13.0 <17.0.0'
npm WARN EBADENGINE   },
npm WARN EBADENGINE   current: { node: 'v18.17.1', npm: '9.6.7' }
npm WARN EBADENGINE }
npm WARN EBADENGINE Unsupported engine {
npm WARN EBADENGINE   package: '@microsoft/sp-core-library@1.17.3',
npm WARN EBADENGINE   required: {
npm WARN EBADENGINE     node: '>=12.13.0 <13.0.0 || >=14.15.0 <15.0.0 || >=16.13.0 <17.0.0'
npm WARN EBADENGINE   },
npm WARN EBADENGINE   current: { node: 'v18.17.1', npm: '9.6.7' }
npm WARN EBADENGINE }
npm WARN EBADENGINE Unsupported engine {
npm WARN EBADENGINE   package: '@microsoft/sp-diagnostics@1.17.3',
npm WARN EBADENGINE   required: {
npm WARN EBADENGINE     node: '>=12.13.0 <13.0.0 || >=14.15.0 <15.0.0 || >=16.13.0 <17.0.0'
npm WARN EBADENGINE   },
npm WARN EBADENGINE   current: { node: 'v18.17.1', npm: '9.6.7' }
npm WARN EBADENGINE }
npm WARN EBADENGINE Unsupported engine {
npm WARN EBADENGINE   package: '@microsoft/sp-dynamic-data@1.17.3',
npm WARN EBADENGINE   required: {
npm WARN EBADENGINE     node: '>=12.13.0 <13.0.0 || >=14.15.0 <15.0.0 || >=16.13.0 <17.0.0'
npm WARN EBADENGINE   },
npm WARN EBADENGINE   current: { node: 'v18.17.1', npm: '9.6.7' }
npm WARN EBADENGINE }
npm WARN EBADENGINE Unsupported engine {
npm WARN EBADENGINE   package: '@microsoft/sp-http@1.17.3',
npm WARN EBADENGINE   required: {
npm WARN EBADENGINE     node: '>=12.13.0 <13.0.0 || >=14.15.0 <15.0.0 || >=16.13.0 <17.0.0'
npm WARN EBADENGINE   },
npm WARN EBADENGINE   current: { node: 'v18.17.1', npm: '9.6.7' }
npm WARN EBADENGINE }
npm WARN EBADENGINE Unsupported engine {
npm WARN EBADENGINE   package: '@microsoft/sp-loader@1.17.3',
npm WARN EBADENGINE   required: {
npm WARN EBADENGINE     node: '>=12.13.0 <13.0.0 || >=14.15.0 <15.0.0 || >=16.13.0 <17.0.0'
npm WARN EBADENGINE   },
npm WARN EBADENGINE   current: { node: 'v18.17.1', npm: '9.6.7' }
npm WARN EBADENGINE }
npm WARN EBADENGINE Unsupported engine {
npm WARN EBADENGINE   package: '@microsoft/sp-lodash-subset@1.17.3',
npm WARN EBADENGINE   required: {
npm WARN EBADENGINE     node: '>=12.13.0 <13.0.0 || >=14.15.0 <15.0.0 || >=16.13.0 <17.0.0'
npm WARN EBADENGINE   },
npm WARN EBADENGINE   current: { node: 'v18.17.1', npm: '9.6.7' }
npm WARN EBADENGINE }
npm WARN EBADENGINE Unsupported engine {
npm WARN EBADENGINE   package: '@microsoft/sp-module-interfaces@1.17.3',
npm WARN EBADENGINE   required: {
npm WARN EBADENGINE     node: '>=12.13.0 <13.0.0 || >=14.15.0 <15.0.0 || >=16.13.0 <17.0.0'
npm WARN EBADENGINE   },
npm WARN EBADENGINE   current: { node: 'v18.17.1', npm: '9.6.7' }
npm WARN EBADENGINE }
npm WARN EBADENGINE Unsupported engine {
npm WARN EBADENGINE   package: '@microsoft/sp-page-context@1.17.3',
npm WARN EBADENGINE   required: {
npm WARN EBADENGINE     node: '>=12.13.0 <13.0.0 || >=14.15.0 <15.0.0 || >=16.13.0 <17.0.0'
npm WARN EBADENGINE   },
npm WARN EBADENGINE   current: { node: 'v18.17.1', npm: '9.6.7' }
npm WARN EBADENGINE }
npm WARN EBADENGINE Unsupported engine {
npm WARN EBADENGINE   package: '@microsoft/sp-lodash-subset@1.15.0',
npm WARN EBADENGINE   required: {
npm WARN EBADENGINE     node: '>=12.13.0 <13.0.0 || >=14.15.0 <15.0.0 || >=16.13.0 <17.0.0'
npm WARN EBADENGINE   },
npm WARN EBADENGINE   current: { node: 'v18.17.1', npm: '9.6.7' }
npm WARN EBADENGINE }
npm WARN EBADENGINE Unsupported engine {
npm WARN EBADENGINE   package: '@microsoft/sp-module-interfaces@1.15.0',
npm WARN EBADENGINE   required: {
npm WARN EBADENGINE     node: '>=12.13.0 <13.0.0 || >=14.15.0 <15.0.0 || >=16.13.0 <17.0.0'
npm WARN EBADENGINE   },
npm WARN EBADENGINE   current: { node: 'v18.17.1', npm: '9.6.7' }
npm WARN EBADENGINE }
npm WARN EBADENGINE Unsupported engine {
npm WARN EBADENGINE   package: '@microsoft/sp-odata-types@1.15.0',
npm WARN EBADENGINE   required: {
npm WARN EBADENGINE     node: '>=12.13.0 <13.0.0 || >=14.15.0 <15.0.0 || >=16.13.0 <17.0.0'
npm WARN EBADENGINE   },
npm WARN EBADENGINE   current: { node: 'v18.17.1', npm: '9.6.7' }
npm WARN EBADENGINE }
npm WARN EBADENGINE Unsupported engine {
npm WARN EBADENGINE   package: '@microsoft/sp-module-interfaces@1.17.3',
npm WARN EBADENGINE   required: {
npm WARN EBADENGINE     node: '>=12.13.0 <13.0.0 || >=14.15.0 <15.0.0 || >=16.13.0 <17.0.0'
npm WARN EBADENGINE   },
npm WARN EBADENGINE   current: { node: 'v18.17.1', npm: '9.6.7' }
npm WARN EBADENGINE }
npm WARN EBADENGINE Unsupported engine {
npm WARN EBADENGINE   package: '@microsoft/sp-odata-types@1.17.3',
npm WARN EBADENGINE   required: {
npm WARN EBADENGINE     node: '>=12.13.0 <13.0.0 || >=14.15.0 <15.0.0 || >=16.13.0 <17.0.0'
npm WARN EBADENGINE   },
npm WARN EBADENGINE   current: { node: 'v18.17.1', npm: '9.6.7' }
npm WARN EBADENGINE }
npm WARN EBADENGINE Unsupported engine {
npm WARN EBADENGINE   package: '@microsoft/sp-dynamic-data@1.17.3',
npm WARN EBADENGINE   required: {
npm WARN EBADENGINE     node: '>=12.13.0 <13.0.0 || >=14.15.0 <15.0.0 || >=16.13.0 <17.0.0'
npm WARN EBADENGINE   },
npm WARN EBADENGINE   current: { node: 'v18.17.1', npm: '9.6.7' }
npm WARN EBADENGINE }
npm WARN EBADENGINE Unsupported engine {
npm WARN EBADENGINE   package: '@microsoft/sp-http@1.17.3',
npm WARN EBADENGINE   required: {
npm WARN EBADENGINE     node: '>=12.13.0 <13.0.0 || >=14.15.0 <15.0.0 || >=16.13.0 <17.0.0'
npm WARN EBADENGINE   },
npm WARN EBADENGINE   current: { node: 'v18.17.1', npm: '9.6.7' }
npm WARN EBADENGINE }
npm WARN EBADENGINE Unsupported engine {
npm WARN EBADENGINE   package: '@microsoft/sp-module-interfaces@1.17.3',
npm WARN EBADENGINE   required: {
npm WARN EBADENGINE     node: '>=12.13.0 <13.0.0 || >=14.15.0 <15.0.0 || >=16.13.0 <17.0.0'
npm WARN EBADENGINE   },
npm WARN EBADENGINE   current: { node: 'v18.17.1', npm: '9.6.7' }
npm WARN EBADENGINE }
npm WARN EBADENGINE Unsupported engine {
npm WARN EBADENGINE   package: '@microsoft/sp-odata-types@1.17.3',
npm WARN EBADENGINE   required: {
npm WARN EBADENGINE     node: '>=12.13.0 <13.0.0 || >=14.15.0 <15.0.0 || >=16.13.0 <17.0.0'
npm WARN EBADENGINE   },
npm WARN EBADENGINE   current: { node: 'v18.17.1', npm: '9.6.7' }
npm WARN EBADENGINE }
npm WARN EBADENGINE Unsupported engine {
npm WARN EBADENGINE   package: '@microsoft/sp-loader@1.17.3',
npm WARN EBADENGINE   required: {
npm WARN EBADENGINE     node: '>=12.13.0 <13.0.0 || >=14.15.0 <15.0.0 || >=16.13.0 <17.0.0'
npm WARN EBADENGINE   },
npm WARN EBADENGINE   current: { node: 'v18.17.1', npm: '9.6.7' }
npm WARN EBADENGINE }
npm WARN EBADENGINE Unsupported engine {
npm WARN EBADENGINE   package: '@microsoft/sp-odata-types@1.17.3',
npm WARN EBADENGINE   required: {
npm WARN EBADENGINE     node: '>=12.13.0 <13.0.0 || >=14.15.0 <15.0.0 || >=16.13.0 <17.0.0'
npm WARN EBADENGINE   },
npm WARN EBADENGINE   current: { node: 'v18.17.1', npm: '9.6.7' }
npm WARN EBADENGINE }
npm WARN EBADENGINE Unsupported engine {
npm WARN EBADENGINE   package: '@microsoft/sp-component-base@1.17.3',
npm WARN EBADENGINE   required: {
npm WARN EBADENGINE     node: '>=12.13.0 <13.0.0 || >=14.15.0 <15.0.0 || >=16.13.0 <17.0.0'
npm WARN EBADENGINE   },
npm WARN EBADENGINE   current: { node: 'v18.17.1', npm: '9.6.7' }
npm WARN EBADENGINE }
npm WARN EBADENGINE Unsupported engine {
npm WARN EBADENGINE   package: '@microsoft/sp-diagnostics@1.17.3',
npm WARN EBADENGINE   required: {
npm WARN EBADENGINE     node: '>=12.13.0 <13.0.0 || >=14.15.0 <15.0.0 || >=16.13.0 <17.0.0'
npm WARN EBADENGINE   },
npm WARN EBADENGINE   current: { node: 'v18.17.1', npm: '9.6.7' }
npm WARN EBADENGINE }
npm WARN EBADENGINE Unsupported engine {
npm WARN EBADENGINE   package: '@microsoft/sp-extension-base@1.17.3',
npm WARN EBADENGINE   required: {
npm WARN EBADENGINE     node: '>=12.13.0 <13.0.0 || >=14.15.0 <15.0.0 || >=16.13.0 <17.0.0'
npm WARN EBADENGINE   },
npm WARN EBADENGINE   current: { node: 'v18.17.1', npm: '9.6.7' }
npm WARN EBADENGINE }
npm WARN EBADENGINE Unsupported engine {
npm WARN EBADENGINE   package: '@microsoft/sp-http@1.17.3',
npm WARN EBADENGINE   required: {
npm WARN EBADENGINE     node: '>=12.13.0 <13.0.0 || >=14.15.0 <15.0.0 || >=16.13.0 <17.0.0'
npm WARN EBADENGINE   },
npm WARN EBADENGINE   current: { node: 'v18.17.1', npm: '9.6.7' }
npm WARN EBADENGINE }
npm WARN EBADENGINE Unsupported engine {
npm WARN EBADENGINE   package: '@microsoft/sp-module-interfaces@1.17.3',
npm WARN EBADENGINE   required: {
npm WARN EBADENGINE     node: '>=12.13.0 <13.0.0 || >=14.15.0 <15.0.0 || >=16.13.0 <17.0.0'
npm WARN EBADENGINE   },
npm WARN EBADENGINE   current: { node: 'v18.17.1', npm: '9.6.7' }
npm WARN EBADENGINE }
npm WARN EBADENGINE Unsupported engine {
npm WARN EBADENGINE   package: '@microsoft/sp-odata-types@1.17.3',
npm WARN EBADENGINE   required: {
npm WARN EBADENGINE     node: '>=12.13.0 <13.0.0 || >=14.15.0 <15.0.0 || >=16.13.0 <17.0.0'
npm WARN EBADENGINE   },
npm WARN EBADENGINE   current: { node: 'v18.17.1', npm: '9.6.7' }
npm WARN EBADENGINE }
npm WARN EBADENGINE Unsupported engine {
npm WARN EBADENGINE   package: '@microsoft/sp-page-context@1.17.3',
npm WARN EBADENGINE   required: {
npm WARN EBADENGINE     node: '>=12.13.0 <13.0.0 || >=14.15.0 <15.0.0 || >=16.13.0 <17.0.0'
npm WARN EBADENGINE   },
npm WARN EBADENGINE   current: { node: 'v18.17.1', npm: '9.6.7' }
npm WARN EBADENGINE }
npm WARN EBADENGINE Unsupported engine {
npm WARN EBADENGINE   package: '@microsoft/sp-search-extensibility@1.17.3',
npm WARN EBADENGINE   required: {
npm WARN EBADENGINE     node: '>=12.13.0 <13.0.0 || >=14.15.0 <15.0.0 || >=16.13.0 <17.0.0'
npm WARN EBADENGINE   },
npm WARN EBADENGINE   current: { node: 'v18.17.1', npm: '9.6.7' }
npm WARN EBADENGINE }
npm WARN EBADENGINE Unsupported engine {
npm WARN EBADENGINE   package: '@microsoft/sp-dynamic-data@1.17.3',
npm WARN EBADENGINE   required: {
npm WARN EBADENGINE     node: '>=12.13.0 <13.0.0 || >=14.15.0 <15.0.0 || >=16.13.0 <17.0.0'
npm WARN EBADENGINE   },
npm WARN EBADENGINE   current: { node: 'v18.17.1', npm: '9.6.7' }
npm WARN EBADENGINE }
npm WARN deprecated spfx-uifabric-themes@0.9.0: spfx-uifabric-themes got replaced by hTWOo - https://my.n8d.at/hTWOo and check the updated documentation for this package: https://lab.n8d.studio/spfx-uifabric-themes/
npm WARN deprecated msal@1.4.17: This package is no longer supported. Please use @azure/msal-browser instead.
npm WARN deprecated msal@1.4.17: This package is no longer supported. Please use @azure/msal-browser instead.
npm WARN deprecated msal@1.4.17: This package is no longer supported. Please use @azure/msal-browser instead.
npm WARN deprecated msal@1.4.17: This package is no longer supported. Please use @azure/msal-browser instead.
npm WARN deprecated msal@1.4.18: This package is no longer supported. Please use @azure/msal-browser instead.

added 293 packages, and audited 3270 packages in 3m

259 packages are looking for funding
  run `npm fund` for details

93 vulnerabilities (1 low, 66 moderate, 25 high, 1 critical)

To address issues that do not require attention, run:
  npm audit fix

To address all issues possible (including breaking changes), run:
  npm audit fix --force

Some issues need review, and may require choosing
a different dependency.

Run `npm audit` for details.

Running a gulp serve then gives me the following:

gulp serve                                                                                                                                                                                                  ─╯
Build target: DEBUG
[16:39:07] Using gulpfile D:\Project\SPFx\gulpfile.js
[16:39:07] Starting 'serve'...
[16:39:07] Starting gulp
[16:39:07] Starting subtask 'spfx-serve'...
[16:39:07] [spfx-serve] To load your scripts, use this query string: ?debug=true&noredir=true&debugManifestsFile=https://localhost:4321/temp/manifests.js
[16:39:07] Starting server...
[16:39:07] Finished subtask 'spfx-serve' after 235 ms
[16:39:07] Starting subtask 'pre-copy'...
[16:39:07] Finished subtask 'pre-copy' after 40 ms
[16:39:07] Starting subtask 'copy-static-assets'...
[16:39:07] Starting subtask 'sass'...
[16:39:07] Server started https://localhost:4321
[16:39:07] LiveReload started on port 35729
[16:39:07] Running server
Opening https://xxxxxx.sharepoint.com/sites/xxxxxxxxx/_layouts/15/SPListForm.aspx?debugManifestsFile=https%3A%2F%2Flocalhost%3A4321%2Ftemp%2Fmanifests.js&loadSPFX=true&componentId=b96f711e-ae5e-4df4-bcea-99a56012eac6&PageType=8&RootFolder=%2Fsites%2FMove-IT%2FLists%2FProjects&properties=%7B%22sampleText%22%3A%22Value%22%7D using the default OS app
[16:39:07] Finished subtask 'sass' after 86 ms
[16:39:07] Starting subtask 'lint'...
[16:39:07] [lint] eslint version: 8.7.0
[16:39:07] Starting subtask 'tsc'...
[16:39:07] [tsc] typescript version: 4.5.5
[16:39:11] Finished subtask 'copy-static-assets' after 4.32 s
[16:39:14] Finished subtask 'tsc' after 7.05 s

[16:39:17] Warning - lint - ... TOTALLY NOT 211 Lines of lint warnings

[16:39:17] Finished subtask 'lint' after 9.61 s
[16:39:17] Starting subtask 'post-copy'...
[16:39:17] Finished subtask 'post-copy' after 137 μs
[16:39:17] Starting subtask 'configure-webpack'...
[16:39:17] Finished subtask 'configure-webpack' after 675 ms
[16:39:17] Starting subtask 'webpack'...
[16:39:22] Error - [webpack] Error processing webpack stats: TypeError: Cannot read properties of undefined (reading 'toJson')
[16:39:22] Error - [webpack] Webpack error: TypeError: Cannot set properties of undefined (setting 'asyncChunks')
[16:39:22] Finished subtask 'webpack' after 5.14 s
[16:39:22] Starting subtask 'reload'...
[16:39:22] Finished subtask 'reload' after 2 ms

And nothing will load, looking at the following two lines, but I have no clue where they're coming from

[16:39:22] Error - [webpack] Error processing webpack stats: TypeError: Cannot read properties of undefined (reading 'toJson')
[16:39:22] Error - [webpack] Webpack error: TypeError: Cannot set properties of undefined (setting 'asyncChunks')

Steps to Reproduce

I get them just spinning up a SPFx 1.18.1 Project and running a npm install @pnp/spfx-controls-react --save --save-exact

I'm down to try and help out, but I have no clue where to start 😅

Thank you for reporting this issue. We will be triaging your incoming issue as soon as possible.

[github-actions]

Thank you for submitting your first issue to this project.

[Tanddant]

Update!

A bit more digging, it seems to be depenant on the component, uncommenting this code snippet get's it to work

<ListItemComments
      webUrl={Statics.SiteUrls.ProjectSite}
      listId={Statics.ListIds.Tasks}
      itemId={Task.Id + ""}
      serviceScope={SPFxContext.serviceScope as any}
  />

[GuidoZam]

Hi @Tanddant, I see a lot of errors regarding a bad engine, maybe the problem is that.

npm WARN EBADENGINE Unsupported engine {
npm WARN EBADENGINE   package: 'Test-Solution@0.0.1',
npm WARN EBADENGINE   required: { node: '>=16.13.0 <17.0.0' },
npm WARN EBADENGINE   current: { node: 'v18.17.1', npm: '9.6.7' }
npm WARN EBADENGINE }

As you can see your current Node.js version is 18.17.1 but the required is >=16.13.0 <17.0.0 and this applied to most of the errors, maybe solving this will resolve all your problems 😉

[Tanddant]

Hi @Tanddant, I see a lot of errors regarding a bad engine, maybe the problem is that.

npm WARN EBADENGINE Unsupported engine {
npm WARN EBADENGINE   package: 'Test-Solution@0.0.1',
npm WARN EBADENGINE   required: { node: '>=16.13.0 <17.0.0' },
npm WARN EBADENGINE   current: { node: 'v18.17.1', npm: '9.6.7' }
npm WARN EBADENGINE }

As you can see your current Node.js version is 18.17.1 but the required is >=16.13.0 <17.0.0 and this applied to most of the errors, maybe solving this will resolve all your problems 😉

Hi @GuidoZam

I agree, but SPFx 1.18.x now uses node 18, so I'm guessing we would need to update the controls to support node 18

[GuidoZam]

Sorry @Tanddant my bad, I misunderstood the issue. I saw that in the dev branch there is a recent merge supporting SPFx 1.18.1, maybe you should wait until it's merged on the master branch.

[Tanddant]

No worries @GuidoZam, I should've been more clear in my post - or just checked the Dev branch 😂

Keeping my fingers crossed for a release soon 🤞

[GuidoZam]

No problem 😆 finger crossed for you!

[michaelmaillot]

Hi @Tanddant & @GuidoZam,

A new version will be released (very) soon, supporting SPFx 1.18.1.

Stay tuned 😉

[joelfmrodrigues]

@Tanddant hey, in the meantime, it would be great if you could test using the beta release to ensure that the issue was resolved

[Tanddant]

@joelfmrodrigues Tried a npm i @pnp/spfx-controls-react@3.16.0-beta.6835951 - unfortunately still getting errors, but seemingly far less than before

npm WARN ERESOLVE overriding peer dependency
npm WARN While resolving: @rushstack/webpack4-localization-plugin@0.17.46
npm WARN Found: @rushstack/set-webpack-public-path-plugin@4.0.15
npm WARN node_modules/spfx-fast-serve-helpers/node_modules/@rushstack/set-webpack-public-path-plugin
npm WARN   @rushstack/set-webpack-public-path-plugin@"4.0.15" from @microsoft/spfx-heft-plugins@1.18.0
npm WARN   node_modules/spfx-fast-serve-helpers/node_modules/@microsoft/spfx-heft-plugins
npm WARN     @microsoft/spfx-heft-plugins@"1.18.0" from spfx-fast-serve-helpers@1.18.1
npm WARN     node_modules/spfx-fast-serve-helpers
npm WARN
npm WARN Could not resolve dependency:
npm WARN peerOptional @rushstack/set-webpack-public-path-plugin@"^4.0.16" from @rushstack/webpack4-localization-plugin@0.17.46
npm WARN node_modules/spfx-fast-serve-helpers/node_modules/@rushstack/webpack4-localization-plugin
npm WARN   @rushstack/webpack4-localization-plugin@"0.17.46" from @microsoft/spfx-heft-plugins@1.18.0
npm WARN   node_modules/spfx-fast-serve-helpers/node_modules/@microsoft/spfx-heft-plugins
npm WARN ERESOLVE overriding peer dependency
npm WARN While resolving: @microsoft/loader-load-themed-styles@2.0.68
npm WARN Found: @microsoft/load-themed-styles@1.10.292
npm WARN node_modules/spfx-fast-serve-helpers/node_modules/@microsoft/spfx-heft-plugins/node_modules/@microsoft/load-themed-styles
npm WARN   @microsoft/load-themed-styles@"1.10.292" from @microsoft/spfx-heft-plugins@1.18.0
npm WARN   node_modules/spfx-fast-serve-helpers/node_modules/@microsoft/spfx-heft-plugins
npm WARN     @microsoft/spfx-heft-plugins@"1.18.0" from spfx-fast-serve-helpers@1.18.1
npm WARN     node_modules/spfx-fast-serve-helpers
npm WARN
npm WARN Could not resolve dependency:
npm WARN peer @microsoft/load-themed-styles@"^2.0.70" from @microsoft/loader-load-themed-styles@2.0.68
npm WARN node_modules/spfx-fast-serve-helpers/node_modules/@microsoft/spfx-heft-plugins/node_modules/@microsoft/loader-load-themed-styles
npm WARN   @microsoft/loader-load-themed-styles@"2.0.68" from @microsoft/spfx-heft-plugins@1.18.0
npm WARN   node_modules/spfx-fast-serve-helpers/node_modules/@microsoft/spfx-heft-plugins
npm WARN
npm WARN Conflicting peer dependency: @microsoft/load-themed-styles@2.0.88
npm WARN node_modules/@microsoft/load-themed-styles
npm WARN   peer @microsoft/load-themed-styles@"^2.0.70" from @microsoft/loader-load-themed-styles@2.0.68
npm WARN   node_modules/spfx-fast-serve-helpers/node_modules/@microsoft/spfx-heft-plugins/node_modules/@microsoft/loader-load-themed-styles
npm WARN     @microsoft/loader-load-themed-styles@"2.0.68" from @microsoft/spfx-heft-plugins@1.18.0
npm WARN     node_modules/spfx-fast-serve-helpers/node_modules/@microsoft/spfx-heft-plugins
npm WARN EBADENGINE Unsupported engine {
npm WARN EBADENGINE   package: 'nopa-nordic-move-it@0.0.1',
npm WARN EBADENGINE   required: { node: '>=16.13.0 <17.0.0' },
npm WARN EBADENGINE   current: { node: 'v18.17.1', npm: '9.6.7' }
npm WARN EBADENGINE }
npm WARN EBADENGINE Unsupported engine {
npm WARN EBADENGINE   package: '@microsoft/sp-core-library@1.15.0',
npm WARN EBADENGINE   required: {
npm WARN EBADENGINE     node: '>=12.13.0 <13.0.0 || >=14.15.0 <15.0.0 || >=16.13.0 <17.0.0'
npm WARN EBADENGINE   },
npm WARN EBADENGINE   current: { node: 'v18.17.1', npm: '9.6.7' }
npm WARN EBADENGINE }
npm WARN EBADENGINE Unsupported engine {
npm WARN EBADENGINE   package: '@microsoft/sp-lodash-subset@1.15.0',
npm WARN EBADENGINE   required: {
npm WARN EBADENGINE     node: '>=12.13.0 <13.0.0 || >=14.15.0 <15.0.0 || >=16.13.0 <17.0.0'
npm WARN EBADENGINE   },
npm WARN EBADENGINE   current: { node: 'v18.17.1', npm: '9.6.7' }
npm WARN EBADENGINE }
npm WARN EBADENGINE Unsupported engine {
npm WARN EBADENGINE   package: '@microsoft/sp-module-interfaces@1.15.0',
npm WARN EBADENGINE   required: {
npm WARN EBADENGINE     node: '>=12.13.0 <13.0.0 || >=14.15.0 <15.0.0 || >=16.13.0 <17.0.0'
npm WARN EBADENGINE   },
npm WARN EBADENGINE   current: { node: 'v18.17.1', npm: '9.6.7' }
npm WARN EBADENGINE }
npm WARN EBADENGINE Unsupported engine {
npm WARN EBADENGINE   package: '@microsoft/sp-odata-types@1.15.0',
npm WARN EBADENGINE   required: {
npm WARN EBADENGINE     node: '>=12.13.0 <13.0.0 || >=14.15.0 <15.0.0 || >=16.13.0 <17.0.0'
npm WARN EBADENGINE   },
npm WARN EBADENGINE   current: { node: 'v18.17.1', npm: '9.6.7' }
npm WARN EBADENGINE }
npm WARN deprecated spfx-uifabric-themes@0.9.0: spfx-uifabric-themes got replaced by hTWOo - https://my.n8d.at/hTWOo and check the updated documentation for this package: https://lab.n8d.studio/spfx-uifabric-themes/
npm WARN deprecated msal@1.4.18: This package is no longer supported. Please use @azure/msal-browser instead.

added 1 package, changed 272 packages, and audited 3241 packages in 2m

259 packages are looking for funding
  run `npm fund` for details

77 vulnerabilities (1 low, 50 moderate, 25 high, 1 critical)

To address issues that do not require attention, run:
  npm audit fix

To address all issues possible (including breaking changes), run:
  npm audit fix --force

Some issues need review, and may require choosing
a different dependency.

Run `npm audit` for details.

[AJIXuMuK]

@Tanddant - please, remove spfx fast serve dependency from your solution.
Controls may give you warnings but not error.