错误 - [webpack] 'dist'：来自 UglifyJs 的 list-documents-web-part.js 意外令牌：名称（样式）[list-documents-web-part.js:73666,7]

Question

I have an application in SPFX. After installing and started to use a jQuery Datatable component, I get the following error on gulp bundle:

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

This issue only happen when I use Datatables. I have read that this problem was, that I had npm packages, that uses ES6 code, and UglifyJS wasn't able to compile ES6, but I still haven't figured out how to fixed it.

package.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)

Can somebody help me to solve it?

Answer 1

Yes, I have got the same error, and I have tried this using this:-

https://github.com/SharePoint/sp-dev-docs/issues/2782

Maybe you can solve this issue.