React JS 运行脚本构建无法编译

Question

问题描述

>> npm run-script build 编译失败

预期行为

编译成功，build文件夹包含一个缩小的项目，输出没有错误

实际行为

输出给出以下错误：

react-scripts build

Creating an optimized production build...
Failed to compile.

Failed to minify the bundle. Error: static/js/main.e3925110.chunk.js from Terser
Name expected [static/js/main.e3925110.chunk.js:186,5]
    at compiler.run (C:\Users\Zackyy\Desktop\ReactCoding\wanawiipuri\node_modules\react-scripts\scripts\build.js:176:23)
    at finalCallback (C:\Users\Zackyy\Desktop\ReactCoding\wanawiipuri\node_modules\webpack\lib\Compiler.js:257:39)
    at hooks.done.callAsync.err (C:\Users\Zackyy\Desktop\ReactCoding\wanawiipuri\node_modules\webpack\lib\Compiler.js:273:13)
    at AsyncSeriesHook.eval [as callAsync] (eval at create (C:\Users\Zackyy\Desktop\ReactCoding\wanawiipuri\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:6:1)
    at AsyncSeriesHook.lazyCompileHook (C:\Users\Zackyy\Desktop\ReactCoding\wanawiipuri\node_modules\tapable\lib\Hook.js:154:20)
    at onCompiled (C:\Users\Zackyy\Desktop\ReactCoding\wanawiipuri\node_modules\webpack\lib\Compiler.js:271:21)
    at hooks.afterCompile.callAsync.err (C:\Users\Zackyy\Desktop\ReactCoding\wanawiipuri\node_modules\webpack\lib\Compiler.js:671:15)
    at AsyncSeriesHook.eval [as callAsync] (eval at create (C:\Users\Zackyy\Desktop\ReactCoding\wanawiipuri\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:6:1)
    at AsyncSeriesHook.lazyCompileHook (C:\Users\Zackyy\Desktop\ReactCoding\wanawiipuri\node_modules\tapable\lib\Hook.js:154:20)
    at compilation.seal.err (C:\Users\Zackyy\Desktop\ReactCoding\wanawiipuri\node_modules\webpack\lib\Compiler.js:668:31)
    at AsyncSeriesHook.eval [as callAsync] (eval at create (C:\Users\Zackyy\Desktop\ReactCoding\wanawiipuri\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:6:1)
    at AsyncSeriesHook.lazyCompileHook (C:\Users\Zackyy\Desktop\ReactCoding\wanawiipuri\node_modules\tapable\lib\Hook.js:154:20)
    at hooks.optimizeAssets.callAsync.err (C:\Users\Zackyy\Desktop\ReactCoding\wanawiipuri\node_modules\webpack\lib\Compilation.js:1385:35)
    at AsyncSeriesHook.lazyCompileHook (C:\Users\Zackyy\Desktop\ReactCoding\wanawiipuri\node_modules\tapable\lib\Hook.js:154:20)
    at hooks.optimizeChunkAssets.callAsync.err (C:\Users\Zackyy\Desktop\ReactCoding\wanawiipuri\node_modules\webpack\lib\Compilation.js:1376:32)
Read more here: *removed*

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! wanawiipuri@0.1.0 build: `react-scripts build`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the wanawiipuri@0.1.0 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\Zackyy\AppData\Roaming\npm-cache\_logs\2019-09-20T15_06_48_248Z-debug.log

同样失败的可能修复

Stackoverflow 社区对此有一些解决方案。第一个是npm i react-scripts --save-dev，这并没有什么不同。 第二个是npm i terser@3.14.1 --save，也没有进展。

Package.json

{
  "name": "wanawiipuri",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "firebase": "^6.6.1",
    "firebase-admin": "^8.6.0",
    "firebase-redux": "0.0.5",
    "firebase-tools": "^7.3.2",
    "react": "^16.9.0",
    "react-dom": "^16.9.0",
    "react-redux": "^7.1.1",
    "react-redux-firebase": "^2.4.1",
    "react-router-dom": "^5.0.1",
    "redux": "^4.0.4",
    "redux-firestore": "^0.9.0",
    "redux-thunk": "^2.3.0",
    "universal-cookie": "^4.0.2"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "react-scripts": "^3.1.2",
    "terser": "^3.14.1"
  }
}

其他信息

使用npx create-react-app 创建的项目。 / 视窗 10 1903, / VS代码/ ReactJS 库 / Firebase 托管/firestore 已初始化 /

我正在使用 npm，但我不知道基于纱线的可能修复是否可以做任何事情。尽管我尝试过，但到目前为止没有任何效果。

**编辑： 还尝试完全删除 terser 并安装两个 Terser@3.14.1，然后删除它并安装 Terser@3.16.1 以测试任何版本是否有效。版本之间没有区别。 还尝试将 terser 作为依赖项安装，包括 3.14.1 和 3.16.1。没有任何效果。

仅此项目无法构建。较旧的项目已成功构建。目前正在尝试找出可能是什么原因造成的。

Answer 1

我不知道 HOW 或 WHY，但以下解决方案对我有用。 我有这个 index.js 文件，其中包含将 firebase 与我的反应连接起来的代码。有这样一行：

import { env } from './.env';

后来用在

ReactDOM.render(<Provider store={store}><App env={env} /></Provider>, document.getElementById('root'));

所以我所做的只是注释掉了导入行和env={env} 部分。不知道为什么它会起作用，也不知道我将来是否需要它，但这为我解决了问题。

Answer 2

This should be resolved in terser v3.16.1 - 尝试更新您的terser devDependency，就像您在v3.14.1 一样。