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

概要

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

TURBOのInternal Packagesにはviteは設定不要とあるが、エイリアスを使うと設定が必要になる模様。

ソースコード

構成

- 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/*"]
    }
  }
}

packages/component/jest.config.json

{
  "roots": [
    "<rootDir>/src"
  ],
  "moduleNameMapper": {
    "^@/(.*)$": "<rootDir>/src/$1"
  }
}

エラー解消後の状況

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

apps/front/vite.config.ts

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

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.