Import React component from Git submodule repository

Question

I have a parent repository developed with React, and I have a child Sub Module inside of it(which is developed by react too):

The project folder structure is something like below:

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

I want to access and use the x.jsx component from parent project. I imported it like blow in my parent project:

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

but it gives me unexpected token!

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

it looks like that it cannot transform it because I wrote just a test function in old JavaScript way like:

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

It imported without any error and works but when I wrote function in arrow style like below:

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

it does not work. It seems like it's just a runtime error of transpiling modules, how can I transpile and import react components from child submodule in to parent repository?

Answer 1

The problem was that Babel does not know that there is a submodule project in the root of the project, just by changing my .babelrc file to babel.config.js and configuring it by babelrcRoots I would be able to solve the issue:

Now my babel.config.js file looks like this:

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

Now I can import any react component and JS modules from sub-repository in side my parent project and it works correctly.