"꿀꺽 봉사하는"돌아 workbench.html 할 수 있는지에 웹 파트를 추가

Question 1

가를 개발하고 SPFx 웹 일부 이 세부 정보:-

yo-rc.json 에 대한 프로젝트:-

{
  "@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"
  }
}

지금 내가 설치 nvm 을 실행할 수 있도록 여러 개의 노드로 버전을,여기에 무엇을 했는지 지금까지:-

1-설치 노드 버전 10.24.1,다음 사용으로 다음과 같습니다:-

nvm use 10.24.1

2-실행:-

gulp serve

이 https://localhost:4321/temp/workbench.html 열려고 했으나 추가 웹에 의해 부분에 아이콘이 나는 것입니다 이 오류가 내부에 F12 개발자 도구:-

여기에는 전체 오류가:-

[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

여기에 나 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"
                }),
              ]
            }
          ]
        }
      ]
    };
  }
}

여기에 나 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>

  );
};

여기에 나 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

그것은 보인다 거기에 더블"dist"URL 에서 당신은 있습니다. 을 제거해야 하나:

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

그것은 있을 것 같 일부 프로젝트는 잘못된 문제입니다. 나는 것이 좋습니다 당신을 새 프로젝트를 만들고,다음과 같은 단계에서"시작"공식적인 자기:

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

이 있는지 확인 권장된 버전의 노드를 설치되어(이"개발 환경 설정"장는지 확인하시기 바랍에 따라 쓰는 것이 있다).

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

1

그것은 보인다 거기에 더블"dist"URL 에서 당신은 있습니다. 을 제거해야 하나:

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

그것은 있을 것 같 일부 프로젝트는 잘못된 문제입니다. 나는 것이 좋습니다 당신을 새 프로젝트를 만들고,다음과 같은 단계에서"시작"공식적인 자기:

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

이 있는지 확인 권장된 버전의 노드를 설치되어(이"개발 환경 설정"장는지 확인하시기 바랍에 따라 쓰는 것이 있다).

Nikolay

2021-11-14 14:15:20

할 때 내가 만들려고 새로운 안녕하세요 세계 web part,,,그리고 실행 gulp serve 제가 이 오류 메시지가 나타납니다 Cannot GET /temp/workbench.html ..여기서 설정한 .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" } }

어떤 생각이 있으십니까?

john Gu

고 있는지 확인하십시오를 사용하여 지원하는 노드로 버전에 따라습니다. 그것은 작업을 수행합니다. 나는 것이 좋습니다 당신을 삭제.yo-rc 파일을 처음부터 시작합니다.

Nikolay

노드로 버전 C:\f>node -v v12.22.7고 SPFx 전 1.13.0 그래서 모두 함께 잘 작동

john Gu

나는 확인하지 않으로 1.13.0(출시되었 최근). 로 기억 그들은 말했다는 것이 대체역 작업,원격 지원을 시작으로 1.13. 수도 있습이 어떻게 든 관련된?

Nikolay

예를 변경했는데도 "initialPage": "https://myrealserver.sharepoint.com/_layouts/workbench.aspx" 와 안녕하세요 세상은 잘 작동

john Gu

그래서 다시 나의 질문을...왜 내 web 부분야 SPFX version "version": "1.12.1", & node version 10.24.1`은 작동하지 않을 때 실행 gulp serve

john Gu

공유할 수 있습니 전체 코드 구성(로 github repo 예를 들어)? 그렇지 않으면,그것은 말하기 어렵,정말)

Nikolay

인 제공합체 코드

john Gu

"꿀꺽 봉사하는"돌아 workbench.html 할 수 있는지에 웹 파트를 추가

질문

최고의 응답

다른 언어로

이 페이지는 다른 언어로되어 있습니다

이 카테고리에서 인기

인기 있는 질문에 이 카테고리