NuxtのsrcDirをちょっと凝った設定にしたかっただけなんや・・

概要

Nuxtでのtsconfigのpathの設定で下記のようなデフォルトの設定以外の場合は、
tsconfig-paths-webpack-pluginを入れて、nuxt.config.tsでwebpackの設定を追加しましょうね
というお話

tsconfig.json

    "paths": {
      "~/*": ["./*"],
      "@/*": ["./*"]
    }

環境

package.json

{
  "dependencies": {
    "@nuxt/typescript-runtime": "1.0.0",
    "nuxt": "2.14.0"
  },
  "devDependencies": {
    "@nuxt/types": "2.14.0",
    "@nuxt/typescript-build": "2.0.2",
    "@nuxtjs/eslint-config": "3.1.0",
    "@nuxtjs/eslint-config-typescript": "3.0.0",
    "@nuxtjs/eslint-module": "2.0.0",
    "@nuxtjs/vuetify": "1.11.2",
    "@vue/test-utils": "1.0.3",
    "babel-core": "7.0.0-bridge.0",
    "babel-eslint": "10.1.0",
    "babel-jest": "26.1.0",
    "eslint": "7.5.0",
    "eslint-config-prettier": "6.11.0",
    "eslint-plugin-nuxt": "1.0.0",
    "eslint-plugin-prettier": "3.1.4",
    "jest": "26.1.0",
    "prettier": "2.0.5",
    "ts-jest": "26.1.3",
    "tsconfig-paths-webpack-plugin": "3.3.0",
    "vue-jest": "3.0.4"
  }
}

詳細

こんなディレクトリ構成にしたかった

├── README.md
├── jest.config.js
├── node_modules
├── nuxt.config.ts
├── package.json
├── src
│   ├── controller
│   ├── usecase
│   ├── presenter
│   └── view
│       ├── assets
│       ├── components
│       ├── layouts
│       ├── middleware
│       ├── pages
│       ├── plugins
│       ├── static
│       └── store
├── test
├── tsconfig.json
└── yarn.lock

./src/view配下にnuxtで使うディレクトリを突っ込みたかった。

なのでいつものようにnuxt configにsrcDir: 'src/view'を追加
tsconfigのpathsを下記のように変更し、該当コンポーネントにaliasを使用

tsconfig.json

    "paths": {
      "~/*": ["./src/*"],
      "@/*": ["./src/*"]
    }

いつものようにyarn devするとエラーが出る

エラー内容

何かはわからんがcompile時のloader周りでエラーのようだ
エディタ側では正しくimportされている(該当メソッドへジャンプできる)

ERROR  Failed to compile with 3 errors                                                                                                                                                                                                               friendly-errors 22:37:08

These dependencies were not found:                                                                                                                                                                                                                    friendly-errors 22:37:08
                                                                                                                                                                                                                                                      friendly-errors 22:37:08
* @/{alias指定したパス} in ./node_modules/babel-loader/lib??ref--12-0!./node_modules/ts-loader??ref--12-1!./node_modules/@nuxt/components/dist/loader.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/view/pages/index.vue?vue&type=script&lang=ts&
* @/view/components/Logo.vue in ./node_modules/babel-loader/lib??ref--12-0!./node_modules/ts-loader??ref--12-1!./node_modules/@nuxt/components/dist/loader.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/view/pages/index.vue?vue&type=script&lang=ts&
* @/view/components/VuetifyLogo.vue in ./node_modules/babel-loader/lib??ref--12-0!./node_modules/ts-loader??ref--12-1!./node_modules/@nuxt/components/dist/loader.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/view/pages/index.vue?vue&type=script&lang=ts&

やったこと

tsconfig-paths-webpack-pluginをインストールして
nuxt.config.tsの設定をいじる

yarn add --dev tsconfig-paths-webpack-plugin

nuxt.config.ts

  build: {
    extend(config, _) {
      if (!config.resolve) {
        config.resolve = {}
      }
      if (!config.resolve.plugins) {
        config.resolve.plugins = []
      }
      config.resolve.plugins.push(
        new TsconfigPathsPlugin({ configFile: './tsconfig.json' })
      )
    },
  },