build --watch doesn't include HTML assets in multi-page app #3279

wgordon17 · 2021-05-06T01:18:13Z

Describe the bug

Running vite build normally on my multi-page app includes all the HTML files in the configured outDir.

snip

../backend/invest_apps/templates/faq/index.html                                               1.46kb
../backend/invest_apps/templates/index.html                                                   1.58kb
../backend/invest_apps/templates/forgot/index.html                                            1.54kb
../backend/invest_apps/templates/error/index.html                                             1.41kb
../backend/invest_apps/templates/contact/index.html                                           1.48kb
../backend/invest_apps/templates/how-it-works/index.html                                      1.42kb
../backend/invest_apps/templates/pricing/index.html                                           1.41kb
../backend/invest_apps/templates/privacy/index.html                                           1.42kb
../backend/invest_apps/templates/app/index.html                                               1.33kb
../backend/invest_apps/templates/terms/index.html                                             1.41kb
../backend/invest_apps/templates/sign-up/index.html                                           1.60kb
../backend/invest_apps/templates/sign-in/index.html                                           1.54kb

But when running vite build --watch in seems to only include the JS assets and nothing else.

snip

../backend/invest_apps/templates/assets/error-legacy.a8c325c2.js        1.26kb / brotli: 0.61kb
../backend/invest_apps/templates/assets/main-legacy.4d0848c8.js         1.72kb / brotli: 0.80kb
../backend/invest_apps/templates/assets/contact-legacy.36da2e28.js      2.41kb / brotli: 0.96kb
../backend/invest_apps/templates/assets/forgot-legacy.79369b70.js       2.00kb / brotli: 0.84kb
../backend/invest_apps/templates/assets/faq-legacy.20234fc9.js          6.66kb / brotli: 1.60kb
../backend/invest_apps/templates/assets/howItWorks-legacy.9262454a.js   2.57kb / brotli: 0.98kb
../backend/invest_apps/templates/assets/app-legacy.86ce7302.js          8.05kb / brotli: 2.46kb
../backend/invest_apps/templates/assets/signIn-legacy.70d56a68.js       2.26kb / brotli: 0.88kb
../backend/invest_apps/templates/assets/signUp-legacy.2d26ff0f.js       0.92kb / brotli: 0.47kb
../backend/invest_apps/templates/assets/pricing-legacy.6e36e767.js      7.29kb / brotli: 2.35kb
../backend/invest_apps/templates/assets/privacy-legacy.33d4e24e.js      11.23kb / brotli: 3.50kb
../backend/invest_apps/templates/assets/signUp-legacy.9b4ff176.js       1.60kb / brotli: 0.66kb
../backend/invest_apps/templates/assets/terms-legacy.628f39c9.js        11.22kb / brotli: 3.51kb
../backend/invest_apps/templates/assets/lines-legacy.5752017c.js        0.11kb / brotli: 0.09kb
../backend/invest_apps/templates/assets/footer-legacy.b26119e8.js       9.71kb / brotli: 2.93kb
../backend/invest_apps/templates/assets/formFields-legacy.4d781df5.js   4.18kb / brotli: 1.42kb
../backend/invest_apps/templates/assets/index-legacy.1e74dd25.js        35.42kb / brotli: 6.68kb
../backend/invest_apps/templates/assets/polyfills-legacy.d57a97d6.js    71.63kb / brotli: 24.11kb
../backend/invest_apps/templates/assets/vendor-legacy.ccdf6f5e.js       104.00kb / brotli: 32.88kb

I saw references in other issues that there's a change happening to the --watch functionality (#3145). Not sure if this PR addresses my issue or not, but I'm happy to at least test it :)

System Info

Output of npx envinfo --system --npmPackages vite,@vitejs/plugin-vue --binaries --browsers:

  System:
    OS: macOS 11.3.1
    CPU: (12) x64 Intel(R) Core(TM) i7-8750H CPU @ 2.20GHz
    Memory: 159.43 MB / 16.00 GB
    Shell: 3.2.2 - /usr/local/bin/fish
  Binaries:
    Node: 16.0.0 - /usr/local/bin/node
    Yarn: 1.22.10 - /usr/local/bin/yarn
    npm: 6.14.11 - ~/n/bin/npm
  Browsers:
    Chrome: 90.0.4430.93
    Firefox: 87.0
    Safari: 14.1
  npmPackages:
    @vitejs/plugin-vue: ^1.1.5 => 1.2.2 
    vite: ^2.0.5 => 2.2.4

Used package manager: yarn

Logs

  vite:config bundled config file loaded in 167ms +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     'legacy-generate-polyfill-chunk',
  vite:config     'legacy-env',
  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     'legacy-post-process',
  vite:config     'vite:import-analysis',
  vite:config     'vite:esbuild-transpile',
  vite:config     'vite:terser',
  vite:config     'vite:reporter'
  vite:config   ],
  vite:config   publicDir: '/Users/wgordon/Projects/investment_app/frontend/src/public',
  vite:config   build: {
  vite:config     target: [ 'es2019', 'edge18', 'firefox60', 'chrome61', 'safari11' ],
  vite:config     polyfillDynamicImport: true,
  vite:config     outDir: '../backend/invest_apps/templates',
  vite:config     assetsDir: 'assets',
  vite:config     assetsInlineLimit: 4096,
  vite:config     cssCodeSplit: true,
  vite:config     sourcemap: false,
  vite:config     rollupOptions: { input: [Object], output: [Array] },
  vite:config     commonjsOptions: { include: [Array], extensions: [Array] },
  vite:config     minify: 'terser',
  vite:config     terserOptions: {},
  vite:config     cleanCssOptions: {},
  vite:config     write: true,
  vite:config     emptyOutDir: true,
  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     watch: true,
  vite:config     w: true
  vite:config   },
  vite:config   root: '/Users/wgordon/Projects/investment_app/frontend',
  vite:config   define: {
  vite:config     __VUE_OPTIONS_API__: true,
  vite:config     __VUE_PROD_DEVTOOLS__: false,
  vite:config     'import.meta.env.LEGACY': '__VITE_IS_LEGACY__'
  vite:config   },
  vite:config   ssr: { external: [ 'vue', '@vue/server-renderer' ] },
  vite:config   configFile: '/Users/wgordon/Projects/investment_app/frontend/vite.config.js',
  vite:config   configFileDependencies: [ 'frontend/vite.config.js' ],
  vite:config   inlineConfig: {
  vite:config     root: 'frontend',
  vite:config     base: undefined,
  vite:config     mode: undefined,
  vite:config     configFile: undefined,
  vite:config     logLevel: undefined,
  vite:config     clearScreen: undefined,
  vite:config     build: { watch: true, w: true }
  vite:config   },
  vite:config   base: '/',
  vite:config   resolve: { dedupe: undefined, alias: [ [Object] ] },
  vite:config   cacheDir: '/Users/wgordon/Projects/investment_app/node_modules/.vite',
  vite:config   command: 'build',
  vite:config   mode: 'production',
  vite:config   isProduction: true,
  vite:config   server: {},
  vite:config   env: { BASE_URL: '/', MODE: 'production', DEV: false, PROD: true },
  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 } +6ms
vite v2.2.4 building for production...

watching for file changes...

build started...
transforming (540) src/components/icons/passwordIcon.vue  vite:resolve 2ms   ./assets/fonts/dm-sans-v6-latin-ext_latin-regular.woff2 -> /Users/wgordon/Projects/investment_app/frontend/src/assets/fonts/dm-sans-v6-latin-ext_latin-regular.woff2 +0ms
  vite:resolve 3ms   ./assets/fonts/dm-sans-v6-latin-ext_latin-italic.woff2 -> /Users/wgordon/Projects/investment_app/frontend/src/assets/fonts/dm-sans-v6-latin-ext_latin-italic.woff2 +0ms
  vite:resolve 3ms   ./assets/fonts/dm-sans-v6-latin-ext_latin-500italic.woff2 -> /Users/wgordon/Projects/investment_app/frontend/src/assets/fonts/dm-sans-v6-latin-ext_latin-500italic.woff2 +0ms
  vite:resolve 3ms   ./assets/fonts/dm-sans-v6-latin-ext_latin-500.woff2 -> /Users/wgordon/Projects/investment_app/frontend/src/assets/fonts/dm-sans-v6-latin-ext_latin-500.woff2 +0ms
  vite:resolve 3ms   ./assets/fonts/dm-sans-v6-latin-ext_latin-700.woff2 -> /Users/wgordon/Projects/investment_app/frontend/src/assets/fonts/dm-sans-v6-latin-ext_latin-700.woff2 +0ms
  vite:resolve 3ms   ./assets/fonts/dm-sans-v6-latin-ext_latin-700italic.woff2 -> /Users/wgordon/Projects/investment_app/frontend/src/assets/fonts/dm-sans-v6-latin-ext_latin-700italic.woff2 +0ms
  vite:resolve 1ms   ./assets/fonts/dm-sans-v6-latin-ext_latin-regular.woff -> /Users/wgordon/Projects/investment_app/frontend/src/assets/fonts/dm-sans-v6-latin-ext_latin-regular.woff +614ms
  vite:resolve 0ms   ./assets/fonts/dm-sans-v6-latin-ext_latin-italic.woff -> /Users/wgordon/Projects/investment_app/frontend/src/assets/fonts/dm-sans-v6-latin-ext_latin-italic.woff +0ms
  vite:resolve 1ms   ./assets/fonts/dm-sans-v6-latin-ext_latin-500italic.woff -> /Users/wgordon/Projects/investment_app/frontend/src/assets/fonts/dm-sans-v6-latin-ext_latin-500italic.woff +1ms
  vite:resolve 0ms   ./assets/fonts/dm-sans-v6-latin-ext_latin-500.woff -> /Users/wgordon/Projects/investment_app/frontend/src/assets/fonts/dm-sans-v6-latin-ext_latin-500.woff +8ms
  vite:resolve 0ms   ./assets/fonts/dm-sans-v6-latin-ext_latin-700.woff -> /Users/wgordon/Projects/investment_app/frontend/src/assets/fonts/dm-sans-v6-latin-ext_latin-700.woff +0ms
  vite:resolve 0ms   ./assets/fonts/dm-sans-v6-latin-ext_latin-700italic.woff -> /Users/wgordon/Projects/investment_app/frontend/src/assets/fonts/dm-sans-v6-latin-ext_latin-700italic.woff +1ms
✓ 544 modules transformed.
rendering chunks (35)...[vite:build-html] No corresponding legacy polyfill chunk found for /Users/wgordon/Projects/investment_app/frontend/error/index.html
rendering chunks (36)...[@vitejs/plugin-legacy] legacy polyfills: Set(53) {
  'core-js/modules/es.regexp.exec.js',
  'core-js/modules/es.string.split.js',
  'core-js/modules/web.dom-collections.for-each.js',
  'core-js/modules/es.string.trim.js',
  'core-js/modules/es.array.reduce.js',
  'core-js/modules/es.array.concat.js',
  'core-js/modules/es.array.iterator.js',
  'core-js/modules/es.object.to-string.js',
  'core-js/modules/web.dom-collections.iterator.js',
  'core-js/modules/es.string.starts-with.js',
  'core-js/modules/es.object.assign.js',
  'core-js/modules/es.array.splice.js',
  'core-js/modules/es.array.slice.js',
  'core-js/modules/es.string.replace.js',
  'core-js/modules/es.string.iterator.js',
  'core-js/modules/es.weak-map.js',
  'core-js/modules/es.symbol.js',
  'core-js/modules/es.symbol.description.js',
  'core-js/modules/es.array.includes.js',
  'core-js/modules/es.map.js',
  'core-js/modules/es.set.js',
  'core-js/modules/es.array.filter.js',
  'core-js/modules/es.array.map.js',
  'core-js/modules/es.object.get-own-property-names.js',
  'core-js/modules/es.reflect.get.js',
  'core-js/modules/es.number.constructor.js',
  'core-js/modules/es.reflect.set.js',
  'core-js/modules/es.reflect.delete-property.js',
  'core-js/modules/es.reflect.has.js',
  'core-js/modules/es.reflect.own-keys.js',
  'core-js/modules/es.reflect.get-prototype-of.js',
  'core-js/modules/es.symbol.iterator.js',
  'core-js/modules/es.object.is-extensible.js',
  'core-js/modules/es.array.join.js',
  'core-js/modules/es.object.keys.js',
  'core-js/modules/es.function.name.js',
  'core-js/modules/es.promise.js',
  'core-js/modules/es.string.includes.js',
  'core-js/modules/es.string.match.js',
  'core-js/modules/es.regexp.to-string.js',
  'core-js/modules/es.array.find-index.js',
  'core-js/modules/es.string.anchor.js',
  'core-js/modules/es.symbol.unscopables.js',
  'core-js/modules/es.array.from.js',
  'core-js/modules/es.array.find.js',
  'core-js/modules/es.symbol.to-string-tag.js',
  'core-js/modules/es.json.to-string-tag.js',
  'core-js/modules/es.math.to-string-tag.js',
  'core-js/modules/es.string.search.js',
  'core-js/modules/es.regexp.constructor.js',
  'core-js/modules/es.string.ends-with.js',
  'core-js/modules/web.url.js',
  'core-js/modules/es.string.link.js'
}
  vite:config using resolved config: {
  vite:config   root: '/Users/wgordon/Projects/investment_app/node_modules/@vitejs/plugin-legacy',
  vite:config   configFile: undefined,
  vite:config   logLevel: 'error',
  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     'polyfills',
  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   build: {
  vite:config     target: false,
  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: { input: [Object], output: [Object] },
  vite:config     commonjsOptions: { include: [Array], extensions: [Array] },
  vite:config     minify: 'terser',
  vite:config     terserOptions: {},
  vite:config     cleanCssOptions: {},
  vite:config     write: false,
  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     watch: null
  vite:config   },
  vite:config   configFileDependencies: [],
  vite:config   inlineConfig: {
  vite:config     root: '/Users/wgordon/Projects/investment_app/node_modules/@vitejs/plugin-legacy',
  vite:config     configFile: false,
  vite:config     logLevel: 'error',
  vite:config     plugins: [ [Object] ],
  vite:config     build: {
  vite:config       write: false,
  vite:config       target: false,
  vite:config       minify: 'terser',
  vite:config       assetsDir: 'assets',
  vite:config       rollupOptions: [Object]
  vite:config     }
  vite:config   },
  vite:config   base: '/',
  vite:config   resolve: { dedupe: undefined, alias: [ [Object] ] },
  vite:config   publicDir: '/Users/wgordon/Projects/investment_app/node_modules/@vitejs/plugin-legacy/public',
  vite:config   cacheDir: '/Users/wgordon/Projects/investment_app/node_modules/@vitejs/plugin-legacy/node_modules/.vite',
  vite:config   command: 'build',
  vite:config   mode: 'production',
  vite:config   isProduction: true,
  vite:config   server: {},
  vite:config   env: { BASE_URL: '/', MODE: 'production', DEV: false, PROD: true },
  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 } +48s
../backend/invest_apps/templates/assets/error-legacy.a8c325c2.js        1.26kb / brotli: 0.61kb
../backend/invest_apps/templates/assets/main-legacy.4d0848c8.js         1.72kb / brotli: 0.80kb
../backend/invest_apps/templates/assets/contact-legacy.36da2e28.js      2.41kb / brotli: 0.96kb
../backend/invest_apps/templates/assets/forgot-legacy.79369b70.js       2.00kb / brotli: 0.84kb
../backend/invest_apps/templates/assets/faq-legacy.20234fc9.js          6.66kb / brotli: 1.60kb
../backend/invest_apps/templates/assets/howItWorks-legacy.9262454a.js   2.57kb / brotli: 0.98kb
../backend/invest_apps/templates/assets/app-legacy.86ce7302.js          8.05kb / brotli: 2.46kb
../backend/invest_apps/templates/assets/signIn-legacy.70d56a68.js       2.26kb / brotli: 0.88kb
../backend/invest_apps/templates/assets/signUp-legacy.2d26ff0f.js       0.92kb / brotli: 0.47kb
../backend/invest_apps/templates/assets/pricing-legacy.6e36e767.js      7.29kb / brotli: 2.35kb
../backend/invest_apps/templates/assets/privacy-legacy.33d4e24e.js      11.23kb / brotli: 3.50kb
../backend/invest_apps/templates/assets/signUp-legacy.9b4ff176.js       1.60kb / brotli: 0.66kb
../backend/invest_apps/templates/assets/terms-legacy.628f39c9.js        11.22kb / brotli: 3.51kb
../backend/invest_apps/templates/assets/lines-legacy.5752017c.js        0.11kb / brotli: 0.09kb
../backend/invest_apps/templates/assets/footer-legacy.b26119e8.js       9.71kb / brotli: 2.93kb
../backend/invest_apps/templates/assets/formFields-legacy.4d781df5.js   4.18kb / brotli: 1.42kb
../backend/invest_apps/templates/assets/index-legacy.1e74dd25.js        35.42kb / brotli: 6.68kb
../backend/invest_apps/templates/assets/polyfills-legacy.d57a97d6.js    71.63kb / brotli: 24.11kb
../backend/invest_apps/templates/assets/vendor-legacy.ccdf6f5e.js       104.00kb / brotli: 32.88kb

Vite Config

import {defineConfig} from 'vite'
import vue from '@vitejs/plugin-vue'
import legacy from '@vitejs/plugin-legacy'
import {resolve} from 'path'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue(), legacy()],
  publicDir: 'src/public',
  build: {
    outDir: '../backend/invest_apps/templates',
    emptyOutDir: true,
    rollupOptions: {
      input: {
        main: resolve(__dirname, 'index.html'),
        app: resolve(__dirname, 'app/index.html'),
        contact: resolve(__dirname, 'contact/index.html'),
        error: resolve(__dirname, 'error/index.html'),
        faq: resolve(__dirname, 'faq/index.html'),
        forgot: resolve(__dirname, 'forgot/index.html'),
        howItWorks: resolve(__dirname, 'how-it-works/index.html'),
        pricing: resolve(__dirname, 'pricing/index.html'),
        privacy: resolve(__dirname, 'privacy/index.html'),
        signIn: resolve(__dirname, 'sign-in/index.html'),
        signUp: resolve(__dirname, 'sign-up/index.html'),
        terms: resolve(__dirname, 'terms/index.html')
      }
    }
  }
})

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.

The text was updated successfully, but these errors were encountered:

Xenoha · 2021-05-06T15:44:26Z

Same issue when using SPA

wgordon17 · 2021-05-06T16:57:14Z

Just to provide some context around this, I'm using Django as my backend server for the vite app. My intended development workflow is to set up vite build --watch so it auto-builds all my frontend assets directly into the Django templates folder (based on the outDir). That way I can develop as quickly from Django as I can without it :)

thomasschuiki · 2021-05-27T09:22:17Z

I'm also experiencing this or something similar.

The first vite build --watch --emptyOutDir builds all files correctly. After changing any file the rebuild leaves out the css files for me.

bannermiao · 2021-05-28T08:32:12Z

me too

softboy99 · 2021-06-22T03:40:15Z

me too

github-actions · 2021-10-31T00:07:44Z

Hello @wgordon17. Please provide a minimal reproduction using a GitHub repository or StackBlitz. Issues marked with need reproduction will be closed if they have no activity within 3 days.

wgordon17 added the pending triage label May 6, 2021

ldexterldesign mentioned this issue May 18, 2021

In watch mode, changes in @import'ed files don't trigger CSS rebuild #3387

Closed

6 tasks

Niputi added the needs reproduction label Oct 31, 2021

github-actions bot removed the pending triage label Oct 31, 2021

github-actions bot closed this as completed Nov 4, 2021

github-actions bot locked and limited conversation to collaborators Nov 18, 2021

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

build --watch doesn't include HTML assets in multi-page app #3279

build --watch doesn't include HTML assets in multi-page app #3279

wgordon17 commented May 6, 2021

Xenoha commented May 6, 2021

wgordon17 commented May 6, 2021

thomasschuiki commented May 27, 2021

bannermiao commented May 28, 2021

softboy99 commented Jun 22, 2021

github-actions bot commented Oct 31, 2021

build --watch doesn't include HTML assets in multi-page app #3279

build --watch doesn't include HTML assets in multi-page app #3279

Comments

wgordon17 commented May 6, 2021

Describe the bug

System Info

Logs

Vite Config

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

Xenoha commented May 6, 2021

wgordon17 commented May 6, 2021

thomasschuiki commented May 27, 2021

bannermiao commented May 28, 2021

softboy99 commented Jun 22, 2021

github-actions bot commented Oct 31, 2021