Javascript 从Git子模块存储库导入React组件

我有一个使用React开发的父存储库，其中有一个子模块（也由React开发）：

项目文件夹结构如下所示：

parent 
  /.git
  /nodemodule
  /src
  /subModules/childProject
     /.git
     /src
       /js
         /x.jsx //  i want this file from parent project
     /...
  /...

export default function test(x) => x * 2

我想从父项目访问并使用

x.jsx

组件。我像在我的父项目中一样导入了它：

import X from '../subModules/childProject/src/js/x.jsx'

但是它给了我意想不到的记号

   7 |   return (
>  8 |     <article className="center">
     |     ^
   9 |       this is test global component with in child Project
  10 |     </article>
  11 |   )

它导入时没有任何错误，并且可以正常工作，但当我以箭头样式编写函数时，如下所示：

parent 
  /.git
  /nodemodule
  /src
  /subModules/childProject
     /.git
     /src
       /js
         /x.jsx //  i want this file from parent project
     /...
  /...

export default function test(x) => x * 2

---

它不起作用。这似乎只是传输模块的运行时错误，如何将react组件从子模块传输并导入父存储库？

问题是巴贝尔不知道在项目的根目录中有子模块项目，只需将我的

.babelrc

文件更改为

babel.config.js

并通过

babelrcRoots

进行配置，我就能解决问题：

现在我的

babel.config.js

文件如下所示：

module.exports = {
  "presets": [
    "@babel/preset-react",
    "@babel/preset-env"
  ],
  "plugins": [
    "@babel/plugin-proposal-class-properties",
    "@babel/plugin-proposal-object-rest-spread"
  ],
  "babelrcRoots": [ "./", "./subModules/someFolder" ]
}

---

现在，我可以从父项目的子存储库中导入任何react组件和JS模块，并且它可以正常工作。

我们需要更多信息，您是否使用了

创建react app

？你用的是什么版本？似乎您只需要一个.babelrc文件。我已尝试在我的craco.config中将submodules文件夹包含到

babelrcroots

。jsx不会被转换，尽管其他语法（如空点合并表达式）会被转换。