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

Question

我目前正在尝试为 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

原文由 BennoDev 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

问题是您将 ES2020 发射到 dist/ 。如果您查看它抱怨的行：

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

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

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

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

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

原文由 jonrsharpe 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

虽然已经晚了，但它仍然可以帮助某人。就我而言，我忘了添加

"jsx": "react"

在我的 tsconfig.json 中。

原文由 Aryan Shridhar 发布，翻译遵循 CC BY-SA 4.0 许可协议