Блог

У меня есть приложение в SPFX. После установки и начала использования компонента jQuery Datatable я получаю следующую ошибку в пакете gulp:

 Error - [webpack] 'dist':
list-documents-web-part.js from UglifyJs
Unexpected token: name (style) [list-documents-web-part.js:73666,7]
 

Эта проблема возникает только тогда, когда я использую таблицы данных. Я читал, что эта проблема заключалась в том, что у меня были пакеты npm, использующие код ES6, и UglifyJS не смог скомпилировать ES6, но я до сих пор не понял, как это исправить.

пакет.json

 {
  "name": "solution-nf-se",
  "version": "0.0.1",
  "private": true,
  "main": "lib/index.js",
  "scripts": {
    "build": "gulp bundle",
    "clean": "gulp clean",
    "test": "gulp test"
  },
  "dependencies": {
    "@microsoft/sp-core-library": "~1.4.0",
    "@microsoft/sp-lodash-subset": "~1.4.0",
    "@microsoft/sp-office-ui-fabric-core": "~1.4.0",
    "@microsoft/sp-webpart-base": "~1.4.0",
    "@pnp/common": "^1.3.7",
    "@pnp/logging": "^1.3.7",
    "@pnp/odata": "^1.3.7",
    "@pnp/sp": "^1.3.7",
    "@types/datatables.net": "^1.10.20",
    "@types/jqueryui": "^1.12.15",
    "bootstrap": "^4.6.0",
    "datatables.net": "^1.11.1",
    "datatables.net-jqui": "^1.11.1",
    "jquery": "^3.6.0",
    "jqueryui": "^1.11.1",
    "moment": "2.27.0"
  },
  "devDependencies": {
    "@fortawesome/fontawesome-free": "^5.15.3",
    "@microsoft/sp-build-web": "~1.4.1",
    "@microsoft/sp-module-interfaces": "~1.4.1",
    "@microsoft/sp-webpart-workbench": "~1.4.1",
    "@types/bootstrap": "^4.6.0",
    "@types/jquery": "^3.5.5",
    "@types/webpack-env": "1.13.1",
    "ajv": "~5.2.2",
    "gulp": "~3.9.1",
    "url-loader": "^4.1.1",
    "webpack": "^3.6.0"
  }
}
 

gulpfilee.js

 "use strict";

const gulp = require("gulp");
const build = require("@microsoft/sp-build-web");

build.addSuppression(
  `Warning - [sass] The local CSS class 'ms-Grid' is not camelCase and will not be type-safe.`
);
build.configureWebpack.mergeConfig({
  additionalConfiguration: generatedConfiguration => {
    generatedConfiguration.module.rules.push({
      test: /.woff2(?v=[0-9].[0-9].[0-9])?$/,
      use: {
        loader: "url-loader", query: { limit: 10000, mimetype: 'application/font-woff2'}
      }
    });
    return generatedConfiguration;
  }
});


build.initialize(gulp)
 

Может ли кто-нибудь помочь мне решить эту проблему?