1

While following this training unit by Microsoft Exercise - Use the SPFx PnP reusable property pane controls I encounter errors, any advice on how to resolve these issues?

Environment Info

  • Platform: Windows
  • nodeJS v16.18.1
  • npm 8.19.2
  • gulp CLI version: 2.3.0
  • gulp Local version: 4.0.2
  • yeoman 4.3.1
  • @microsoft/generator-sharepoint@1.16.1

Problem

When I execute the following command

  npm install @pnp/spfx-property-controls --save --save-exact

I get this output:

    npm WARN ERESOLVE overriding peer dependency
    npm WARN While resolving: react-ace@5.8.0
    npm WARN Found: react@17.0.1
    npm WARN node_modules/@pnp/spfx-property-controls/node_modules/react
    npm WARN   react@"17.0.1" from @pnp/spfx-property-controls@3.11.0
    npm WARN   node_modules/@pnp/spfx-property-controls
    npm WARN     @pnp/spfx-property-controls@"*" from the root project
    npm WARN   6 more (@microsoft/sp-core-library, ...)
    npm WARN
    npm WARN Could not resolve dependency:
    npm WARN peer react@"^0.13.0 || ^0.14.0 || ^15.0.1 || ^16.0.0" from react-ace@5.8.0
    npm WARN node_modules/@pnp/spfx-property-controls/node_modules/react-ace
    npm WARN   react-ace@"5.8.0" from @pnp/spfx-property-controls@3.11.0
    npm WARN   node_modules/@pnp/spfx-property-controls
    npm WARN
    npm WARN Conflicting peer dependency: react@16.14.0
    npm WARN node_modules/react
    npm WARN   peer react@"^0.13.0 || ^0.14.0 || ^15.0.1 || ^16.0.0" from react-ace@5.8.0
    npm WARN   node_modules/@pnp/spfx-property-controls/node_modules/react-ace
    npm WARN     react-ace@"5.8.0" from @pnp/spfx-property-controls@3.11.0
    npm WARN     node_modules/@pnp/spfx-property-controls
    npm WARN ERESOLVE overriding peer dependency
    npm WARN While resolving: react-ace@5.8.0
    npm WARN Found: react-dom@17.0.1
    npm WARN node_modules/@pnp/spfx-property-controls/node_modules/react-dom
    npm WARN   react-dom@"17.0.1" from @pnp/spfx-property-controls@3.11.0
    npm WARN   node_modules/@pnp/spfx-property-controls
    npm WARN     @pnp/spfx-property-controls@"*" from the root project
    npm WARN   5 more (@microsoft/sp-core-library, ...)
    npm WARN
    npm WARN Could not resolve dependency:
    npm WARN peer react-dom@"^0.13.0 || ^0.14.0 || ^15.0.1 || ^16.0.0" from react-ace@5.8.0
    npm WARN node_modules/@pnp/spfx-property-controls/node_modules/react-ace
    npm WARN   react-ace@"5.8.0" from @pnp/spfx-property-controls@3.11.0
    npm WARN   node_modules/@pnp/spfx-property-controls
    npm WARN
    npm WARN Conflicting peer dependency: react-dom@16.14.0
    npm WARN node_modules/react-dom
    npm WARN   peer react-dom@"^0.13.0 || ^0.14.0 || ^15.0.1 || ^16.0.0" from react-ace@5.8.0
    npm WARN   node_modules/@pnp/spfx-property-controls/node_modules/react-ace
    npm WARN     react-ace@"5.8.0" from @pnp/spfx-property-controls@3.11.0
    npm WARN     node_modules/@pnp/spfx-property-controls

    added 50 packages, and audited 2693 packages in 53s

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

    86 vulnerabilities (30 moderate, 47 high, 9 critical)

After performing the edits to the default project template as described in the tutorial gulp serve is successful - no errors, but the workbench displays an error (several other errors in dev tools as well)

enter image description here

The componentId in message:

Manifest not found for component id "0d910c1c-13b9-4e1c-9aa4-b008c5e42d7d" and version "17.0.2". refers to react components.

    {
      "componentId": "0d910c1c-13b9-4e1c-9aa4-b008c5e42d7d",
      "componentName": "react",
      "componentVersion": "17.0.1",
      "isDirectDependency": false
    },
    {
      "componentId": "0d910c1c-13b9-4e1c-9aa4-b008c5e42d7d",
      "componentName": "react",
      "componentVersion": "17.0.2",
      "isDirectDependency": true
    }

Any help is appreciated.

B-and-P
  • 1,693
  • 10
  • 26

0 Answers0