Cloudflare Developers•4mo ago

I have different builds when building my vite-react app using cloudflare pages

I am committing the bun.lockb file to ensure the deps are the same, and locally it runs as expected, but for some reason the css file gets all weird when I run the build command through the cloudflare pages build process. exactly the same commands used, and as I mentioned the bun.lockb file is also comitted so it should be installing exactly the same. It does build, but messes somehting up in the process. Have no idea why this could be happening Any suggestions/pointers? my vite.config.ts looks like this:

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import ViteYaml from '@modyfi/vite-plugin-yaml'
import tsconfigPaths from 'vite-tsconfig-paths'

export default defineConfig({
  plugins: [
    ViteYaml(),
    react(),
    tsconfigPaths(),
  ],
  base: './',
  build: {
    minify: true,
    cssMinify: 'esbuild',
    outDir: 'dist',
    emptyOutDir: true,
  }
})

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import ViteYaml from '@modyfi/vite-plugin-yaml'
import tsconfigPaths from 'vite-tsconfig-paths'

export default defineConfig({
  plugins: [
    ViteYaml(),
    react(),
    tsconfigPaths(),
  ],
  base: './',
  build: {
    minify: true,
    cssMinify: 'esbuild',
    outDir: 'dist',
    emptyOutDir: true,
  }
})

The weird thing is the size of the css file is the same, but it is like it's broken somehow and only somethings work. 🤔

1 Reply

Migmac•4mo ago

As a sidenote, if I do a clean build locally and just copy that generated css file and manually replace the contents on the deployed version with the local it works as expected, so my assumption is it is somewhere in the build step on pages Just realised, it works initially but then cloudflare magically compresses the file and it breaks can I disable this optimization for a particular file? Cloudflare Auto Minify seems to be the issue here yep That was the issue by renaming my output css file in vite.config.ts

rollupOptions: {
      output: {
        assetFileNames: (assetInfo) => {
          if (assetInfo.name === 'index.css') return 'index.min.css'
          return assetInfo.name;
        },
      },
    },

rollupOptions: {
      output: {
        assetFileNames: (assetInfo) => {
          if (assetInfo.name === 'index.css') return 'index.min.css'
          return assetInfo.name;
        },
      },
    },

The problem is now solved. because apparently .min gets ignored by the Cloudflare Auto Minify system.

Gaming

Programming

I have different builds when building my vite-react app using cloudflare pages