크롬 익스텐션 vite.config.ts 작성하며 생긴 문제

크롬 익스텐션 프로그래밍을 하는데 typescript로 개발했고 vite로 빌드하도록 구성했다. 문제는 기존 웹 애플리케이션과 다르게 익스텐션은 진입점이 여러개다. popup, content, background 이렇게 존재한다. 그렇다면 vite.config.ts를 3개 작성해야할까. 

 

분명 비슷한 문제를 해결한 케이스가 있을거라 생각하고 서치해보니 역시 관련 라이브러리가 존재했다. vite-plugin-chrome-extension 라이브러리를 사용하면 해결할 수 있었다.

 

물론 그 과정에서 문제도 있었다. 아래처럼 코드를 작성했는데 vscode에서 경고를 띄웠다.

import { chromeExtension } from "vite-plugin-chrome-extension"
...

export default defineConfig({
  plugins: [
    vue(),
    chromeExtension(),
    /* 경고내용
    No overload matches this call.
  The last overload gave the following error.
    Type 'ChromeExtensionPlugin' is not assignable to type 'PluginOption'.
      Type 'ChromeExtensionPlugin' is not assignable to type 'Plugin<any>'.
        Types of property 'configResolved' are incompatible.
          Type '(config: Readonly<Omit<UserConfig, "plugins" | "assetsInclude" | "optimizeDeps" | "worker" | "alias" | "dedupe"> & { configFile: string | undefined; configFileDependencies: string[]; ... 19 more ...; worker: ResolveWorkerOptions; }>) => void | Promise<...>' is not assignable to type 'ObjectHook<(this: void, config: Readonly<Omit<UserConfig, "build" | "plugins" | "css" | "assetsInclude" | "optimizeDeps" | "worker"> & { configFile: string | undefined; configFileDependencies: string[]; ... 25 more ...; experimental: ExperimentalOptions; } & PluginHookUtils>) => void | Promise<...>> | undefined'.
            Type '(config: Readonly<Omit<UserConfig, "plugins" | "assetsInclude" | "optimizeDeps" | "worker" | "alias" | "dedupe"> & { configFile: string | undefined; configFileDependencies: string[]; ... 19 more ...; worker: ResolveWorkerOptions; }>) => void | Promise<...>' is not assignable to type '(this: void, config: Readonly<Omit<UserConfig, "build" | "plugins" | "css" | "assetsInclude" | "optimizeDeps" | "worker"> & { configFile: string | undefined; configFileDependencies: string[]; ... 25 more ...; experimental: ExperimentalOptions; } & PluginHookUtils>) => void | Promise<...>'.
              Types of parameters 'config' and 'config' are incompatible.
                Type 'Readonly<Omit<UserConfig, "build" | "plugins" | "css" | "assetsInclude" | "optimizeDeps" | "worker"> & { configFile: string | undefined; configFileDependencies: string[]; ... 25 more ...; experimental: ExperimentalOptions; } & PluginHookUtils>' is not assignable to type 'Readonly<Omit<UserConfig, "plugins" | "assetsInclude" | "optimizeDeps" | "worker" | "alias" | "dedupe"> & { configFile: string | undefined; configFileDependencies: string[]; ... 19 more ...; worker: ResolveWorkerOptions; }>'.
                  Types of property 'build' are incompatible.
                    Type 'ResolvedBuildOptions' is not assignable to type 'BuildOptions & Required<Omit<BuildOptions, "base" | "cleanCssOptions" | "polyfillDynamicImport" | "brotliSize">>'.
                      Type 'ResolvedBuildOptions' is not assignable to type 'BuildOptions'.
                        Types of property 'assetsInlineLimit' are incompatible.
                          Type 'number | ((filePath: string, content: Buffer) => boolean | undefined)' is not assignable to type 'number | undefined'.
                            Type '(filePath: string, content: Buffer) => boolean | undefined' is not assignable to type 'number'.ts(2769)
index.d.ts(3194, 18): The last overload is declared here.
    */
    ...
  ]
})

해결방법은 아래와 같다. 

import { chromeExtension } from "vite-plugin-chrome-extension"
...

export default defineConfig({
  plugins: [
    vue(),
    chromeExtension() as unknown as PluginOption,
    //  as unknown as PluginOption 으로 타입캐스팅 해준다
    ...
  ]
})