Импортировать компонент React из хранилища подмодулей Git

Question

У меня есть родительский репозиторий, разработанный с помощью React, и внутри него есть дочерний субмодуль (который также разработан реагировать):

Структура папок проекта выглядит примерно так:

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

Я хочу получить доступ и использовать компонент x.jsx из родительского проекта. Я импортировал это как удар в моем родительском проекте:

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

, но это дает мне unexpected token!

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

похоже, что он не может преобразовать его, потому что я написал только тест старая функция JavaScript, например:

export default function test(x) {
  return x * 2
}

Импортируется без ошибок и работает, но когда я написал функцию в стиле стрелки, как показано ниже:

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

она не работает. Кажется, что это просто ошибка во время выполнения модулей, как я могу перенести и импортировать реагирующие компоненты из дочернего субмодуля в родительский репозиторий?

Answer 1

Проблема была в том, что Бабель не знает, что в проекте root проекта есть субмодуль, просто изменив мой файл .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/Bidding" ]
}

Теперь я могу импортировать любой реагирующий компонент и JS модули из подпрограммы. хранилище в стороне моего родительского проекта и работает правильно.