Cloudflare pages plugin prevents Vite's library mode from working

[TheOnlyTails]

Over at https://github.com/lipu-linku/sona/tree/merge_apis/api we have a small Hono server with a library in its src/lib folder, which we want to build using Vite's Library Mode and publish to npm. However, this isn't possible, since the Cloudflare Pages plugin which builds the Hono app swallows up all the entries specified in the Vite config file. Disabling the plugin builds as normal.

[yusukebe]

Hi @TheOnlyTails

Is @hono/vite-cloudflare-pages required for that project? If you don't need it, you can turn it off, and if you do, you may be able to use Vite's mode feature:

https://vitejs.dev/guide/env-and-mode#modes

[TheOnlyTails]

It's a Hono project at its core, so we still need to deploy it with Cloudflare Pages

[yusukebe]

@TheOnlyTails

Can't you use the mode feature of Vite? You can change the mode depending on the string you pass as a build argument.

[TheOnlyTails]

This doesn't matter - library mode isn't like prod vs dev, it just specifies that the project acts as both a module (to be published on npm, for example) and an app (for deployment). The problem we're facing is that the Hono plugin eats up the library output.

Here are the library mode docs: https://vitejs.dev/guide/build.html#library-mode

[yusukebe]

@TheOnlyTails

How about this?

// vite.config.ts

import pages from '@hono/vite-cloudflare-pages'
import devServer from '@hono/vite-dev-server'
import { defineConfig } from 'vite'
import { resolve } from 'node:path'
import dts from 'vite-plugin-dts'
import { exec } from 'node:child_process'

export default defineConfig(async ({ mode }) => {
  if (mode === 'lib') {
    return {
      build: {
        lib: {
          entry: {
            index: 'src/lib/index.ts',
            utils: 'src/lib/utils.ts',
            client: 'src/lib/client.ts',
          },
          formats: ['es'],
        },
        sourcemap: true,
        minify: true,
        outDir: 'dist',
      },
      resolve: {
        alias: {
          $lib: resolve(__dirname, 'src/lib'),
          $server: resolve(__dirname, 'src/server'),
        },
      },
      define: {
        __BRANCH__: await new Promise<string>((resolve, reject) =>
          exec('git branch --show-current', (e, stdout, stderr) => {
            if (e) reject(`Could not get current branch: ${stderr}`)
            else resolve(`"${stdout.trim()}"`)
          })
        ),
      },
      plugins: [
        dts({
          insertTypesEntry: true,
        }),
      ],
    }
  } else {
    return {
      resolve: {
        alias: {
          $lib: resolve(__dirname, 'src/lib'),
          $server: resolve(__dirname, 'src/server'),
        },
      },
      plugins: [
        pages({
          entry: 'src/server/index.ts',
          outputDir: 'pages-dist',
        }),
        devServer({
          entry: 'src/server/index.ts',
        }),
      ],
    }
  }
})

Command:

vite build && vite build --mode lib

[TheOnlyTails]

This works, thank you!