504 Timeout on some dependencies

[filipw01]

I'm having trouble loading an HTML page in dev mode (the one processed by vite)
Some dependencies are failing with 504 (some load fine with 200)

and the cli also shows some errors

Example of one such dependency request failure

After a change in a file requesting this dependency (timezones.ts in that case) the request goes through and no longer is a problem until restarting vite (maybe v query param is wrong)

@jacksteamdev I believe creating a reproduction won't be that easy so I wanted to first ask. Do you have any clues about what might cause this? Is this chrome crxjs issue or vite itself?

[jacksteamdev]

@filipw01 I have seen this before. I think it's a problem with Dependency Pre-Bundling where Vite doesn't crawl the HTML pages correctly. CRXJS should configure this automatically... not sure if it's a Vite problem or a CRXJS problem.

Questions

• What version of Vite are you using?
• Is the HTML file in the manifest or the Vite config?
• Can you share the config logs from running DEBUG=vite:config vite?

Workaround

What's worked for me in the past is to configure these dependencies manually using the optimizeDeps options, either entries or include:

{
  // ... vite config
  optimizeDeps: {
    entries: ["src/*.html"],
  }
}

[filipw01]

vite 2.9.9
@crxjs/vite-plugin 1.0.7

Is the HTML file in the manifest or the Vite config

It's in both places to be able to create an iframe with it via content script

// vite.config.ts
build: {
      outDir: 'dist',
      emptyOutDir: true,
      rollupOptions: {
        input: {
          booker: path.resolve(__dirname, 'pages/booker.html'),
          handoff: path.resolve(__dirname, 'pages/handoff.html'),
          sidebar: path.resolve(__dirname, 'pages/sidebar.html'),
        },
      },
    },

// manifest.json
"web_accessible_resources": [
    {
      "resources": [
        "assets/images/*.svg",
        "assets/images/*.gif",
        "assets/fonts/roboto/*.ttf",
        "assets/fonts/roboto/*.css",
        "assets/fonts/fontawesome/fonts/*",
        "assets/fonts/fontawesome/css/*",
        "pageWorld.js",
        "pages/sidebar.html"
      ],
      "matches": [
        "<all_urls>"
      ],
      "extension_ids": [
        "*"
      ]
    }
  ]

The whole resolved config

vite:config using resolved config: {
  vite:config   root: '/something',
  vite:config   publicDir: '/something/assets',
  vite:config   build: {
  vite:config     target: [ 'es2019', 'edge88', 'firefox78', 'chrome87', 'safari13.1' ],
  vite:config     polyfillModulePreload: true,
  vite:config     outDir: 'dist',
  vite:config     assetsDir: 'assets',
  vite:config     assetsInlineLimit: 4096,
  vite:config     cssCodeSplit: true,
  vite:config     cssTarget: [ 'es2019', 'edge88', 'firefox78', 'chrome87', 'safari13.1' ],
  vite:config     sourcemap: false,
  vite:config     rollupOptions: { input: [Object] },
  vite:config     minify: 'esbuild',
  vite:config     terserOptions: {},
  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     reportCompressedSize: true,
  vite:config     chunkSizeWarningLimit: 500,
  vite:config     watch: null,
  vite:config     commonjsOptions: { include: [Array], extensions: [Array] },
  vite:config     dynamicImportVarsOptions: { warnOnError: true, exclude: [Array] }
  vite:config   },
  vite:config   plugins: [
  vite:config     'crx:html-auditor-pre',
  vite:config     'vite:pre-alias',
  vite:config     'alias',
  vite:config     'vite-plugin-env-compatible',
  vite:config     'vite:react-babel',
  vite:config     'vite:react-refresh',
  vite:config     'vite:react-jsx',
  vite:config     'crx:hmr',
  vite:config     'crx:dynamic-scripts-load',
  vite:config     'crx:manifest-init',
  vite:config     'vite:modulepreload-polyfill',
  vite:config     'vite:resolve',
  vite:config     'vite:optimized-deps',
  vite:config     'vite:html-inline-proxy',
  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     'crx:file-writer',
  vite:config     'crx:html-auditor',
  vite:config     'crx:dynamic-scripts-serve',
  vite:config     'crx:background-client',
  vite:config     'vite:define',
  vite:config     'vite:css-post',
  vite:config     'vite:worker-import-meta-url',
  vite:config     'vite:client-inject',
  vite:config     'vite:import-analysis',
  vite:config     'crx:html-auditor-post'
  vite:config   ],
  vite:config   define: { // hidden
  vite:config   },
  vite:config   resolve: {
  vite:config     dedupe: [
  vite:config       'react', 'react-dom',
  vite:config       'react', 'react-dom',
  vite:config       'react', 'react-dom',
  vite:config       'react', 'react-dom',
  vite:config       'react', 'react-dom',
  vite:config       'react', 'react-dom',
  vite:config       'react', 'react-dom',
  vite:config       'react', 'react-dom'
  vite:config     ],
  vite:config     alias: [
  vite:config       [Object], [Object], [Object], [Object], [Object],
  vite:config       [Object], [Object], [Object], [Object], [Object],
  vite:config       [Object], [Object], [Object], [Object], [Object],
  vite:config       [Object], [Object], [Object], [Object], [Object],
  vite:config       [Object], [Object], [Object], [Object], [Object],
  vite:config       [Object], [Object], [Object], [Object], [Object],
  vite:config       [Object], [Object], [Object], [Object], [Object],
  vite:config       [Object], [Object], [Object], [Object], [Object],
  vite:config       [Object], [Object], [Object], [Object], [Object],
  vite:config       [Object], [Object], [Object], [Object], [Object],
  vite:config       [Object], [Object], [Object], [Object], [Object],
  vite:config       [Object], [Object], [Object], [Object], [Object],
  vite:config       [Object], [Object], [Object], [Object], [Object],
  vite:config       [Object], [Object], [Object], [Object], [Object],
  vite:config       [Object], [Object], [Object], [Object], [Object],
  vite:config       [Object], [Object], [Object], [Object], [Object],
  vite:config       [Object], [Object]
  vite:config     ]
  vite:config   },
  vite:config   server: {
  vite:config     preTransformRequests: true,
  vite:config     force: true,
  vite:config     hmr: { host: 'localhost' },
  vite:config     fs: { strict: true, allow: [Array], deny: [Array] },
  vite:config     watch: { ignored: [Array] }
  vite:config   },
  vite:config   optimizeDeps: {
  vite:config     include: [
  vite:config       'react/jsx-dev-runtime',
  vite:config       'react/jsx-dev-runtime',
  vite:config       'react/jsx-dev-runtime',
  vite:config       'react/jsx-dev-runtime',
  vite:config       'react/jsx-dev-runtime',
  vite:config       'react/jsx-dev-runtime',
  vite:config       'react/jsx-dev-runtime',
  vite:config       'react/jsx-dev-runtime'
  vite:config     ],
  vite:config     entries: [
  vite:config       'src/content-scripts/gmail/index.ts',
  vite:config       'src/content-scripts/google-calendar/index.js',
  vite:config       'src/content-scripts/outreach/index.ts',
  vite:config       'src/content-scripts/salesforce/index.ts',
  vite:config       'src/content-scripts/planhat/index.ts',
  vite:config       'src/content-scripts/salesloft/index.ts',
  vite:config       'src/content-scripts/frontspin/index.ts',
  vite:config       'src/background.ts',
  vite:config       'src/content-scripts/gmail/index.ts',
  vite:config       'src/content-scripts/google-calendar/index.js',
  vite:config       'src/content-scripts/outreach/index.ts',
  vite:config       'src/content-scripts/salesforce/index.ts',
  vite:config       'src/content-scripts/planhat/index.ts',
  vite:config       'src/content-scripts/salesloft/index.ts',
  vite:config       'src/content-scripts/frontspin/index.ts',
  vite:config       'src/background.ts'
  vite:config     ],
  vite:config     esbuildOptions: { keepNames: undefined, preserveSymlinks: undefined }
  vite:config   },
  vite:config   configFile: '/something/vite.config.ts',
  vite:config   configFileDependencies: [
  vite:config     '/something/manifest.json',
  vite:config     '/something/vite.config.ts'
  vite:config   ],
  vite:config   inlineConfig: {
  vite:config     root: undefined,
  vite:config     base: undefined,
  vite:config     mode: undefined,
  vite:config     configFile: undefined,
  vite:config     logLevel: undefined,
  vite:config     clearScreen: undefined,
  vite:config     server: { force: true, hmr: [Object] }
  vite:config   },
  vite:config   base: '/',
  vite:config   cacheDir: '/something/node_modules/.vite',
  vite:config   command: 'serve',
  vite:config   mode: 'development',
  vite:config   isWorker: false,
  vite:config   isProduction: false,
  vite:config   preview: {
  vite:config     port: undefined,
  vite:config     strictPort: undefined,
  vite:config     host: undefined,
  vite:config     https: undefined,
  vite:config     open: undefined,
  vite:config     proxy: undefined,
  vite:config     cors: undefined,
  vite:config     headers: undefined
  vite:config   },
  vite:config   env: {
  vite:config     VITE_USER_NODE_ENV: 'development',
  vite:config     BASE_URL: '/',
  vite:config     MODE: 'development',
  vite:config     DEV: true,
  vite:config     PROD: false
  vite:config   },
  vite:config   assetsInclude: [Function: assetsInclude],
  vite:config   logger: {
  vite:config     hasWarned: false,
  vite:config     info: [Function: info],
  vite:config     warn: [Function: warn],
  vite:config     warnOnce: [Function: warnOnce],
  vite:config     error: [Function: error],
  vite:config     clearScreen: [Function: clearScreen],
  vite:config     hasErrorLogged: [Function: hasErrorLogged]
  vite:config   },
  vite:config   packageCache: Map(0) {},
  vite:config   createResolver: [Function: createResolver],
  vite:config   worker: {
  vite:config     format: 'iife',
  vite:config     plugins: [
  vite:config       [Object], [Object],
  vite:config       [Object], [Object],
  vite:config       [Object], [Object],
  vite:config       [Object], [Object],
  vite:config       [Object], [Object],
  vite:config       [Object], [Object],
  vite:config       [Object], [Object],
  vite:config       [Object], [Object],
  vite:config       [Object]
  vite:config     ],
  vite:config     rollupOptions: {}
  vite:config   }
  vite:config } +272ms

After workaround changes (pages/*.html in my case) optimizeDeps looks correct

  vite:config   optimizeDeps: {
  vite:config     entries: [
  vite:config       'pages/*.html',
  vite:config       'pages/*.html',
  vite:config       'pages/*.html',
  vite:config       'src/content-scripts/gmail/index.ts',
  vite:config       'src/content-scripts/google-calendar/index.js',
  vite:config       'src/content-scripts/outreach/index.ts',
  vite:config       'src/content-scripts/salesforce/index.ts',
  vite:config       'src/content-scripts/planhat/index.ts',
  vite:config       'src/content-scripts/salesloft/index.ts',
  vite:config       'src/content-scripts/frontspin/index.ts',
  vite:config       'src/background.ts',
  vite:config       'pages/*.html',
  vite:config       'src/content-scripts/gmail/index.ts',
  vite:config       'src/content-scripts/google-calendar/index.js',
  vite:config       'src/content-scripts/outreach/index.ts',
  vite:config       'src/content-scripts/salesforce/index.ts',
  vite:config       'src/content-scripts/planhat/index.ts',
  vite:config       'src/content-scripts/salesloft/index.ts',
  vite:config       'src/content-scripts/frontspin/index.ts',
  vite:config       'src/background.ts'
  vite:config     ],
  vite:config     include: [
  vite:config       'react/jsx-dev-runtime',
  vite:config       'react/jsx-dev-runtime',
  vite:config       'react/jsx-dev-runtime',
  vite:config       'react/jsx-dev-runtime',
  vite:config       'react/jsx-dev-runtime',
  vite:config       'react/jsx-dev-runtime',
  vite:config       'react/jsx-dev-runtime',
  vite:config       'react/jsx-dev-runtime'
  vite:config     ],
  vite:config     esbuildOptions: { keepNames: undefined, preserveSymlinks: undefined }
  vite:config   },

The workaround works great, thank you 🙏

[jacksteamdev]

@filipw01 Glad to help! I looked into this more, and Vite ignores rollupOptions.input if optimizeDeps.entries is defined. CRXJS adds manifest entries to optimizeDeps.entries, so Vite never crawls Rollup inputs with CRXJS. We can fix that.

For future readers, run DEBUG=vite:deps,vite:config vite in the terminal to log the resolved config and the files Vite crawls during pre-bundling. Compare the resolved rollupOptions.input and optimizeDeps.entries with the vite:deps logs to see if something is getting lost.

Resources

• Relevant Vite code
• Relevant CRXJS code

[jacksteamdev]

@filipw01 This is fixed in v1.0.8, CRXJS merges rollupOptions.input into optimizeDeps.entries.

[filipw01]

It works perfectly, Thank you 🙏