“你可能需要一個額外的加載器來處理這些加載器的結果。”

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