`vite build` hangs when setting a custom mode and the application is using TailwindCSS' new JIT compiler

Describe the bug

When an application is set up to use TailwindCSS’ new JIT compiler, and the application’s vite build is set to override the default mode with vite build --mode custom, the build hangs after it displays the list of bundled files. However, in the same application set-up, if you use the default mode with vite build the build doesn’t hang and successfully executes.

Reproduction

https://github.com/ZachCase/Vite-TailwindJIT-Issue README has step by step walk-through.

System Info

System:
    OS: macOS 11.1
    CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
    Memory: 90.41 MB / 16.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 15.7.0 - ~/.nvm/versions/node/v15.7.0/bin/node
    npm: 7.4.3 - ~/.nvm/versions/node/v15.7.0/bin/npm
  Browsers:
    Brave Browser: 89.1.22.70
    Firefox: 87.0
    Safari: 14.0.2

Used package manager: npm

Logs

npx vite build --mode custom --debug
  vite:config bundled config file loaded in 152ms +0ms
  vite:config using resolved config: {
  vite:config   plugins: [
  vite:config     'alias',
  vite:config     'vite:dynamic-import-polyfill',
  vite:config     'vite:resolve',
  vite:config     'vite:html',
  vite:config     'vite:css',
  vite:config     'vite:esbuild',
  vite:config     'vite:json',
  vite:config     'vite:wasm',
  vite:config     'vite:worker',
  vite:config     'vite:asset',
  vite:config     'vite:vue',
  vite:config     'vite:define',
  vite:config     'vite:css-post',
  vite:config     'vite:build-html',
  vite:config     'commonjs',
  vite:config     'vite:data-uri',
  vite:config     'rollup-plugin-dynamic-import-variables',
  vite:config     'vite:import-analysis',
  vite:config     'vite:esbuild-transpile',
  vite:config     'vite:terser',
  vite:config     'vite:reporter'
  vite:config   ],
  vite:config   mode: 'custom',
  vite:config   build: {
  vite:config     target: [ 'es2019', 'edge18', 'firefox60', 'chrome61', 'safari11' ],
  vite:config     polyfillDynamicImport: true,
  vite:config     outDir: 'dist',
  vite:config     assetsDir: 'assets',
  vite:config     assetsInlineLimit: 4096,
  vite:config     cssCodeSplit: true,
  vite:config     sourcemap: false,
  vite:config     rollupOptions: {},
  vite:config     commonjsOptions: { include: [Array], extensions: [Array] },
  vite:config     minify: 'terser',
  vite:config     terserOptions: {},
  vite:config     cleanCssOptions: {},
  vite:config     write: true,
  vite:config     emptyOutDir: null,
  vite:config     manifest: false,
  vite:config     lib: false,
  vite:config     ssr: false,
  vite:config     ssrManifest: false,
  vite:config     brotliSize: true,
  vite:config     chunkSizeWarningLimit: 500
  vite:config   },
  vite:config   define: { __VUE_OPTIONS_API__: true, __VUE_PROD_DEVTOOLS__: false },
  vite:config   ssr: { external: [ 'vue', '@vue/server-renderer' ] },
  vite:config   configFile: '/Users/cow/apps/sandbox/Vite-TailwindJIT-Issue/JIT/vite.config.js',
  vite:config   inlineConfig: {
  vite:config     root: undefined,
  vite:config     base: undefined,
  vite:config     mode: 'custom',
  vite:config     configFile: undefined,
  vite:config     logLevel: undefined,
  vite:config     clearScreen: undefined,
  vite:config     build: {}
  vite:config   },
  vite:config   root: '/Users/cow/apps/sandbox/Vite-TailwindJIT-Issue/JIT',
  vite:config   base: '/',
  vite:config   resolve: { dedupe: undefined, alias: [ [Object] ] },
  vite:config   publicDir: '/Users/cow/apps/sandbox/Vite-TailwindJIT-Issue/JIT/public',
  vite:config   command: 'build',
  vite:config   isProduction: false,
  vite:config   optimizeCacheDir: '/Users/cow/apps/sandbox/Vite-TailwindJIT-Issue/JIT/node_modules/.vite',
  vite:config   server: {},
  vite:config   env: { BASE_URL: '/', MODE: 'custom', DEV: true, PROD: false },
  vite:config   assetsInclude: [Function: assetsInclude],
  vite:config   logger: {
  vite:config     hasWarned: false,
  vite:config     info: [Function: info],
  vite:config     warn: [Function: warn],
  vite:config     error: [Function: error],
  vite:config     clearScreen: [Function: clearScreen]
  vite:config   },
  vite:config   createResolver: [Function: createResolver]
  vite:config } +5ms
vite v2.1.5 building for custom...
transforming (1) index.html[@vue/compiler-sfc] <script setup> is still an experimental proposal.
Follow its status at https://github.com/vuejs/rfcs/pull/227.

[@vue/compiler-sfc] When using experimental features,
it is recommended to pin your vue dependencies to exact versions to avoid breakage.

transforming (8) src/assets/logo.png

Source path: /Users/cow/apps/sandbox/Vite-TailwindJIT-Issue/JIT/src/App.vue?vue&type=style&index=0&lang.css
Setting up new context...
JIT TOTAL: 63.915ms


transforming (12) node_modules/@vue/reactivity/dist/reactivity.esm-bundler.js

Source path: /Users/cow/apps/sandbox/Vite-TailwindJIT-Issue/JIT/src/components/HelloWorld.vue?vue&type=style&index=0&scoped=true&lang.css
JIT TOTAL: 0.336ms


✓ 13 modules transformed.
dist/assets/logo.03d6d6da.png    6.69kb
dist/index.html                  0.47kb
dist/assets/index.43bc2802.css   0.20kb / brotli: 0.12kb
dist/assets/index.cfdf5b48.js    1.48kb / brotli: 0.71kb
dist/assets/vendor.59acd29a.js   64.57kb / brotli: 22.83kb

(hangs right at the end)

---

Before submitting the issue, please make sure you do the following

• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn’t already an issue that reports the same bug to avoid creating a duplicate.
• Provide a description in this issue that describes the bug.
• Make sure this is a Vite issue and not a framework-specific issue. For example, if it’s a Vue SFC related bug, it should likely be reported to https://github.com/vuejs/vue-next instead.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.

[CowDotDev]

@anncwb - Looks like even without that release adding NODE_ENV=production fixes the hanging. However, it appears to only fix the hanging when set specifically to production. Trying to set it to development or staging for example still hangs.

Not sure how big of an issue that’d be since I’d imagine almost everyone would want production when building for outside local development. At the very least, may be useful to add the note to that documentation page that NODE_ENV=production is required for custom mode builds - as I initially read that doc as just an example, not requirements.

Thanks for the help!

[anncwb]

After #2764 is released, you can add the .env.custom file and write NODE_ENV=production. Custom mode needs to specify development or production mode, the default is development. Here you can see the details, https://vitejs.dev/guide/env-and-mode.html#modes