模块解析失败:意外的标记(257:106)。您可能需要适当的加载器来处理此文件类型。

35

在我的应用上运行 '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 / 清除npm缓存。没有帮助。
我通过“npm ls”比较模块版本,并且它们在两个工作站上都相同。
两者都正在运行NodeJS 8.12.0和npm 8.19.2
我查看了出错的文件(pako/lib/zlib/trees.js),它在两个系统上都是相同的。
我不知道'pako'是什么,但使用“npm explain pako”,它似乎与pdf-lib有关,而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"
  }
}

2
看到了同样的问题。我猜测更新babel包会改变它处理模块代码的方式。当删除package-lock.json时,安装时会拉取一个更更新的babel版本。 - Zpalmtree
5
遇到同样的问题,我已经进行了一些调查。在trees.js代码中,以单行注释(以“//”开头)的形式书写的内容被翻译成多行注释(以“/* /”包裹),结果发现一个嵌套的多行注释(以“/ /* */ */”包裹)导致了错误。 - Nick
库的作者选择风格使得在函数声明和相同的函数代码块之间可以放置注释。这会导致Babel无法正常转换代码。 - Akinjiola Toni
#262问题已在最近版本的pako中得到解决,该版本已发布并修复了问题2.1.0。更新日志:https://github.com/nodeca/pako/blob/master/CHANGELOG.md#210---2022-11-07 - meghahere
5个回答

16
我想出了一个解决办法。我比较了我的项目的旧版和新版package-lock.json,发现一些@babel库的版本已更改为v7.20.2(于2022年11月4日)。我用旧的package-lock.json覆盖了新的,我的React应用程序再次成功构建和运行了。
然后我降级了一些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",

1
嘿,那解决了我的问题 - 但我还需要将它添加到“resolutions”(yarn overrides)中,以使其对我起作用。 - Tom Mendelson
是的,如果你正在使用 CRA,你需要在你的依赖项和解析中添加。同时,请检查你的 npm 版本。overrides 功能支持 8.3+ 版本。 - Doge

4

更新"@babel/core": "7.20.2" 对我有用。 - meghahere

3

在 @Attila Szombathelyi 的答案基础上,如果你正在使用 CRA,你可以利用 resolutions 在你的 package.json 文件中

{
    "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"
    }
  }

0

解决方法:从 npm 8.3.0 开始,您还可以在 package.json 中使用 npm 的 覆盖。建议删除 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"
    }

0
解决方案在我的情况下是禁用我们项目中启用的babel依赖项转译。

我是如何做到的?在我的项目中使用了vue-cli。因此,我在vue.config.js中禁用了transpileDependecies选项。

如果您正在使用裸webpack,则可能会找到适当的解决方案或任何其他构建系统。


网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接