从第三方库导入 React 项目时出现意外的标记“<”

Question

I am fairly new to React and have no experience with webpack and am struggling with the following issue:

I created a new React application with npx create-react-app (which to my understanding uses webpack under the hood) and installed a third-party library with with npm install . So far so good, I am able to use the library and everything runs as expected.

Unfortunately, the library has some limitations and I would like to tweak one of its functions to suit my needs. The original function looks something like this:

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";

In my project, I would like to replicate tweakableFunction and add some functionality to it:

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";

Unfortunately, when I run my project I get the following error in project_root/node_modules/third-party-library/modules/some_dir/somefile.js :

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

Do I have to create a webpack / Babel config in my root project for this to work? Is what I am trying to achieve even feasible?

Answer 1

First of all, modifying anything inside node_modules folder is not a good idea, since npm update will overwrite anything you change in there. Also, those changes will be available only in your local instance of a project, you wouldn't be able to use them anywhere else. Consider making a public commit if other people may benefit from your tweak or fork this library into your personal repo and add your changes to said repo.

And the error you are seeing happened because you should wrap return statement with React component in parenthesis.

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

If after that error is still popping up, you are trying to use JSX syntax inside common JS file

Answer 2

Because node_modules files won't be handled with babel

Files get compiled with babel while you are importing javascript files, but in create-react-app default WebPack config the node_modules has been excluded, so while you are importing the exact file, an error has been thrown, as the <div> JSX syntax is not native js syntax.

---

the turn => <Som to => return (<Som is an absolute wrong, while using the former format the component will be returned directly, the return keyword is not required.

but sure one thing, do not edit code in node_modules .