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

Question

我目前正在尝试为 ReactJs 构建一个 State 管理库。但是一旦我将它实施到我的 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

依赖项：

第三方 State 管理图书馆：

  "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

Answer 1

如果您不是图书馆的作者，或者您不想按照已接受的答案建议的那样更改它，您可以执行以下操作：

1. 按照@adlerer 的建议更改浏览器列表：

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

   （确保您在browserslist中没有用于development的特殊配置）

2. 清除 npm 缓存：

    npm cache clean --force

3. 重新安装@Gel 建议的内容：

    rm -rf node_modules && rm -f package-lock.json && npm i

经过数小时的研究和试验，这对我有所帮助。

Answer 2

问题是您将 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 应用程序至少可以在不需要更改源代码的情况下启动。

Answer 3

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

"jsx": "react"

在我的 tsconfig.json 中。

Answer 4

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

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

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

1. rm -rf 节点模块
2. rm -f package-lock.json
3. npm安装

Answer 5

我对 NEXT.JS 有同样的问题：检查损坏的正则表达式！ 我的问题：

 { f_v: '1', papel: symbol, >>> indic: indicadores.map(e => e.cd.replace(/+/g, 'a')).join('+'), periodicidade: 'tri', graf_tab: 'tabela_v'}

我用/\+/g (escape +) 替换了/+/g并编译得很好。

Answer 6

此处使用的可选链接：

this.agileInstance。 integration?.updateMethod

1. 删除 node_modules/.cache
2. 在 package.json 的浏览器列表中添加“chrome 79”
3. 重新加载应用程序

Answer 7

在我的例子中，在package.json中设置更保守的编译目标有助于解决这个问题：

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

Answer 8

在我的例子中，我试图将依赖项从“react-leaflet”导入到我的旧项目，但是在导入依赖项之后我遇到了同样的问题。 我通过这些程序解决了我的问题。

在终端：

rm -rf node_modules && rm -f package-lock.json
npm cache clean --force

我知道这听起来可能无关紧要，但在下一步中，我将“package.json”中的这五个依赖项更新为最新版本：

1-“@testing-library/jest-dom”

2-“@testing-library/反应”

3-“@testing-library/user-event”

4-“反应脚本”

5-“网络生命体征”

我猜这个问题在某种程度上与最后两个依赖项有关，但为了以防万一，我更新了所有五个依赖项。

然后在终端：

npm i
sudo npm update -g

Answer 9

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

1. 卸载反应传单
2. Go 到 package.json 并粘贴此行

"反应传单": ">=3.1.0 <3.2.0 || ^3.2.1",
"@react-leaflet/core": ">=1.0.0 <1.1.0 || ^1.1.1",

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