“您可能需要一个额外的加载器来处理这些加载器的结果。”

Posted 2023-02-22

【中文标题】“您可能需要一个额外的加载器来处理这些加载器的结果。”

【英文标题】："You may need an additional loader to handle the result of these loaders."

【发布时间】：2020-12-04 23:14:26

【问题描述】：

我目前正在尝试为 ReactJs 构建一个状态管理库。但是，一旦我将它实现到我的 React 项目（使用 create-react-app 创建）中，它就会开始丢弃这个错误：

Failed to compile.

path/to/agile/dist/runtime.js 116:104
Module parse failed: Unexpected token (116:104)
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.
|       if (subscriptionContainer instanceof sub_1.CallbackContainer) subscriptionContainer.callback(); // If Component based subscription call the updateMethod which every framework has to define
|
>       if (subscriptionContainer instanceof sub_1.ComponentContainer) if (this.agileInstance.integration?.updateMethod) this.agileInstance.integration?.updateMethod(subscriptionContainer.component, Runtime.formatChangedPropKeys(subscriptionContainer));
|     ); // Log Job
|

如果我注释掉错误中提到的突出显示的代码行，它会跳转到另一个点并在那里抱怨。但这不可能是语法错误，因为 TypeScript 也会在 IDE 中报错。

该工具的工作原理： 一开始你必须定义一个框架，在这个例子中是 React。然后，您可以创建一个 State 并通过 Hook 将此 State 订阅到 React 功能组件。 用于将 State 绑定到 React 组件的 Hook 只需创建一个回调，该回调会触发重新渲染（通过改变 useReducer）并将此回调分配给订阅的 State。

如果您想了解更多信息，请查看此 repo： https://github.com/agile-ts/agile

依赖关系：

第三方国家管理库：

  "dependencies": 
    "@types/chai": "^4.2.12",
    "@types/mocha": "^8.0.2",
    "chai": "^4.2.0",
    "eslint-config-prettier": "^6.11.0",
    "mocha": "^8.1.1",
    "prettier": "2.0.5",
    "ts-node": "^8.10.2",
    "tsc-watch": "^4.1.0",
    "tslib": "^2.0.0",
    "typescript": "^3.9.7"
  

节点：v14.8.0

反应项目：

"dependencies": 
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.3.2",
    "@testing-library/user-event": "^7.1.2",
    "@types/jest": "^24.0.0",
    "@types/node": "^12.0.0",
    "@types/react": "^16.9.0",
    "@types/react-dom": "^16.9.0",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "react-scripts": "3.4.3",
    "typescript": "~3.7.2",
    "agile-framework": "file:../../"
  ,

反应：16.13.1 NPM：6.14.7

【参考方案1】：

问题是您将 ES2020 发送到 dist/。如果你看看它抱怨的那一行：

if (subscriptionContainer instanceof sub_1.ComponentContainer) if (this.agileInstance.integration?.updateMethod) this.agileInstance.integration?.updateMethod(subscriptionContainer.component, Runtime.formatChangedPropKeys(subscriptionContainer));
                                                                                              // ^^                                         // ^^

您可以看到它在发出的代码中使用了optional chaining 运算符。因此，您的库的使用者需要有适当的配置来处理这种代码。您的示例消费者 CRA 应用程序正在使用 Babel；尽管设置确实具有可选链接的转换，但它仅在 React 应用程序本身的源代码上运行，不它的依赖项（包括您的库）。

修复它的一个选项是发出更少的现代代码，这将减少消费者所需的配置量。例如，如果您在tsconfig.json 中使用以下设置以 ES6 为目标：

    "target": "ES6",
    "lib": ["DOM", "ES6", "DOM.Iterable", "ScriptHost", "ES2016.Array.Include"],
    // ...

React 应用程序至少可以在不需要更改源代码的情况下启动。

【讨论】：

@customcommander 您可能需要弹出才能进入 CRA 中的 tsconfig。你使用的是官方的 TypeScript 模板吗？它应该已经针对浏览器的旧运行时。

@customcommander 似乎确实针对 es5，假设您的意思是 github.com/reduxjs/cra-template-redux-typescript/blob/master/…，所以它不应该发出可选链接。

@customcommander 我不确定这与此有何关系；我展示的配置是针对 OP 的 tsconfig.json，他们正在将他们的库从 TypeScript 编译为 javascript，以便在其他人的应用程序中使用，包括他们帖子中的演示 CRA。我已经编辑了我的答案以澄清这一点。

听起来很完美！ @jonrsharpe 你能否请教一下，如果我使用了一些给我带来麻烦的库，我该如何配置 Angular 11 项目来解决这个问题（pdfjs-dist 包）？

【参考方案2】：

在这种情况下的问题是 react-leaflet 3.2.0 版本并不适用于每个项目（我真的不知道为什么）。 我正在使用 CRA 进行反应，在做任何事情之前请注意 现在解决方案...

卸载 react-leaflet 转到 package.json 并粘贴此行

"react-leaflet": ">=3.1.0 "@react-leaflet/core": ">=1.0.0

这就是我解决问题的方法。 另一个网站中答案的链接。 https://www.gitmemory.com/issue/PaulLeCam/react-leaflet/891/860223422

【参考方案3】：

我最近正在使用 Angular 7，管理员想在我们的支付门户中添加一些增强功能。当我拉出分支并在本地运行它时，我遇到了同样的错误。

我认为这与 js webpack、框架版本和当前框架版本中使用的 ecmascript 版本有关。

我为解决此错误所做的工作：

rm -rf node_modules rm -f package-lock.json npm install

【讨论】：

它解决不了任何问题，让我们成为现实

【参考方案4】：

此处使用的可选链接：

this.agileInstance.integration?.updateMethod

删除 node_modules/.cache 将“chrome 79”添加到 package.json 中的 browserslist 重新加载应用

【参考方案5】：

在我的情况下，在 package.json 中设置更保守的编译目标有助于解决此问题：

"browserslist": [
">0.2%",
"not dead",
"not op_mini all"],