我正在使用 Sharepoint 框架构建 Sharepoint webpart。我已按照https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part中描述的步骤进行操作，结果在 Visual Studio Code 中打开的 TypeScript 解决方案中。简而言之，这些是我执行的命令行指令：
- 光盘源
- md dev-extreme-test2
- cd dev-extreme-test2
- 哟@microsoft/sharepoint
- 代码 。
下一步是更改 render() 方法以显示带有 DevExtreme 控件的简单 Web 部件。这意味着对主要 TypeScript 文件中的 render() 方法进行更改。出于我的意图和目的，我选择了 Calendar 控件。这是我的代码：
import { Version } from '@microsoft/sp-core-library';
import {
IPropertyPaneConfiguration,
PropertyPaneTextField
} from '@microsoft/sp-property-pane';
import { BaseClientSideWebPart } from '@microsoft/sp-webpart-base';
import { escape } from '@microsoft/sp-lodash-subset';
//import styles from './DevExtremeTest2WebPart.module.scss';
//import styles from './content/css/styles'
import * as strings from 'DevExtremeTest2WebPartStrings';
//var styles = require("./content/css/styles.css", "./content/css/dx.dark.css", "./content/css/dx.light.css");
//require('../../../node_modules/jquery-ui/ui/widgets/accordion');
//require('./content/js/UI/calendar');
require('../../../node_modules/devextreme/ui/calendar');
//require("./content/css/styles.css");
// require("./content/css/dx.light.css");
// require("./content/css/dx.dark.css");
require("./content/css/styles.css");
require('../../../node_modules/devextreme/dist/css/dx.light.css');
require('../../../node_modules/devextreme/dist/css/dx.dark.css');
export interface IDevExtremeTest2WebPartProps {
description: string;
}
export default class DevExtremeTest2WebPart extends BaseClientSideWebPart <IDevExtremeTest2WebPartProps> {
public render(): void {
this.domElement.innerHTML =
`<div class="demo-container">
<div id="calendar-demo">
<div class="widget-container">
<div id="calendar-container"></div>
</div>
<div class="options">
<div class="caption">Options</div>
<div class="option">
<div id="min-date"></div>
</div>
<div class="option">
<div id="max-date"></div>
</div>
<div class="option">
<div id="disable-dates"></div>
</div>
<div class="option">
<div id="first-day"></div>
</div>
<div class="option">
<div id="custom-cell"></div>
</div>
<div class="option">
<div id="disabled"></div>
</div>
<div class="option">
<span>Zoom level</span>
<div id="zoom-level"></div>
</div>
<div class="option">
<span>Selected date</span>
<div id="selected-date"></div>
</div>
</div>
</div>
</div>`;
}
protected get dataVersion(): Version {
return Version.parse('1.0');
}
protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration {
return {
pages: [
{
header: {
description: strings.PropertyPaneDescription
},
groups: [
{
groupName: strings.BasicGroupName,
groupFields: [
PropertyPaneTextField('description', {
label: strings.DescriptionFieldLabel
})
]
}
]
}
]
};
}
}
但是当我尝试在 Visual Studio Code 中构建和运行解决方案时，我收到以下错误：在命令提示符中：
[09:16:47] Error - [webpack] 'dist':
./node_modules/devextreme/dist/css/icons/dxicons.woff2 1:4
Module parse failed: Unexpected character ' ' (1:4)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
(Source code omitted for this binary file)
@ ./node_modules/devextreme/dist/css/dx.dark.css (./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/src??postcss!./node_modules/devextreme/dist/css/dx.dark.css) 4:41-73
@ ./node_modules/devextreme/dist/css/dx.dark.css
@ ./lib/webparts/devExtremeTest2/DevExtremeTest2WebPart.js
在“虚拟”共享点页面上：
[SPLoaderError.loadComponentError]:
***Failed to load component "bf6c7d07-342b-49b7-bd97-5f193cbdeadb" (DevExtremeTest2WebPart). Original error: ***Failed to load entry point from component "bf6c7d07-342b-49b7-bd97-5f193cbdeadb" (DevExtremeTest2WebPart). Original error: Error loading https://component-id.invalid/bf6c7d07-342b-49b7-bd97-5f193cbdeadb_0.0.1
Module parse failed: Unexpected character '' (1:4)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
(Source code omitted for this binary file)
***INNERERROR:
***Failed to load entry point from component "bf6c7d07-342b-49b7-bd97-5f193cbdeadb" (DevExtremeTest2WebPart). Original error: Error loading https://component-id.invalid/bf6c7d07-342b-49b7-bd97-5f193cbdeadb_0.0.1
Module parse failed: Unexpected character '' (1:4)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
(Source code omitted for this binary file)
***CALLSTACK:
Error
at SPLoaderError.SPError [as constructor] (https://localhost:4321/temp/workbench-packages/@microsoft_sp-webpart-workbench/local-workbench/sp-webpart-workbench-assembly_default.js:24453:24)
at new SPLoaderError (https://localhost:4321/temp/workbench-packages/@microsoft_sp-webpart-workbench/local-workbench/sp-webpart-workbench-assembly_default.js:42171:28)
at Function../sp-loader.js.__WEBPACK_AMD_DEFINE_RESULT__.ff4n.ErrorBuilder.buildErrorWithVerboseLog (https://localhost:4321/temp/workbench-packages/@microsoft_sp-webpart-workbench/local-workbench/sp-webpart-workbench-assembly_default.js:46165:21)
at Function../sp-loader.js.__WEBPACK_AMD_DEFINE_RESULT__.ff4n.ErrorBuilder.buildLoadComponentError (https://localhost:4321/temp/workbench-packages/@microsoft_sp-webpart-workbench/local-workbench/sp-webpart-workbench-assembly_default.js:46034:21)
at https://localhost:4321/temp/workbench-packages/@microsoft_sp-webpart-workbench/local-workbench/sp-webpart-workbench-assembly_default.js:45372:75
我试过的
- 我尝试按照以下步骤使用 jQuery Accordion 控件构建一个完全不同的 webpart：https ://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/guidance/reference-third-party- css-styles并尝试使用 DevExtreme Calendar 控件遵循相同的逻辑。
- 我在这里观看了视频-> https://channel9.msdn.com/Events/Visual-Studio/Visual-Studio-2017-Launch/WEB-104，希望我可以将基于 HTML 的解决方案部署为 webpart，但是该视频遗漏了太多步骤，因此我实际上无法将其部署到 Microsoft Teams。
请帮忙！我已经坚持了大约一个星期了！
感谢大家！