Viteでnode_modules内の`.vue`ファイルをビルド対象に含める方法MEMO

ライブラリ内のVue SFCのコンポーネントを直接ビルドして利用したい等、Viteではnode_modules内のvueファイルと直接importして利用すると以下のようなエラーが発生します。

<template>
  <Component />
</template>
<script lang="ts" setup>
import Component from "madogiwa-ui/src/components/Component.vue";
</script>

error during build:
Error: [vite]: Rollup failed to resolve import "node_modules/my-packages/src/components/Component.vue" from "app/javascript/components/Component.vue?vue&type=script&lang.ts".
This is most likely unintended because it can break your application at runtime.
If you do want to externalize this module explicitly add it to
`build.rollupOptions.external`
    at viteWarn (file:///node_modules/vite/dist/node/chunks/dep-Bh2jsKCM.js:67408:27)
    at onRollupWarning (file:///node_modules/vite/dist/node/chunks/dep-Bh2jsKCM.js:67436:9)
    at onwarn (file:///node_modules/vite/dist/node/chunks/dep-Bh2jsKCM.js:67140:13)
    at file:///node_modules/rollup/dist/es/shared/node-entry.js:18303:13
    at Object.logger [as onLog] (file:///node_modules/rollup/dist/es/shared/node-entry.js:19950:9)
    at ModuleLoader.handleInvalidResolvedId (file:///node_modules/rollup/dist/es/shared/node-entry.js:18893:26)
    at file:///node_modules/rollup/dist/es/shared/node-entry.js:18851:26

色々調べていたのですが、ViteというかRollupはデフォルトではnode_moduleのファイルはビルド済み扱いとなるようです。そのため強制的にビルドするためのオプションがViteにはあり、

By default, linked packages not inside node_modules are not pre-bundled. Use this option to force a linked package to be pre-bundled. https://vitejs.dev/config/dep-optimization-options.html#optimizedeps-include

以下のように利用することでライブラリ内の.vueファイルをビルドして利用することができました 🎉

export default defineConfig({
  plugins: [vue()],
    optimizeDeps: {
+     include: ["my-package"],
    },

ただ外部ライブラリを直接ビルドするのは、babelの設定等々のビルド環境が違うことから想定外の挙動をしたりといった可能性もなきにしもあらずでリスクもありますが、 alias等がライブラリ側と利用側で違ってたりしても動かないので単純にプロジェクト内のVue SFCをパッケージに切り出してメンテナンスしやすいようにするとか、 そういった目的とかでは便利そうですね📝