从第三方库导入 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中编辑代码。