Gridsome: import shared components from outside root

[maximelebreton]

Hello,

I have this folder structure with some components that I want to share between site-a & site-b:

.
└── .shared/
│   └── components/
│       └── MyComponent.vue
└── site-a/
│   └── layouts/
│   │   └── Default.vue
│   └── node_modules/
│   ├── package.json
│   └── gridsome.config.js
└── site-b/
│   └── layouts/
│   │   └── Default.vue
│   └── node_modules/
│   ├── package.json
│   └── gridsome.config.js
└── package.json

So I try to import the .shared MyComponent.vue in my site-a Default.vue like this:

// site-a/layouts/Default.vue
import MyComponent from '../../.shared/components/MyComponent.vue'

But when I run gridsome develop from site-a:

c:\my-project\site-a> gridsome develop

I have this message:

These dependencies were not found:

* -!cache-loader?{"cacheDirectory":"node_modules/.cache/gridsome","cacheIdentifier":"29f0df40-vue-loader-template"}!../../../site-a/node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!../../../site-a/node_modules/cache-loader/dist/cjs.js??ref--0-0!../../../site-a/node_modules/vue-loader/lib/index.js??vue-loader-options!./MyComponent.vue?vue&type=template&id=36f838bd& in ../.shared/components/MyComponent.vue?vue&type=template&id=36f838bd&
* vue in ../.shared/components/MyComponent.vue

So maybe he can't access find MyComponent.vue because the .shared folder is outside the gridsome site-a root?

So i tried to put these webpack lines in my site-a gridsome.config.js:

const path = require("path")
module.exports = {
  siteName: "site-a",
  resolve: {
      alias: {
        '~shared': path.resolve(__dirname, '../.shared/'),
      }
  }
}
// also tried this:   chainWebpack: config => { config.resolve.alias.set("~shared", path.resolve(__dirname, "../.shared")); }

To use the ~shared alias:

// site-a/layouts/Default.vue
import MyComponent from '~shared/components/MyComponent.vue'

But i have the same message...

So I dont understand how can I make this simple thing work...?

Thanks for your help!

[OrhanTozan]

Correct me if I'm wrong, but I think every Node.js project need to be self-contained, so no referencing outside of the root folder. What I suggest you to do is publish your shared components to npm, then import it in your site a and b.

[hjvedvik]

You can also look into Yarn workspaces in order to set up a multi package.json project (monorepo). Place a package.json in the .shared folder and make it a private package you import into site-a and site-b as any other npm package like:

import MyComponent from 'shared-package-name/components/MyComponent.vue'

[maximelebreton]

Thank you @NahroTo & @hjvedvik, I do not know yarn wokspaces, and this fit my needs!