"gulp servire" è il ritorno workbench.html che non riesco ad aggiungere la web part

Question 1

Ho sviluppato un SPFx parte web con questo dettaglio:-

yo-rc.json per il progetto è:-

{
  "@microsoft/generator-sharepoint": {
    "isCreatingSolution": true,
    "environment": "spo",
    "version": "1.12.1",
    "libraryName": "spfx-my-modal-popup",
    "libraryId": "616c9b54-d123-42d8-9942-9abb0fe4f46c",
    "packageManager": "npm",
    "isDomainIsolated": false,
    "componentType": "webpart"
  }
}

ora ho installato nvm per essere in grado di eseguire più di nodo versioni, ecco quello che ho fatto finora:-

1 - installa la versione nodo 10.24.1 , quindi lo uso come segue :-

nvm use 10.24.1

2 - ho eseguito :-

gulp serve

Il https://localhost:4321/temp/workbench.html aperto, ma quando ho provato ad aggiungere la web part cliccando sull'icona+, si ottiene questo errore all'interno del F12 developer tool:-

qui è l'errore completo:-

[1636842661379][PropertyPaneLoader] [SPLoaderError.loadComponentError]:

***Failed to load component "f9e737b7-f0df-4597-ba8c-3060f82380db" (SPPropertyPane). Original error: ***Failed to load URL 'https://localhost:4321/node_modules/@microsoft/sp-property-pane/dist/dist/sp-property-pane_en-us.js' for resource 'sp-property-pane' in component 'f9e737b7-f0df-4597-ba8c-3060f82380db' (SPPropertyPane). The file was not found in the server. Make sure that you are running 'gulp serve'.



***INNERERROR:

***Failed to load URL 'https://localhost:4321/node_modules/@microsoft/sp-property-pane/dist/dist/sp-property-pane_en-us.js' for resource 'sp-property-pane' in component 'f9e737b7-f0df-4597-ba8c-3060f82380db' (SPPropertyPane). The file was not found in the server. Make sure that you are running 'gulp serve'.

***CALLSTACK:

SPError@https://localhost:4321/temp/workbench-packages/@microsoft_sp-webpart-workbench/local-workbench/sp-webpart-workbench-assembly_default.js:24443:24
SPLoaderError@https://localhost:4321/temp/workbench-packages/@microsoft_sp-webpart-workbench/local-workbench/sp-webpart-workbench-assembly_default.js:42161:28
ff4n/ErrorBuilder</ErrorBuilder.buildErrorWithVerboseLog@https://localhost:4321/temp/workbench-packages/@microsoft_sp-webpart-workbench/local-workbench/sp-webpart-workbench-assembly_default.js:46155:21
ff4n/ErrorBuilder</ErrorBuilder.buildLoadComponentError@https://localhost:4321/temp/workbench-packages/@microsoft_sp-webpart-workbench/local-workbench/sp-webpart-workbench-assembly_default.js:46024:21
_loadComponentImpl/<@https://localhost:4321/temp/workbench-packages/@microsoft_sp-webpart-workbench/local-workbench/sp-webpart-workbench-assembly_default.js:45362:75
promise callback*_loadComponentImpl@https://localhost:4321/temp/workbench-packages/@microsoft_sp-webpart-workbench/local-workbench/sp-webpart-workbench-assembly_default.js:45361:8
_loadComponentRetryStrategy@https://localhost:4321/temp/workbench-packages/@microsoft_sp-webpart-workbench/local-workbench/sp-webpart-workbench-assembly_default.js:45299:12
_loadComponentRetryStrategy/<@https://localhost:4321/temp/workbench-packages/@microsoft_sp-webpart-workbench/local-workbench/sp-webpart-workbench-assembly_default.js:45309:20
promise callback*_loadComponentRetryStrategy@https://localhost:4321/temp/workbench-packages/@microsoft_sp-webpart-workbench/local-workbench/sp-webpart-workbench-assembly_default.js:45304:10
_loadComponentRetryStrategy/<@https://localhost:4321/temp/workbench-packages/@microsoft_sp-webpart-workbench/local-workbench/sp-webpart-workbench-assembly_default.js:45309:20
promise callback*_loadComponentRetryStrategy@https://localhost:4321/temp/workbench-packages/@microsoft_sp-webpart-workbench/local-workbench/sp-webpart-workbench-assembly_default.js:45304:10
loadComponent@https://localhost:4321/temp/workbench-packages/@microsoft_sp-webpart-workbench/local-workbench/sp-webpart-workbench-assembly_default.js:45281:55
++S4/SPRequireJsComponentLoader</SPRequireJsComponentLoader.prototype._loadComponentWithExecutor@https://localhost:4321/temp/workbench-packages/@microsoft_sp-webpart-workbench/local-workbench/sp-webpart-workbench-assembly_default.js:41771:85
td2X/LoadComponentExecutor</LoadComponentExecutor.prototype.loadComponent@https://localhost:4321/temp/workbench-packages/@microsoft_sp-webpart-workbench/local-workbench/sp-webpart-workbench-assembly_default.js:46896:21
++S4/SPRequireJsComponentLoader</SPRequireJsComponentLoader.prototype.loadComponent@https://localhost:4321/temp/workbench-packages/@microsoft_sp-webpart-workbench/local-workbench/sp-webpart-workbench-assembly_default.js:41742:44
Uk6p/BaseComponentLoader</BaseComponentLoader.prototype.loadComponentById@https://localhost:4321/temp/workbench-packages/@microsoft_sp-webpart-workbench/local-workbench/sp-webpart-workbench-assembly_default.js:44816:25
KZU3/SPComponentLoader</SPComponentLoader.loadComponentById@https://localhost:4321/temp/workbench-packages/@microsoft_sp-webpart-workbench/local-workbench/sp-webpart-workbench-assembly_default.js:43438:44
get@https://localhost:4321/temp/workbench-packages/@microsoft_sp-webpart-workbench/local-workbench/sp-webpart-workbench-assembly_default.js:110639:99
set@https://localhost:4321/temp/workbench-packages/@microsoft_sp-webpart-workbench/local-workbench/sp-webpart-workbench-assembly_default.js:16957:21
set@https://localhost:4321/temp/workbench-packages/@microsoft_sp-webpart-workbench/local-workbench/sp-webpart-workbench-assembly_default.js:14989:13
CanvasToolboxHint/_this._handleClick@https://localhost:4321/temp/workbench-packages/@microsoft_sp-webpart-workbench/local-workbench/chunk.sp-canvas-edit_7833b0118fe685da1388.js:3982:17
callCallback@https://localhost:4321/temp/workbench-packages/@microsoft_sp-webpart-workbench/local-workbench/sp-webpart-workbench-assembly_default.js:75432:14
invokeGuardedCallbackDev@https://localhost:4321/temp/workbench-packages/@microsoft_sp-webpart-workbench/local-workbench/sp-webpart-workbench-assembly_default.js:75482:16
invokeGuardedCallback@https://localhost:4321/temp/workbench-packages/@microsoft_sp-webpart-workbench/local-workbench/sp-webpart-workbench-assembly_default.js:75539:31
invokeGuardedCallbackAndCatchFirstError@https://localhost:4321/temp/workbench-packages/@microsoft_sp-webpart-workbench/local-workbench/sp-webpart-workbench-assembly_default.js:75553:25
executeDispatch@https://localhost:4321/temp/workbench-packages/@microsoft_sp-webpart-workbench/local-workbench/sp-webpart-workbench-assembly_default.js:75844:42
executeDispatchesInOrder@https://localhost:4321/temp/workbench-packages/@microsoft_sp-webpart-workbench/local-workbench/sp-webpart-workbench-assembly_default.js:75866:20
executeDispatchesAndRelease@https://localhost:4321/temp/workbench-packages/@microsoft_sp-webpart-workbench/local-workbench/sp-webpart-workbench-assembly_default.js:75963:29
executeDispatchesAndReleaseTopLevel@https://localhost:4321/temp/workbench-packages/@microsoft_sp-webpart-workbench/local-workbench/sp-webpart-workbench-assembly_default.js:75971:10
forEachAccumulated@https://localhost:4321/temp/workbench-packages/@microsoft_sp-webpart-workbench/local-workbench/sp-webpart-workbench-assembly_default.js:75945:8
runEventsInBatch@https://localhost:4321/temp/workbench-packages/@microsoft_sp-webpart-workbench/local-workbench/sp-webpart-workbench-assembly_default.js:76099:21
runExtractedEventsInBatch@https://localhost:4321/temp/workbench-packages/@microsoft_sp-webpart-workbench/local-workbench/sp-webpart-workbench-assembly_default.js:76107:19
handleTopLevel@https://localhost:4321/temp/workbench-packages/@microsoft_sp-webpart-workbench/local-workbench/sp-webpart-workbench-assembly_default.js:80109:30
batchedUpdates$1@https://localhost:4321/temp/workbench-packages/@microsoft_sp-webpart-workbench/local-workbench/sp-webpart-workbench-assembly_default.js:95687:12
batchedUpdates@https://localhost:4321/temp/workbench-packages/@microsoft_sp-webpart-workbench/local-workbench/sp-webpart-workbench-assembly_default.js:77434:12
dispatchEvent@https://localhost:4321/temp/workbench-packages/@microsoft_sp-webpart-workbench/local-workbench/sp-webpart-workbench-assembly_default.js:80188:19
interactiveUpdates$1/<@https://localhost:4321/temp/workbench-packages/@microsoft_sp-webpart-workbench/local-workbench/sp-webpart-workbench-assembly_default.js:95738:14
unstable_runWithPriority@https://localhost:4321/temp/workbench-packages/@microsoft_sp-webpart-workbench/local-workbench/sp-webpart-workbench-assembly_default.js:97248:12
interactiveUpdates$1@https://localhost:4321/temp/workbench-packages/@microsoft_sp-webpart-workbench/local-workbench/sp-webpart-workbench-assembly_default.js:95737:22
sp-webpart-workbench-assembly_default.js:26401:21
Uncaught (in promise) Error: ***Failed to load component "f9e737b7-f0df-4597-ba8c-3060f82380db" (SPPropertyPane). Original error: ***Failed to load URL 'https://localhost:4321/node_modules/@microsoft/sp-property-pane/dist/dist/sp-property-pane_en-us.js' for resource 'sp-property-pane' in component 'f9e737b7-f0df-4597-ba8c-3060f82380db' (SPPropertyPane). The file was not found in the server. Make sure that you are running 'gulp serve'.
    SPError https://localhost:4321/temp/workbench-packages/@microsoft_sp-webpart-workbench/local-workbench/sp-webpart-workbench-assembly_default.js:24443
    SPLoaderError https://localhost:4321/temp/workbench-packages/@microsoft_sp-webpart-workbench/local-workbench/sp-webpart-workbench-assembly_default.js:42161
    buildErrorWithVerboseLog https://localhost:4321/temp/workbench-packages/@microsoft_sp-webpart-workbench/local-workbench/sp-webpart-workbench-assembly_default.js:46155
    buildLoadComponentError https://localhost:4321/temp/workbench-packages/@microsoft_sp-webpart-workbench/local-workbench/sp-webpart-workbench-assembly_default.js:46024
    _loadComponentImpl https://localhost:4321/temp/workbench-packages/@microsoft_sp-webpart-workbench/local-workbench/sp-webpart-workbench-assembly_default.js:45362
    promise callback*_loadComponentImpl https://localhost:4321/temp/workbench-packages/@microsoft_sp-webpart-workbench/local-workbench/sp-webpart-workbench-assembly_default.js:45361
    _loadComponentRetryStrategy https://localhost:4321/temp/workbench-packages/@microsoft_sp-webpart-workbench/local-workbench/sp-webpart-workbench-assembly_default.js:45299
    _loadComponentRetryStrategy https://localhost:4321/temp/workbench-packages/@microsoft_sp-webpart-workbench/local-workbench/sp-webpart-workbench-assembly_default.js:45309
    promise callback*_loadComponentRetryStrategy https://localhost:4321/temp/workbench-packages/@microsoft_sp-webpart-workbench/local-workbench/sp-webpart-workbench-assembly_default.js:45304
    _loadComponentRetryStrategy https://localhost:4321/temp/workbench-packages/@microsoft_sp-webpart-workbench/local-workbench/sp-webpart-workbench-assembly_default.js:45309
    promise callback*_loadComponentRetryStrategy https://localhost:4321/temp/workbench-packages/@microsoft_sp-webpart-workbench/local-workbench/sp-webpart-workbench-assembly_default.js:45304
    loadComponent https://localhost:4321/temp/workbench-packages/@microsoft_sp-webpart-workbench/local-workbench/sp-webpart-workbench-assembly_default.js:45281
    loadComponent https://localhost:4321/temp/workbench-packages/@microsoft_sp-webpart-workbench/local-workbench/sp-webpart-workbench-assembly_default.js:46458
    _loadComponentImpl https://localhost:4321/temp/workbench-packages/@microsoft_sp-webpart-workbench/local-workbench/sp-webpart-workbench-assembly_default.js:43631
    promise callback*PypK/SystemJsFallbackLoader</SystemJsFallbackLoader.prototype._loadComponentImpl https://localhost:4321/temp/workbench-packages/@microsoft_sp-webpart-workbench/local-workbench/sp-webpart-workbench-assembly_default.js:43621
    loadComponent https://localhost:4321/temp/workbench-packages/@microsoft_sp-webpart-workbench/local-workbench/sp-webpart-workbench-assembly_default.js:46896
    loadComponent https://localhost:4321/temp/workbench-packages/@microsoft_sp-webpart-workbench/local-workbench/sp-webpart-workbench-assembly_default.js:43617
    _loadComponentWithExecutor https://localhost:4321/temp/workbench-packages/@microsoft_sp-webpart-workbench/local-workbench/sp-webpart-workbench-assembly_default.js:41781
    promise callback*++S4/SPRequireJsComponentLoader</SPRequireJsComponentLoader.prototype._loadComponentWithExecutor https://localhost:4321/temp/workbench-packages/@microsoft_sp-webpart-workbench/local-workbench/sp-webpart-workbench-assembly_default.js:41777
    loadComponent https://localhost:4321/temp/workbench-packages/@microsoft_sp-webpart-workbench/local-workbench/sp-webpart-workbench-assembly_default.js:46896
    loadComponent https://localhost:4321/temp/workbench-packages/@microsoft_sp-webpart-workbench/local-workbench/sp-webpart-workbench-assembly_default.js:41742
    loadComponentById https://localhost:4321/temp/workbench-packages/@microsoft_sp-webpart-workbench/local-workbench/sp-webpart-workbench-assembly_default.js:44816
    loadComponentById https://localhost:4321/temp/workbench-packages/@microsoft_sp-webpart-workbench/local-workbench/sp-webpart-workbench-assembly_default.js:43438
    get https://localhost:4321/temp/workbench-packages/@microsoft_sp-webpart-workbench/local-workbench/sp-webpart-workbench-assembly_default.js:110639
    set https://localhost:4321/temp/workbench-packages/@microsoft_sp-webpart-workbench/local-workbench/sp-webpart-workbench-assembly_default.js:16957
    set https://localhost:4321/temp/workbench-packages/@microsoft_sp-webpart-workbench/local-workbench/sp-webpart-workbench-assembly_default.js:14989
    _handleClick https://localhost:4321/temp/workbench-packages/@microsoft_sp-webpart-workbench/local-workbench/chunk.sp-canvas-edit_7833b0118fe685da1388.js:3982
    callCallback https://localhost:4321/temp/workbench-packages/@microsoft_sp-webpart-workbench/local-workbench/sp-webpart-workbench-assembly_default.js:75432
    invokeGuardedCallbackDev https://localhost:4321/temp/workbench-packages/@microsoft_sp-webpart-workbench/local-workbench/sp-webpart-workbench-assembly_default.js:75482
    invokeGuardedCallback https://localhost:4321/temp/workbench-packages/@microsoft_sp-webpart-workbench/local-workbench/sp-webpart-workbench-assembly_default.js:75539
    invokeGuardedCallbackAndCatchFirstError https://localhost:4321/temp/workbench-packages/@microsoft_sp-webpart-workbench/local-workbench/sp-webpart-workbench-assembly_default.js:75553
    executeDispatch https://localhost:4321/temp/workbench-packages/@microsoft_sp-webpart-workbench/local-workbench/sp-webpart-workbench-assembly_default.js:75844
    executeDispatchesInOrder https://localhost:4321/temp/workbench-packages/@microsoft_sp-webpart-workbench/local-workbench/sp-webpart-workbench-assembly_default.js:75866
    executeDispatchesAndRelease https://localhost:4321/temp/workbench-packages/@microsoft_sp-webpart-workbench/local-workbench/sp-webpart-workbench-assembly_default.js:75963
    executeDispatchesAndReleaseTopLevel https://localhost:4321/temp/workbench-packages/@microsoft_sp-webpart-workbench/local-workbench/sp-webpart-workbench-assembly_default.js:75971
    forEachAccumulated https://localhost:4321/temp/workbench-packages/@microsoft_sp-webpart-workbench/local-workbench/sp-webpart-workbench-assembly_default.js:75945
    runEventsInBatch https://localhost:4321/temp/workbench-packages/@microsoft_sp-webpart-workbench/local-workbench/sp-webpart-workbench-assembly_default.js:76099
    runExtractedEventsInBatch https://localhost:4321/temp/workbench-packages/@microsoft_sp-webpart-workbench/local-workbench/sp-webpart-workbench-assembly_default.js:76107
    handleTopLevel https://localhost:4321/temp/workbench-packages/@microsoft_sp-webpart-workbench/local-workbench/sp-webpart-workbench-assembly_default.js:80109
    batchedUpdates$1 https://localhost:4321/temp/workbench-packages/@microsoft_sp-webpart-workbench/local-workbench/sp-webpart-workbench-assembly_default.js:95687
    batchedUpdates https://localhost:4321/temp/workbench-packages/@microsoft_sp-webpart-workbench/local-workbench/sp-webpart-workbench-assembly_default.js:77434
    dispatchEvent https://localhost:4321/temp/workbench-packages/@microsoft_sp-webpart-workbench/local-workbench/sp-webpart-workbench-assembly_default.js:80188
    1 https://localhost:4321/temp/workbench-packages/@microsoft_sp-webpart-workbench/local-workbench/sp-webpart-workbench-assembly_default.js:95738
    unstable_runWithPriority https://localhost:4321/temp/workbench-packages/@microsoft_sp-webpart-workbench/local-workbench/sp-webpart-workbench-assembly_default.js:97248
    interactiveUpdates$1 https://localhost:4321/temp/workbench-packages/@microsoft_sp-webpart-workbench/local-workbench/sp-webpart-workbench-assembly_default.js:95737
    interactiveUpdates https://localhost:4321/temp/workbench-packages/@microsoft_sp-webpart-workbench/local-workbench/sp-webpart-workbench-assembly_default.js:77453
    dispatchInteractiveEvent https://localhost:4321/temp/workbench-packages/@microsoft_sp-webpart-workbench/local-workbench/sp-webpart-workbench-assembly_default.js:80165
sp-webpart-workbench-assembly_default.js:24430:28
Uncaught (in promise) Error: ***Failed to load component "f9e737b7-f0df-4597-ba8c-3060f82380db" (SPPropertyPane). Original error: ***Failed to load URL 'https://localhost:4321/node_modules/@microsoft/sp-property-pane/dist/dist/sp-property-pane_en-us.js' for resource 'sp-property-pane' in component 'f9e737b7-f0df-4597-ba8c-3060f82380db' (SPPropertyPane). The file was not found in the server. Make sure that you are running 'gulp serve'.
    SPError https://localhost:4321/temp/workbench-packages/@microsoft_sp-webpart-workbench/local-workbench/sp-webpart-workbench-assembly_default.js:24443
    SPLoaderError https://localhost:4321/temp/workbench-packages/@microsoft_sp-webpart-workbench/local-workbench/sp-webpart-workbench-assembly_default.js:42161
    buildErrorWithVerboseLog https://localhost:4321/temp/workbench-packages/@microsoft_sp-webpart-workbench/local-workbench/sp-webpart-workbench-assembly_default.js:46155
    buildLoadComponentError https://localhost:4321/temp/workbench-packages/@microsoft_sp-webpart-workbench/local-workbench/sp-webpart-workbench-assembly_default.js:46024
    _loadComponentImpl https://localhost:4321/temp/workbench-packages/@microsoft_sp-webpart-workbench/local-workbench/sp-webpart-workbench-assembly_default.js:45362
    promise callback*_loadComponentImpl https://localhost:4321/temp/workbench-packages/@microsoft_sp-webpart-workbench/local-workbench/sp-webpart-workbench-assembly_default.js:45361
    _loadComponentRetryStrategy https://localhost:4321/temp/workbench-packages/@microsoft_sp-webpart-workbench/local-workbench/sp-webpart-workbench-assembly_default.js:45299
    _loadComponentRetryStrategy https://localhost:4321/temp/workbench-packages/@microsoft_sp-webpart-workbench/local-workbench/sp-webpart-workbench-assembly_default.js:45309
    promise callback*_loadComponentRetryStrategy https://localhost:4321/temp/workbench-packages/@microsoft_sp-webpart-workbench/local-workbench/sp-webpart-workbench-assembly_default.js:45304
    _loadComponentRetryStrategy https://localhost:4321/temp/workbench-packages/@microsoft_sp-webpart-workbench/local-workbench/sp-webpart-workbench-assembly_default.js:45309
    promise callback*_loadComponentRetryStrategy https://localhost:4321/temp/workbench-packages/@microsoft_sp-webpart-workbench/local-workbench/sp-webpart-workbench-assembly_default.js:45304
    loadComponent https://localhost:4321/temp/workbench-packages/@microsoft_sp-webpart-workbench/local-workbench/sp-webpart-workbench-assembly_default.js:45281
    _loadComponentWithExecutor https://localhost:4321/temp/workbench-packages/@microsoft_sp-webpart-workbench/local-workbench/sp-webpart-workbench-assembly_default.js:41771
    loadComponent https://localhost:4321/temp/workbench-packages/@microsoft_sp-webpart-workbench/local-workbench/sp-webpart-workbench-assembly_default.js:46896
    loadComponent https://localhost:4321/temp/workbench-packages/@microsoft_sp-webpart-workbench/local-workbench/sp-webpart-workbench-assembly_default.js:41742
    loadComponentById https://localhost:4321/temp/workbench-packages/@microsoft_sp-webpart-workbench/local-workbench/sp-webpart-workbench-assembly_default.js:44816
    loadComponentById https://localhost:4321/temp/workbench-packages/@microsoft_sp-webpart-workbench/local-workbench/sp-webpart-workbench-assembly_default.js:43438
    get https://localhost:4321/temp/workbench-packages/@microsoft_sp-webpart-workbench/local-workbench/sp-webpart-workbench-assembly_default.js:110639
    set https://localhost:4321/temp/workbench-packages/@microsoft_sp-webpart-workbench/local-workbench/sp-webpart-workbench-assembly_default.js:16957
    set https://localhost:4321/temp/workbench-packages/@microsoft_sp-webpart-workbench/local-workbench/sp-webpart-workbench-assembly_default.js:14989
    _handleClick https://localhost:4321/temp/workbench-packages/@microsoft_sp-webpart-workbench/local-workbench/chunk.sp-canvas-edit_7833b0118fe685da1388.js:3982
    callCallback https://localhost:4321/temp/workbench-packages/@microsoft_sp-webpart-workbench/local-workbench/sp-webpart-workbench-assembly_default.js:75432
    invokeGuardedCallbackDev https://localhost:4321/temp/workbench-packages/@microsoft_sp-webpart-workbench/local-workbench/sp-webpart-workbench-assembly_default.js:75482
    invokeGuardedCallback https://localhost:4321/temp/workbench-packages/@microsoft_sp-webpart-workbench/local-workbench/sp-webpart-workbench-assembly_default.js:75539
    invokeGuardedCallbackAndCatchFirstError https://localhost:4321/temp/workbench-packages/@microsoft_sp-webpart-workbench/local-workbench/sp-webpart-workbench-assembly_default.js:75553
    executeDispatch https://localhost:4321/temp/workbench-packages/@microsoft_sp-webpart-workbench/local-workbench/sp-webpart-workbench-assembly_default.js:75844
    executeDispatchesInOrder https://localhost:4321/temp/workbench-packages/@microsoft_sp-webpart-workbench/local-workbench/sp-webpart-workbench-assembly_default.js:75866
    executeDispatchesAndRelease https://localhost:4321/temp/workbench-packages/@microsoft_sp-webpart-workbench/local-workbench/sp-webpart-workbench-assembly_default.js:75963
    executeDispatchesAndReleaseTopLevel https://localhost:4321/temp/workbench-packages/@microsoft_sp-webpart-workbench/local-workbench/sp-webpart-workbench-assembly_default.js:75971
    forEachAccumulated https://localhost:4321/temp/workbench-packages/@microsoft_sp-webpart-workbench/local-workbench/sp-webpart-workbench-assembly_default.js:75945
    runEventsInBatch https://localhost:4321/temp/workbench-packages/@microsoft_sp-webpart-workbench/local-workbench/sp-webpart-workbench-assembly_default.js:76099
    runExtractedEventsInBatch https://localhost:4321/temp/workbench-packages/@microsoft_sp-webpart-workbench/local-workbench/sp-webpart-workbench-assembly_default.js:76107
    handleTopLevel https://localhost:4321/temp/workbench-packages/@microsoft_sp-webpart-workbench/local-workbench/sp-webpart-workbench-assembly_default.js:80109
    batchedUpdates$1 https://localhost:4321/temp/workbench-packages/@microsoft_sp-webpart-workbench/local-workbench/sp-webpart-workbench-assembly_default.js:95687
    batchedUpdates https://localhost:4321/temp/workbench-packages/@microsoft_sp-webpart-workbench/local-workbench/sp-webpart-workbench-assembly_default.js:77434
    dispatchEvent https://localhost:4321/temp/workbench-packages

qui è il mio MyModalPopupWebPart.ts:-

import * as React from 'react';
import * as ReactDom from 'react-dom';
import { Version } from '@microsoft/sp-core-library';
import {
  IPropertyPaneConfiguration,
  PropertyPaneTextField
} from '@microsoft/sp-property-pane';
import { BaseClientSideWebPart } from '@microsoft/sp-webpart-base';

import * as strings from 'MyModalPopupWebPartStrings';
import MyModalPopup from './components/MyModalPopup';
import { IMyModalPopupProps } from './components/IMyModalPopupProps';

export interface IMyModalPopupWebPartProps {
  description: string;
  WhoWeAre: string;
  OurValue:string;
}

export default class MyModalPopupWebPart extends BaseClientSideWebPart<IMyModalPopupWebPartProps> {

  public render(): void {
    const element: React.ReactElement<IMyModalPopupProps> = React.createElement(
      MyModalPopup,
      {
        description: this.properties.description,
        WhoWeAre: this.properties.WhoWeAre,
        OurValue: this.properties.OurValue
      }
    );

    ReactDom.render(element, this.domElement);
  }

  protected onDispose(): void {
    ReactDom.unmountComponentAtNode(this.domElement);
  }

  protected get dataVersion(): Version {
    return Version.parse('1.0');
  }

  protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration {
    return {
      pages: [
        {
          header: {
            description: strings.PropertyPaneDescription
          },
          groups: [
            {
              groupName: strings.BasicGroupName,
              groupFields: [
                PropertyPaneTextField('WhoWeAre', {
                  label: "who We Are",
                  multiline: true
                }),
                PropertyPaneTextField('OurValue', {
                  label: "Our value",
                  multiline: true
                }), PropertyPaneTextField('description', {
                  label: "Description"
                }),
              ]
            }
          ]
        }
      ]
    };
  }
}

qui è il mio MYModal.tsx:-

import * as React from 'react';
import { useId, useBoolean } from '@fluentui/react-hooks';
import { sanitize } from 'dompurify';
import {
  getTheme,
  mergeStyleSets,
  FontWeights,
  Modal,
  IIconProps,
  IStackProps,
} from '@fluentui/react';
import { IconButton, IButtonStyles } from '@fluentui/react/lib/Button';
export const MYModal = (myprops) => {
  const [isModalOpen, { setTrue: showModal, setFalse: hideModal }] = useBoolean(false);
  const [isPopup, setisPopup] = React.useState(true);
  const titleId = useId('title');
  React.useEffect(() => {
      showModal();
  }, [isPopup]);
  function ExitHandler() {
    hideModal();
    setisPopup(current => !current)
    myprops.handler();
  }

  return (
    <div>
      <Modal
        titleAriaId={titleId}
        isOpen={isModalOpen}
        onDismiss={ExitHandler}
        isBlocking={true}
        containerClassName={contentStyles.container}
      >
        <div className={contentStyles.header}>
          <span id={titleId}>Modal Popup</span>
          <IconButton
            styles={iconButtonStyles}
            iconProps={cancelIcon}
            ariaLabel="Close popup modal"
            onClick={ExitHandler}
          />
        </div>
        <div  className={contentStyles.body}>
        <div dangerouslySetInnerHTML={{ __html: sanitize(myprops.WhoWeAre) }} />

        </div>
      </Modal>

    </div>

  );
};

qui è il mio MyModalPopup.tsx:-

import * as React from 'react';
import { IMyModalPopupProps } from './IMyModalPopupProps';
import { DefaultButton } from '@fluentui/react/lib/Button';
import { MYModal } from './MYModal';
import { MYModal2 } from './MYModal2';

interface IPopupState {
  showModal: string;
}

export default class MyModalPopup extends React.Component<IMyModalPopupProps, IPopupState> {
  constructor(props: IMyModalPopupProps, state: IPopupState) {
    super(props);
    this.state = {
      showModal: ''
    };
    this.handler = this.handler.bind(this);
    this.Buttonclick = this.Buttonclick.bind(this);
  }
  handler() {
    this.setState({
      showModal: ''
    })
  }
  private Buttonclick(e, whichModal) {
    e.preventDefault();

    this.setState({ showModal: whichModal });
  }
  public render(): React.ReactElement<IMyModalPopupProps> {

    const { showModal } = this.state;

    return (
      <div>

        <DefaultButton onClick={(e) => this.Buttonclick(e, 'our-value')} text="Our Value" />
        { showModal === 'our-value' && <MYModal2 OurValue={this.props.OurValue} myprops={this.state} handler={this.handler} />}

        <DefaultButton onClick={(e) => this.Buttonclick(e, 'who-we-are')} text="Who We Are" />
        { showModal === 'who-we-are' && <MYModal WhoWeAre={this.props.WhoWeAre} myprops={this.state} handler={this.handler} />}
      </div>
    );
  }
}

Question 2

Sembra che ci sia un doppio "dist" nell'URL. È necessario rimuovere uno in qualche modo:

.../sp-property-pane/dist/dist/sp-property-pane_en/...

Sembra essere un progetto di configurazione errata problema. Ti consiglierei di creare un nuovo progetto, seguendo i passi da "getting started" tutorial ufficiale qui:

https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part

Assicurarsi di avere la versione consigliata di nodo installato (c'è "impostare l'ambiente di sviluppo" capitolo, si prega di assicurarsi di seguire quello che è scritto lì).

Nikolay · Answer 1 · 2021-11-14T14:15:20

1

Sembra che ci sia un doppio "dist" nell'URL. È necessario rimuovere uno in qualche modo:

.../sp-property-pane/dist/dist/sp-property-pane_en/...

Sembra essere un progetto di configurazione errata problema. Ti consiglierei di creare un nuovo progetto, seguendo i passi da "getting started" tutorial ufficiale qui:

https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part

Assicurarsi di avere la versione consigliata di nodo installato (c'è "impostare l'ambiente di sviluppo" capitolo, si prega di assicurarsi di seguire quello che è scritto lì).

Nikolay

2021-11-14 14:15:20

quando ho provato a creare un nuovo " Ciao mondo web part,,, e ho eseguito gulp serve si ottiene questo errore Cannot GET /temp/workbench.html .. ecco il mio .yo-rc

{ "@microsoft/generator-sharepoint": { "plusBeta": false, "isCreatingSolution": true, "environment": "spo", "version": "1.13.0", "libraryName": "f", "libraryId": "ef98ebd8-128a-4417-a2b8-d57a9f3e3df4", "packageManager": "npm", "isDomainIsolated": false, "componentType": "webpart" } }

qualche idea?

john Gu

Si prega di assicurarsi che si sta utilizzando supportati versione NODO e seguire il tutorial. Funziona. Ti consiglierei di eliminare il .yo-rc file e ricominciare da zero.

Nikolay

versione nodo è C:\f>node -v v12.22.7.. e SPFx versione è 1.13.0 quindi entrambi devono lavorare bene insieme

john Gu

Non ho controllato con 1.13.0 (è stato rilasciato da poco). Per quanto ricordo hanno detto che non si denigrano locali di lavoro, solo telecomando verrà supportato a partire da 1.13. Che questo possa essere in qualche modo correlati?

Nikolay

sì, ho cambiato il "initialPage": "https://myrealserver.sharepoint.com/_layouts/workbench.aspx" e ciao mondo sta lavorando bene

john Gu

quindi tornando alla mia domanda ... perchè il mio web part che hanno SPFX version "version": "1.12.1", & node version 10.24.1` non funziona quando corro gulp serve

john Gu

Si può condividere il codice completo e config (come repo github per esempio)? In caso contrario, è difficile da dire, davvero )

Nikolay

ok ho fornito il codice completo

john Gu

"gulp servire" è il ritorno workbench.html che non riesco ad aggiungere la web part

Domanda

Migliore risposta

In altre lingue

Questa pagina è in altre lingue

Popolare in questa categoria

Domande popolari in questa categoria