從第三方庫導入 React 項目時出現意外的標記“<”

Question

我對 React 相當陌生，對 webpack 沒有經驗，並且正在努力解決以下問題：

我使用 npx npx create-react-app創建了一個新的 React 應用程序（據我了解，它在后台使用 webpack）並使用npm install安裝了一個第三方庫。 到目前為止一切順利，我能夠使用該庫並且一切都按預期運行。

不幸的是，這個庫有一些限制，我想調整它的一個功能以滿足我的需要。 原來的 function 看起來像這樣：

project_root/node_modules/third-party-library/modules/export/tweakableFunction.js ：

import {someFunction} from "../utils/configUtils";

export const tweakableFunction = (a, b) => {
   return someFunction(a, b);
}

project_root/node_modules/third-party-library/modules/export/index.js ：

"use strict";
export {tweakableFunction } from "./tweakableFunction";

在我的項目中，我想復制tweakableFunction並為其添加一些功能：

project_root/src/tweakedFunction/tweakedFunction.js ：

import {someFunction} from "third-party-library/modules/utils/configUtils";

export const tweakedFunction = (a, b) => {
    //... do some stuff the original library can't do ...
    return someFunction(a, b);
}

project_root/src/tweakedFunction/index.js ：

"use strict";
export {tweakedFunction } from "./tweakedFunction";

不幸的是，當我運行我的項目時，我在project_root/node_modules/third-party-library/modules/some_dir/somefile.js中收到以下錯誤：

SyntaxError: [...] Unexpected token
...
> 21 |   someFunction: (props) => <SomeComponent {...props} />,
     |                            ^
...

我是否必須在我的根項目中創建一個 webpack / Babel 配置才能正常工作？ 我想要實現的目標是否可行？

Answer 1

首先，修改node_modules文件夾中的任何內容都不是一個好主意，因為npm update將覆蓋您在那里更改的任何內容。 此外，這些更改僅在您的本地項目實例中可用，您將無法在其他任何地方使用它們。 如果其他人可能會從您的調整中受益，或者將該庫分叉到您的個人存儲庫中並將您的更改添加到所述存儲庫中，請考慮進行公開提交。

並且您看到的錯誤發生是因為您應該在括號中用 React 組件包裝 return 語句。

someFunction: (props) => return (<SomeComponent {...props} />);

如果在該錯誤仍然彈出之后，您正在嘗試在公共 JS 文件中使用 JSX 語法

Answer 2

因為 node_modules 文件不會被 babel 處理

導入 javascript 文件時使用 babel 編譯文件，但在 create-react-app 默認 WebPack 配置中， node_modules已被排除，因此當您導入確切的文件時，會引發錯誤，因為<div> JSX 語法不是原生 js 語法。

---

turn => <Som to => return (<Som是絕對錯誤的，使用前一種格式會直接返回組件，return 關鍵字不是必須的。

但可以肯定的是，不要在node_modules中編輯代碼。