monorepoのviteでエイリアスを使ったらエラーになったメモ

## 概要
モノレポ構成でエイリアスを指定して開発していた。
作ったモジュールをいざ別のところから利用しようとしたら`Rollup failed to resolve import`のエラーが発生したのでメモ。
結論から言うと、利用する側でも同様のエイリアス設定が必要だった。
[stack overflow: Ambiguous aliases in Vite monorepo](https://stackoverflow.com/questions/75403735/ambiguous-aliases-in-vite-monorepo)を参考に解決。

[TURBOのInternal Packages](https://turbo.build/repo/docs/handbook/sharing-code/internal-packages)にはviteは設定不要とあるが、エイリアスを使うと設定が必要になる模様。

[ソースコード](https://github.com/hibohiboo/RinneCircle/tree/f6d22cc90176b9cbdd39fa6a76eb8acabd9138ce)

## 構成


```
- packages
  - component ← ここでエイリアスを切っていた
- apps
  - front ← ここでcomponentのモジュールを利用しようとしてエラー
```

## エラー発生時の状況

packages/componentでエイリアスを使用しており、下記のように設定していた。

```packages/component/vite.config.ts
export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: [{ find: "@", replacement: "/src" }],
  },
});
```

```packages/component/tsconfig.json
{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    }
  }
}
```

```json:packages/component/jest.config.json
{
  "roots": [
    "<rootDir>/src"
  ],
  "moduleNameMapper": {
    "^@/(.*)$": "<rootDir>/src/$1"
  }
}
```

## エラー解消後の状況

apps/frontにて下記の追加設定。

```ts:apps/front/vite.config.ts
export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: {
      "@": path.join( __dirname, "../../packages/components/src")
    },
  },
});
```

```ts:apps/front/tsconfig.json
{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["../../packages/components/src/*"]
    }
  }
}

```

## 今後の検討

`@`のエイリアスだと分かりにくいので、`@front`とか`@component`とかのエイリアスにしたほうがよさそう

## エラーメッセージ

```

front:build: [vite]: Rollup failed to resolve import "@/components/common/atoms/InputFileButton" from "D:/develop/project/RinneCircle/packages/components/src/components/builder/ScenarioEdit/ScenarioForm/PostFormHeroImage/index.tsx".
front:build: This is most likely unintended because it can break your application at runtime.
front:build: If you do want to externalize this module explicitly add it to
front:build: `build.rollupOptions.external`
front:build: error during build:
front:build: Error: [vite]: Rollup failed to resolve import "@/components/common/atoms/InputFileButton" from "D:/develop/project/RinneCircle/packages/components/src/components/builder/ScenarioEdit/ScenarioForm/PostFormHeroImage/index.tsx".
front:build: This is most likely unintended because it can break your application at runtime.
front:build: If you do want to externalize this module explicitly add it to
front:build: `build.rollupOptions.external`
front:build:     at viteWarn (file:///D:/develop/project/RinneCircle/node_modules/.pnpm/vite@4.3.9/node_modules/vite/dist/node/chunks/dep-e8f070e8.js:46597:23)
front:build:     at onwarn (file:///D:/develop/project/RinneCircle/node_modules/.pnpm/@vitejs+plugin-react-swc@3.3.2_vite@4.3.9/node_modules/@vitejs/plugin-react-swc/index.mjs:180:9)
front:build:     at onRollupWarning (file:///D:/develop/project/RinneCircle/node_modules/.pnpm/vite@4.3.9/node_modules/vite/dist/node/chunks/dep-e8f070e8.js:46618:9)   
front:build:     at onwarn (file:///D:/develop/project/RinneCircle/node_modules/.pnpm/vite@4.3.9/node_modules/vite/dist/node/chunks/dep-e8f070e8.js:46368:13)
front:build:     at Object.onwarn (file:///D:/develop/project/RinneCircle/node_modules/.pnpm/rollup@3.22.0/node_modules/rollup/dist/es/shared/node-entry.js:25346:13)   
front:build:     at ModuleLoader.handleInvalidResolvedId (file:///D:/develop/project/RinneCircle/node_modules/.pnpm/rollup@3.22.0/node_modules/rollup/dist/es/shared/node-entry.js:23981:26)
front:build:     at file:///D:/develop/project/RinneCircle/node_modules/.pnpm/rollup@3.22.0/node_modules/rollup/dist/es/shared/node-entry.js:23941:26
front:build:     at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
front:build:  ELIFECYCLE  Command failed with exit code 1.
front:build: ERROR: command finished with error: command (D:\develop\project\RinneCircle\apps\front) pnpm run build exited (1)
command (D:\develop\project\RinneCircle\apps\front) pnpm run build exited (1)

 Tasks:    4 successful, 5 total
Cached:    3 cached, 5 total
  Time:    14.588s
Failed:    front#build

 ERROR  run failed: command  exited (1)
 ELIFECYCLE  Command failed with exit code 1.
````