I am trying to import components into my project that I have created in a parent directory to the project. I am trying to do this to allow me to import these components to multiple projects and this method seems to be the simplest.

When I try this, I am greeted by a fail to compile error:

../../design-system/src/components/button/index.js
Module parse failed: Unexpected token (6:8)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| export default function Button(props) {
|     return (
>         <Link href={props.pageLink}>
|             <button className={styles.btn}>
|                 {props.children}

In researching about loaders, it looks specific to converting files when it is a different format to JS, which it isn't in this case.

Any ideas on how to go from here?

CodePudding user response：

Don't import files from other node projects, link them into this project using npm install

What you are trying to do is to reuse the code from other project, the clean solution to this is to add them as a library for this node project.

Using files from outside the project directory can cause installation problems for people that want to develop on that project and maybe for you the future if you move directories / want to replicate the state.

I can think of a couple of options:

• Uploading the parent node project to github, and run npm install 'npm install https://github.com/your project'
• npm install '../yourparentdirectory'. This one having the drawback of prevailing with the installation problems, but it is possible.

After that you should be able to import code from that project without problems.