Я нахожусь в процессе создания веб-частей Sharepoint с использованием Sharepoint Framework. Я выполнил шаги, описанные в https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part, что привело к решению на языке TypeScript, открытому в коде Visual Studio. В двух словах, это команды командной строки, которые я выполнил:
- cd source
- md dev-extreme-test2
- cd dev-extreme-test2
- yo @ microsoft / sharepoint
- code.
Следующим шагом является изменение метода render () для отображения простой веб-части с элементом управления DevExtreme. Это подразумевает внесение изменений в метод render () в основном файле TypeScript. Для своих целей я выбрал элемент управления 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, я получаю следующие ошибки: В командной строке:
[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
На "фиктивной" странице Sharepoint:
[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
То, что я пробовал
Пожалуйста, ПОМОГИТЕ! Я застрял с этим около недели!
Спасибо всем!