问题
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?
回答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/Bidding" ]
}
Now I can import any react component and JS modules from sub-repository in side my parent project and it works correctly.
来源:https://stackoverflow.com/questions/60633244/import-react-component-from-git-submodule-repository