Vue.jsにて、ルートディレクトリよりさらに深い階層のコンポーネントをimportしたい

Question

いつもお世話になっております。
/root/pj_a/src/app.vueにて、
/root/common/component/atoms/common_btn.vueを読み込みたいのですが、

Module not found: Error: Can't resolve 'babel-loader' in 'C:\Users\user\root

というエラーが発生してしまい解決方法に難渋しております。
（webpack側での変更もしなければならないのかな...という気もしています）

root/
　├ common─component┬atoms - common_btn.vue
　│　　　　　　　　  └molecules
　│
　├ pj_a
　│   ├ src - app.vue
　│   ├ node_modules
　│   └ etc... (.babelrc/ package.json / package-lock.json / webpack.config.js / index.json(entry point) ...)
　│
　├ pj_b
　    ├ src - app.vue
　    ├ node_modules
　    └ etc... (.babelrc/ package.json / package-lock.json / webpack.config.js / index.json(entry point) ...)

<template>
  <v-btn/>
</template>

// 以下の読み込みはできない模様...
import VBtn from '../../common/component/atoms/common_btn'

export default = {
  components: { VBtn }
}

お手数ですが、よろしくおねがいします。

Answer 1

これでどうでしょうか

import VBtn from '@/../../common/component/atoms/common_btn'

Answer 2

はじめまして。
解決方法とはいえないかもしれませんが、
babel関係のエラーがでているので

const Vbtn = require('../../common/component/atoms/common_btn')

で動くようにはなるかもしれません。

質問内容から状況が詳しくつかめていませんが、importを使ったままうまく動かすにはおっしゃる通りwebpack側の修正が必要かと思います。

Comments

[退会済みユーザー]

ご回答いただきありがとうございます...。
残念ながら、上記の方法を試してみたものの、同様のエラーとなりうまく取り込むことができませんでした。

[yu-smc]

失礼しました。
webpack.config.jsの管轄外にcommonがあるのでこれで解決しないのは当然でしたね。。

私見ですが、モジュールのバンドルはそれぞれのプロジェクトで完結させたほうが、設定も楽で構造も自然なのではないでしょうか。

[退会済みユーザー]

> 私見ですが、モジュールのバンドルはそれぞれのプロジェクトで完結させたほうが、設定も楽で構造も自然なのではないでしょうか。

おっしゃる通りではあります。
が、どうしても構成上このようにしないと厳しいのです...(他にphpやら使っている箇所が雑多にあります)