Javascript 意外标记“<&引用；从第三方库导入React项目时

我是个新手，没有使用webpack的经验，正在努力解决以下问题：

我用

npx create React app

创建了一个新的React应用程序（据我所知，它使用了引擎盖下的webpack），并用

npm install

安装了一个第三方库。到目前为止还不错，我能够使用这个库，一切都按预期运行

不幸的是，这个库有一些限制，我想调整它的一个函数来满足我的需要。最初的函数如下所示：

project\u root/node\u modules/third party library/modules/export/tweakableFunction.js

：

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

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

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

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);
}

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

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

project\u root/node\u modules/third party library/modules/export/index.js

：

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

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

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

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);
}

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

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

在我的项目中，我想复制

tweakableFunction

，并为其添加一些功能：

project\u root/src/tweakedFunction/tweakedFunction.js

：

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

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

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

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);
}

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

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

project\u root/src/tweakedFunction/index.js

：

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

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

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

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);
}

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

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

不幸的是，当我运行我的项目时，我在

project\u root/node\u modules/third party library/modules/some\u dir/somefile.js中遇到以下错误：

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

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

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

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);
}

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

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


SyntaxError:[…]意外标记
...
>21 | someFunction:（道具）=>，
|                            ^
...

我是否必须在我的根项目中创建一个webpack/Babel配置才能工作？我试图实现的目标是否可行？
首先，修改
node\u modules
文件夹中的任何内容都不是一个好主意，因为
npm update
将覆盖您在其中更改的任何内容。此外，这些更改将仅在项目的本地实例中可用，您将无法在其他任何地方使用它们。考虑一下，如果其他人可以从你的调整中获益，或者把这个库放入你的个人回购中，并将你的更改添加到所述回购中，就可以做出公开承诺。
您看到的错误之所以发生，是因为您应该用括号中的React组件包装return语句

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

someFunction:（props）=>return（）；

如果在那个错误之后仍然出现，您将尝试在公共JS文件中使用JSX语法
，因为节点模块文件不会用babel处理
当您导入javascript文件时，会使用babel编译文件，但在create react app default WebPack config中，
节点_模块
已被排除，因此当您导入确切的文件时，会抛出一个错误，因为
JSX语法不是本机js语法


回合
=>返回(