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,
  }
})

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.

MigmacOP•4/24/24, 7:18 PM

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

MigmacOP•4/24/24, 8:39 PM

Just realised, it works initially but then cloudflare magically compresses the file and it breaks

MigmacOP•4/24/24, 8:39 PM

can I disable this optimization for a particular file?

MigmacOP•4/24/24, 8:41 PM

Cloudflare Auto Minify seems to be the issue here

MigmacOP•4/24/24, 8:51 PM

yep

MigmacOP•4/24/24, 8:51 PM

That was the issue

MigmacOP•4/24/24, 8:52 PM

by renaming my output css file in vite.config.tsvite.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.min gets ignored by the Cloudflare Auto MinifyCloudflare Auto Minify system.

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

Similar Threads

Similar Threads

Similar Threads