Module parse failed: Unexpected token (257:106) You may need an appropriate loader to handle this file type
回答 5
浏览 8789
2022-11-04
在我的应用程序上运行 "npm update "后，我突然得到了以下错误：
Compiled with problems:
ERROR in ./node_modules/pako/lib/zlib/trees.js 257:106
Module parse failed: Unexpected token (257:106)
File was processed with these loaders:
* ./node_modules/babel-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
| * not null.
| */
> function gen_bitlen(s, desc) /* deflate_state *s;*/ /* tree_desc *desc; /* the tree descriptor */*/{
| var tree = desc.dyn_tree;
| var max_code = desc.max_code;
很奇怪。所以我把它与在不同工作站上运行的同样的应用程序进行了比较，代码相同，但我在那里不运行了'npm update'。这个应用程序可以工作，这并不奇怪。
我看到其他帖子也有这种错误，但他们的解决方案似乎不适用于我的环境。
我不明白为什么它在我的主工作站上不工作。如果我把工作站的node_modules复制过来，应用程序可以正常启动。但只要我删除node_modules和package-lock.json并重新安装，应用程序就无法启动。我已经删除了node_modules/package-lock.json/clear npm cache。但没有帮助。
我通过'npm ls'来比较模块的版本，它们在两个工作站上都是一样的。
两者都在运行NodeJS 8.12.0和npm 8.19.2。
我查看了它出错的文件（pako/lib/zlib/trees.js），它在两个系统上都是一样的。
我不知道'pako'是什么，但使用'npm explain pako'，它似乎与pdf-lib有关，它从未被更新。
我的应用程序是用create-react-app建立的。
我完全不知所措。这是我的package.json。
{
"name": "foo",
"version": "0.1.0",
"description": "Foo",
"contributors": [],
"license": "UNLICENSED",
"private": true,
"dependencies": {
"@coreui/chartjs": "^2.0.0",
"@coreui/coreui-pro": "^3.4.2",
"@coreui/icons": "^2.1.0",
"@coreui/icons-pro": "^2.0.3",
"@coreui/icons-react": "^1.1.0",
"@coreui/react": "^3.4.6",
"@coreui/react-chartjs": "^1.1.0",
"@coreui/utils": "^1.3.1",
"@fortawesome/fontawesome-free-solid": "^5.0.13",
"@fortawesome/fontawesome-svg-core": "^6.1.1",
"@fortawesome/free-regular-svg-icons": "^6.1.1",
"@fortawesome/free-solid-svg-icons": "^6.1.1",
"@fortawesome/react-fontawesome": "^0.1.18",
"@nadavshaar/react-grid-table": "^1.0.0",
"@pdf-lib/fontkit": "^1.1.1",
"@react-firebase/auth": "^0.2.10",
"ag-grid-community": "^25.3.0",
"ag-grid-react": "^25.3.0",
"arithmetic": "^1.0.1",
"bootstrap": "^5.2.0",
"classnames": "^2.3.1",
"codemirror": "^5.63.3",
"core-js": "^3.19.1",
"downloadjs": "^1.4.7",
"firebase": "^9.12.1",
"firebase-admin": "^11.0.1",
"firebaseui": "^6.0.1",
"formik": "^2.2.9",
"mobx": "^6.3.3",
"mobx-react": "^7.1.0",
"pdf-lib": "^1.17.1",
"prop-types": "^15.7.2",
"random-id": "^1.0.4",
"react": "^17.0.2",
"react-app-polyfill": "^2.0.0",
"react-awesome-button": "^6.5.1",
"react-big-calendar": "^0.33.6",
"react-bootstrap": "^2.4.0",
"react-collapsible": "^2.10.0",
"react-cookie-consent": "^8.0.1",
"react-dom": "^17.0.2",
"react-firebase-hooks": "^5.0.3",
"react-firebaseui": "^6.0.0",
"react-grid-layout": "^1.3.0",
"react-range": "^1.8.12",
"react-redux": "7.2.4",
"react-router-dom": "^5.3.0",
"react-select": "^4.3.1",
"react-text-mask-hoc": "^0.11.0",
"react-toastify": "^9.0.8",
"reactstrap": "^8.10.0",
"redux": "4.1.0",
"rpg-dice-roller": "1.6.0",
"sass": "^1.55.0",
"sillyname": "^0.1.0",
"spinkit": "2.0.1",
"string-math": "^1.2.2",
"styled-components": "^5.3.3",
"yup": "^0.32.11"
},
"devDependencies": {
"mutationobserver-shim": "^0.3.7",
"react-scripts": "^5.0.0"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"test:cov": "npm test -- --coverage --watchAll=false",
"test:debug": "react-scripts --inspect-brk test --runInBand",
"eject": "react-scripts eject",
"zip": "git archive -o coreui-pro-react-admin-template-v$npm_package_version.zip -9 HEAD"
},
"bugs": {
"url": "https://github.com/coreui/coreui-free-react-admin-template/issues"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": [
">0.2%",
"not dead",
"not ie <= 10",
"not op_mini all"
],
"jest": {
"collectCoverageFrom": [
"src/**/*.{js,jsx}",
"!**/*index.js",
"!src/serviceWorker.js",
"!src/polyfill.js"
]
},
"engines": {
"node": ">=8.16",
"npm": ">=6"
}
}
看到了同样的问题。我猜想是更新babel包改变了它处理解析模块代码的方式。当删除package-lock.json时，安装时就会拉入更多最新的babel版本。
- Zpalmtree 2022-11-04
有同样的问题。我已经做了一些调查。trees.js代码中的单行注释（以
//开头）被翻译成多行注释（/* */），结果发现一个嵌套的多行注释（/* /* */ */）导致了错误。
- Nick 2022-11-05
库的作者选择的风格允许在函数声明和同一函数代码块之间放置注释。这导致babel在转写代码时出现问题。
- Akinjiola Toni 2022-11-06
5 个回答
#1楼
已采纳
得票数 16
我做了一个解决方法。我比较了我项目的新旧package-lock.json，我看到一些@babel lib 版本更改为 v7.20.2 (2022 年 11 月 4 日）。我用旧的覆盖了新的package-lock.json，我的react app再次构建并成功运行。
然后我改变了（降级）我的package.json中的一些@babel包，这就解决了问题。
把这几行放到你的package.json文件中。
"@babel/core": "7.19.6",
"@babel/generator": "7.19.6",
"@babel/compat-data": "7.19.4",
"@babel/helper-compilation-targets": "7.19.3",
"@babel/helper-create-class-features-plugin":"7.19.0",
"@babel/helper-module-transforms":"7.19.6",
嘿，这解决了我的问题--但我还需要把它添加到'resolutions'（yarn overrides）中去，以使它对我起作用。
- Tom Mendelson 2022-11-07
是的，你需要把你的依赖关系放进去，但如果你在用CRA工作，也需要把你的解决方案放进去。还要看一下你的npm版本。在8.3以上版本中支持覆盖。
- Doge 2022-11-07
#2楼
得票数 4
https://github.com/babel/babel/issues/15132
Babel修复了他们的问题。你可以使用最新版本，现在应该可以工作了。(我验证过了)
更新"@babel/core"："7.20.2"对我来说很有效。
- Megha 2022-11-07
#3楼
得票数 3
延长@Attila Szombathelyi的回答，如果你使用CRA，你可以在你的package.json中利用resolutions。
{
"name": "app-name",
"version": "1.0.0",
"dependencies": {
...
},
...
"resolutions": {
"@babel/core": "7.19.6",
"@babel/generator": "7.19.6",
"@babel/compat-data": "7.19.4",
"@babel/helper-compilation-targets": "7.19.3",
"@babel/helper-create-class-features-plugin": "7.19.0",
"@babel/helper-module-transforms": "7.19.6",
"babel-loader": "8.2.5"
}
}
#4楼
得票数 0
在我的案例中，解决方案是禁用 babel 依赖项转换（在我们的项目中启用）。
我是如何做到的？在我的项目中使用了vue-cli。所以我取消了vue.config.js中的transpileDependecies选项。
如果你使用的是裸露的webpack，你也可以为它或任何其他构建系统找到合适的解决方案。
#5楼
得票数 0
解决办法。从npm 8.3.0开始，你也可以在package.json中使用npm的overrides。删除package-lock.json和node_modules文件夹（推荐）。
"overrides": {
"@babel/core": "7.19.6",
"@babel/generator": "7.19.6",
"@babel/compat-data": "7.19.4",
"@babel/helper-compilation-targets": "7.19.3",
"@babel/helper-create-class-features-plugin": "7.19.0",
"@babel/helper-module-transforms": "7.19.6"
}