logo标签列表

生产环境构建时出现“意外的令牌：punc（））”错误

angulareslint
37

如果我尝试使用ng build --prod --aot测试构建我的应用程序，我会收到以下非常简短的错误消息：

$ ng build --prod
                                                                                         
Date: 2019-01-26T17:26:45.018Z
Hash: 979690c7a363996f24b8
Time: 28274ms
chunk {0} runtime.ea8176a0aa687d0c7546.js (runtime) 2.23 kB [entry] [rendered]
chunk {1} common.78f3e0cd7d0f774768aa.js (common) 583 bytes  [rendered]
chunk {2} main.5f97cda0f273b510e26a.js (main) 973 kB [initial] [rendered]
chunk {3} polyfills.c2a7344c1c84ba3d2a73.js (polyfills) 58.2 kB [initial] [rendered]
chunk {4} styles.1094b1dd78a0fa2c8fa7.css (styles) 85 kB [initial] [rendered]
chunk {5} 5.92565e561816566c4426.js () 3.74 MB  [rendered]
chunk {6} 6.a4ec6e690b75a22ddb72.js () 6.3 kB  [rendered]

ERROR in 5.92565e561816566c4426.js from Terser
Unexpected token: punc ()) [5.92565e561816566c4426.js:25865,4]

不知道是什么原因导致的，如何修复？上次我检查时它能用。

我已经尝试过rm -rf node_modules/。

package.json

{
  "name": "mz-admin",
  "version": "0.0.0",
  "license": "MIT",
  "scripts": {
    "ng": "ng",
    "start": "node server.js",
    "build": "ng build --prod",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "engines": {
    "node": "8.12.0",
    "npm": "6.4.1"
  },
  "private": true,
  "dependencies": {
    "@agm/core": "^1.0.0-beta.3",
    "@angular/animations": "7.1.0",
    "@angular/cdk": "^7.1.0",
    "@angular/cli": "7.0.6",
    "@angular/common": "7.1.0",
    "@angular/compiler": "7.1.0",
    "@angular/compiler-cli": "7.1.0",
    "@angular/core": "7.1.0",
    "@angular/flex-layout": "^7.0.0-beta.19",
    "@angular/forms": "7.1.0",
    "@angular/http": "7.1.0",
    "@angular/material": "^7.1.0",
    "@angular/material-moment-adapter": "^7.1.0",
    "@angular/platform-browser": "7.1.0",
    "@angular/platform-browser-dynamic": "7.1.0",
    "@angular/router": "7.1.0",
    "@fortawesome/angular-fontawesome": "^0.3.0",
    "@fortawesome/fontawesome-svg-core": "^1.2.4",
    "@fortawesome/free-brands-svg-icons": "^5.3.1",
    "@fortawesome/free-solid-svg-icons": "^5.3.1",
    "@ngx-share/button": "^7.0.0",
    "@ngx-share/core": "^7.0.0",
    "@types/braintree-web": "^3.6.4",
    "angular-mentions": "^0.8.0",
    "braintree-web": "^3.41.0",
    "braintree-web-drop-in": "^1.14.1",
    "chart.js": "^2.7.2",
    "core-js": "^2.5.7",
    "express": "^4.16.3",
    "http-status-codes": "^1.3.0",
    "ng-pick-datetime": "^7.0.0",
    "ngx-logger": "^3.1.0",
    "ngx-moment": "^3.1.0",
    "ngx-quill": "^4.5.0",
    "paypal-checkout": "^4.0.239",
    "quill": "^1.3.6",
    "quill-mention": "git+https://github.com/silentsnooc/quill-mention.git",
    "rxjs": "^6.3.2",
    "typescript": "^3.1.6",
    "zone.js": "^0.8.26"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^0.10.6",
    "@angular/language-service": "7.1.0",
    "@types/googlemaps": "^3.30.16",
    "@types/jasmine": "^3.3.0",
    "@types/jasminewd2": "^2.0.6",
    "@types/node": "~10.12.10",
    "codelyzer": "^4.5.0",
    "enhanced-resolve": "^4.1.0",
    "express-http-proxy": "^1.5.0",
    "jasmine-core": "~3.3.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~3.1.1",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "^2.0.4",
    "karma-jasmine": "~2.0.1",
    "karma-jasmine-html-reporter": "^1.4.0",
    "protractor": "^5.4.1",
    "ts-node": "~7.0.1",
    "tslint": "^5.11.0",
    "webpack-bundle-analyzer": "^3.0.3"
  }
}

构建日志的一部分

[1m[33mWARNING in Terser Plugin: Dropping unused variable template [6.a4ec6e690b75a22ddb72.js:136,12][39m[22m

[1m[33mWARNING in Terser Plugin: Dropping unused variable routes [6.a4ec6e690b75a22ddb72.js:148,4][39m[22m

[1m[31mERROR in 5.92565e561816566c4426.js from Terser
Unexpected token: punc ()) [5.92565e561816566c4426.js:25865,4][39m[22m
Child [1mmini-css-extract-plugin node_modules/@angular-devkit/build-angular/src/angular-cli-files/plugins/raw-css-loader.js!node_modules/postcss-loader/src/index.js??extracted!node_modules/sass-loader/lib/loader.js??ref--14-3!src/styles.scss[39m[22m:
                   [1mAsset[39m[22m     [1mSize[39m[22m  [1mChunks[39m[22m  [1m[39m[22m[1m[39m[22m[1mChunk Names[39m[22m
    [1m[32m3rdpartylicenses.txt[39m[22m  1 bytes        [1m[39m[22m  [1m[32m[39m[22m
    Entrypoint [1mmini-css-extract-plugin[39m[22m = [1m[32m*[39m[22m
    chunk    {[1m[33m0[39m[22m} [1m[32m*[39m[22m (mini-css-extract-plugin) 102 KiB[1m[33m [entry][39m[22m[1m[32m [rendered][39m[22m
Child [1mmini-css-extract-plugin node_modules/@angular-devkit/build-angular/src/angular-cli-files/plugins/raw-css-loader.js!node_modules/postcss-loader/src/index.js??extracted!node_modules/sass-loader/lib/loader.js??ref--14-3!src/theme.scss[39m[22m:
                   [1mAsset[39m[22m     [1mSize[39m[22m  [1mChunks[39m[22m  [1m[39m[22m[1m[39m[22m[1mChunk Names[39m[22m
    [1m[32m3rdpartylicenses.txt[39m[22m  1 bytes        [1m[39m[22m  [1m[32m[39m[22m
    Entrypoint [1mmini-css-extract-plugin[39m[22m = [1m[32m*[39m[22m
    chunk    {[1m[33m0[39m[22m} [1m[32m*[39m[22m (mini-css-extract-plugin) 55.6 KiB[1m[33m [entry][39m[22m[1m[32m [rendered][39m[22m

WARNING in Terser Plugin: global_defs ngDevMode redefined [main.5f97cda0f273b510e26a.js:14309,21]

WARNING in Terser Plugin: global_defs ngDevMode redefined [main.5f97cda0f273b510e26a.js:14510,25]

WARNING in Terser Plugin: global_defs ngDevMode redefined [main.5f97cda0f273b510e26a.js:15652,21]

WARNING in Terser Plugin: global_defs ngDevMode redefined [main.5f97cda0f273b510e26a.js:15658,21]
使用--source-map参数。
$ ng build --prod --aot --source-map 
                                                                                                               
Date: 2019-01-26T22:31:44.106Z
Hash: 51afc4cc158a10e520c6
Time: 45390ms
chunk {0} runtime.b29d49d6f279fff34f57.js, runtime.b29d49d6f279fff34f57.js.map (runtime) 2.29 kB [entry] [rendered]
chunk {1} common.70409de1782336a79716.js, common.70409de1782336a79716.js.map (common) 639 bytes  [rendered]
chunk {2} main.01e8ea6a2dd33c4e19d8.js, main.01e8ea6a2dd33c4e19d8.js.map (main) 970 kB [initial] [rendered]
chunk {3} polyfills.22294cd4941de9604b91.js, polyfills.22294cd4941de9604b91.js.map (polyfills) 61.7 kB [initial] [rendered]
chunk {4} styles.97ca4c55e9ba593fdf4c.css, styles.97ca4c55e9ba593fdf4c.css.map (styles) 85.5 kB [initial] [rendered]
chunk {5} 5.33da963a3dd6decc5efc.js, 5.33da963a3dd6decc5efc.js.map () 1.9 MB  [rendered]
chunk {6} 6.85bd192b02e86745d878.js, 6.85bd192b02e86745d878.js.map () 6.35 kB  [rendered]

没有 --source-map 选项

$ ng build --prod --aot 
                                                                                         
Date: 2019-01-26T22:32:18.173Z
Hash: b5bcaa2123bb6718baf2
Time: 28403ms
chunk {0} runtime.0935b498984fda7c2e4f.js (runtime) 2.23 kB [entry] [rendered]
chunk {1} common.78f3e0cd7d0f774768aa.js (common) 583 bytes  [rendered]
chunk {2} main.2ae834dcaf8208d7aecd.js (main) 970 kB [initial] [rendered]
chunk {3} polyfills.588b345e325a2549098e.js (polyfills) 61.7 kB [initial] [rendered]
chunk {4} styles.088d5b7a7a0995d1df55.css (styles) 85.4 kB [initial] [rendered]
chunk {5} 5.7e99fa00323b77c4e1c2.js () 3.82 MB  [rendered]
chunk {6} 6.954a4978d0c6c411bb2f.js () 6.3 kB  [rendered]

ERROR in 5.7e99fa00323b77c4e1c2.js from Terser
Unexpected token: punc ()) [5.7e99fa00323b77c4e1c2.js:27338,4]

使用--source-map --named-chunks参数

$ ng build --prod --source-map --named-chunks
                                                                                                                        
Date: 2019-01-26T23:00:18.699Z
Hash: c37b8f2ccfedbbf077fa
Time: 61888ms
chunk {0} runtime.a670ad696846ba781d64.js, runtime.a670ad696846ba781d64.js.map (runtime) 2.37 kB [entry] [rendered]
chunk {1} common.d7fbf062c6d87ac4ade2.js, common.d7fbf062c6d87ac4ade2.js.map (common) 639 bytes  [rendered]
chunk {2} component-application-application-module-ngfactory.22de247f215039a3cf63.js, component-application-application-module-ngfactory.22de247f215039a3cf63.js.map (component-application-application-module-ngfactory) 1.9 MB  [rendered]
chunk {3} main.2897da054822ebda9646.js, main.2897da054822ebda9646.js.map (main) 973 kB [initial] [rendered]
chunk {4} module-embedding-calendar-calendar-module-ngfactory.5b0025d2f887a5d7b22d.js, module-embedding-calendar-calendar-module-ngfactory.5b0025d2f887a5d7b22d.js.map (module-embedding-calendar-calendar-module-ngfactory) 6.4 kB  [rendered]
chunk {5} polyfills.04ae14cfab6dbb09ad49.js, polyfills.04ae14cfab6dbb09ad49.js.map (polyfills) 61.7 kB [initial] [rendered]
chunk {6} styles.52c1571339895f2464fa.css, styles.52c1571339895f2464fa.css.map (styles) 85.5 kB [initial] [rendered]

看起来

ng build --prod --named-chunks --verbose --build-optimizer=false --source-map

终于成功了 - 有了这个，我终于找到了错误的源头：

ERROR in component-application-application-module-ngfactory.7eb30a010bb7783ce652.js from Terser
Unexpected token: punc ()) [./node_modules/quill-mention/src/quill.mention.js:183,0][component-application-application-module-ngfactory.7eb30a010bb7783ce652.js:29528,4]
很难根据你在问题中提供的少量信息做出判断。 - Jota.Toledo
1
请添加您的package.json详细信息。您提到上次检查“这个有效”，您指的是什么时候？之前的Angular版本？之前的CLI版本？ - Jota.Toledo
@Jota.Toledo 好的，我添加了 package.json 文件以及 ng build 的详细输出。看起来这与 scss 有关？ - Stefan Falk
1
@Jota.Toledo 谢谢你的提示。我已经发布了一条指向输出的链接 - 它相当大。尽管如此，我在那里没有看到错误。 - Stefan Falk
1
@Jota.Toledo 确实 - 我找到了问题所在。这是一个“逗号缺失”（根据ESLint），我把它放在那里以消除WebStorm中的警告，然后 - 你知道故事的剩下部分.. ^^ 谢谢你的帮助 - 如果没有你的帮助，这个问题会花费我更长的时间！:D - Stefan Falk
显示剩余11条评论
9个回答
41

一切都始于这个警告：

enter image description here

就是这个缺失的逗号，为了消除这个警告我添加了它，然而却导致我的项目无法编译。

我只能通过使用 --source-map 但同时设置 --build-optimizer=false 来定位这个问题。

ng build --prod --named-chunks --verbose --build-optimizer=false --source-map
不错！通过在代码中删除所有的"?."实例来解决了这个问题。 - Jimmy
我怎么才能找到这样的问题呢？ - Anshuman Kumar
32
我从Angular 15降级到Angular 14，需要重新对齐ES2022 -> es2020。

tsconfig.json

    "target": "es2020",
    "module": "es2020",
    "lib": [
      "es2020",
      "dom"
    ]
1
我在 angular.json 文件中没有找到这个，但是在 tsconfig.json 中找到了。所以如果你在 angular.json 中没有找到它，请也去那里看看。 - jacroe
13
在升级到Angular 8进行生产构建后，我遇到了“来自Terser的common-es2015.xxx.js中的错误：Unexpected token: Punc(;) [common-es2015.xxx.js]”。在angular.json文件-configurations-production部分设置sourceMap为true后，编译器显示了带有错误行号的实际文件名。这是由于类文件中变量声明中多了一个分号。
putGamma: any = 0.0;;
很好，谢谢！这正是我的问题。你有任何想法为什么现在会构建失败吗？ - Jahrenski
4
在我的情况下，是在位于\src目录下的一个自定义.js文件中函数列表末尾遗留了一个多余的逗号。
通过设置--source-map=true和--build-optimizer=false参数，可以在angular.json中提供提示，这对我帮助很大。
2

在从 Angular 15 降级到 Angular 14 后，我收到了相同的错误，并通过将 esconfig.ts 中的 es2022 更改为 es2020 来解决它。

目前您的回答写得不够清晰。请 [编辑] 添加更多细节，以帮助其他人了解如何解决所提出的问题。您可以在 帮助中心 中找到有关编写良好答案的更多信息。 - Community
1
我遇到了同样的问题，并发现它是由于https://www.npmjs.com/package/url-parameter-append引起的。
在函数调用中，参数列表后面有一个额外的逗号。
我从url-parameter-append.js中删除了逗号，然后它就有效了。
我向该软件包的作者https://github.com/techinity/url-parameter-append/issues/10报告了此错误，但实际上，在我看来，这个错误存在于以下两个方面：
  • angular构建报告错误的方式
  • "Terser"：在js/ts中，参数列表后面的额外逗号是合法的。
1
在我的情况下，这是由于在TypeScript Angular项目中的.js文件中使用ES6引起的。将.js文件的代码重构为ES5可以解决问题。我使用ng build --prod --aot检查错误是否已消失。
0

试试这个

"configurations": {
        "production": {
          "buildOptimizer": false,
          "optimization": false
        },
 }

buildOptimizer 和 optimization 在我的 package.json 中没有出现在生产环境中。所以，我猜它们的默认值是 true。将它们添加并将它们设置为“false”解决了我的问题。

0
这在我的本地机器上给了我一个错误，但在构建服务器上没有。在我的情况下，我的软件包已经过时了。所以我再次运行了NPM I，之后一切都恢复正常了。
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接