false-positive error masks real error (vercel deployment)

[bfourgeaud]

Hello,

I have seen an error that pops only when I deploy to vercel.

If there is some error in my code, and I push to vercel, the build process will give me the following error 100% of the time: Error: Couldn't find configuration for either precaching or runtime caching. Please ensure that the various glob options are set to match one or more files, and/or configure the runtimeCaching option.

The problem is that I have to remove the VitePWA config from vite.config.js, and push again, in order to have the real error showing up : Error: Preprocessor dependency "sass" not found. Did you install it?

I know then, that I have to add sass as a dependency (Already was globally installed on my local environnement, so it didn't trigger on local build).

When i resolve the error (sass dependency), and add back VitePWA config, everything works fine.

/* package.json */
{
  "name": "xxx",
  "version": "0.0.0",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "serve": "vite preview",
    "analysis": "windicss-analysis"
  },
  "dependencies": {
    "axios": "^0.21.1",
    "dayjs": "^1.10.4",
    "mangopay-cardregistration-js-kit": "^1.2.2",
    "vee-validate": "^4.4.0",
    "vue": "^3.0.5",
    "vue-router": "^4.0.6",
    "vue3-carousel": "^0.1.15",
    "vue3-click-away": "^1.2.1",
    "vuex": "^4.0.0",
    "yup": "^0.32.9"
  },
  "devDependencies": {
    "@iconify/json": "^1.1.327",
    "@vitejs/plugin-vue": "^1.2.1",
    "@vue/compiler-sfc": "^3.0.5",
    "node-sass": "^5.0.0",
    "sass": "^1.34.0",
    "sass-loader": "^11.1.0",
    "vite": "^2.1.5",
    "vite-plugin-components": "^0.8.3",
    "vite-plugin-icons": "^0.4.0",
    "vite-plugin-pwa": "^0.7.3",
    "vite-plugin-windicss": "0.12.5",
    "windicss-analysis": "^0.2.0"
  }
}

/* vite.config.js */
import { defineConfig } from 'vite'
import path from 'path'
import vue from '@vitejs/plugin-vue'
import WindiCSS from 'vite-plugin-windicss'
import ViteComponents from 'vite-plugin-components'
import ViteIcons, { ViteIconsResolver } from 'vite-plugin-icons'
import { VitePWA } from 'vite-plugin-pwa'

// https://vitejs.dev/config/
export default defineConfig({
  resolve: {
    alias: {
      '@/': `${path.resolve(__dirname, 'src')}/`,
    },
  },
  plugins: [
    vue(),
    WindiCSS(),
    ViteComponents({
      extensions: ['vue'],

      // auto import icons
      customComponentResolvers: [
        ViteIconsResolver({
          componentPrefix: '',
          // enabledCollections: ['carbon']
        }),
      ],
    }),
    ViteIcons(),
    // https://github.com/antfu/vite-plugin-pwa
    VitePWA({
      registerType: 'autoUpdate',
      manifest: {
        name: 'xxxx',
        short_name: 'xxxx',
        theme_color: '#ffffff',
        icons: [
          {
            src: '/pwa-192x192.png',
            sizes: '192x192',
            type: 'image/png',
          },
          {
            src: '/pwa-512x512.png',
            sizes: '512x512',
            type: 'image/png',
          },
          {
            src: '/pwa-512x512.png',
            sizes: '512x512',
            type: 'image/png',
            purpose: 'any maskable',
          },
        ],
      },
    }),
  ]
})

[userquin]

@bfourgeaud can you provide a minimal repro so we can focus on extracting errors from workbox?

[userquin]

related to #61

[bfourgeaud]

I'll send a repro tonight or tomorrow. Thx ;)

[bfourgeaud]

Hello,

Sorry for the late response. Here is a reproduction : https://github.com/bfourgeaud/founnd-admin

1 - vite-plugin-pwa 2 - App.vue -> typography error on import HelloWorld component (helloWold.vue instead of HelloWorld.vue)

When importing to vercel (See error at 14:09:55.904) : `

14:09:43.071 | Cloning github.com/bfourgeaud/founnd-admin (Branch: master, Commit: 8825eb5) 14:09:43.304 | Cloning completed: 232.868ms 14:09:43.320 | Analyzing source code... 14:09:44.704 | Installing build runtime... 14:09:47.529 | Build runtime installed: 2.825s 14:09:50.281 | Looking up build cache... 14:09:50.653 | Build cache found. Downloading... 14:09:52.905 | Build cache downloaded [43.47 MB]: 2251.758ms 14:09:53.940 | Detected package.json 14:09:53.940 | Installing dependencies... 14:09:54.291 | yarn install v1.22.10 14:09:54.303 | warning package.json: No license field 14:09:54.355 | warning admin@0.0.0: No license field 14:09:54.358 | [1/4] Resolving packages... 14:09:54.577 | success Already up-to-date. 14:09:54.579 | Done in 0.29s. 14:09:54.780 | Running "yarn run build" 14:09:54.956 | yarn run v1.22.10 14:09:54.968 | warning package.json: No license field 14:09:54.978 | $ vite build 14:09:55.808 | vite v2.3.4 building for production... 14:09:55.838 | transforming... 14:09:55.894 | ✓ 4 modules transformed. 14:09:55.904 | [vite-plugin-pwa] Couldn't find configuration for either precaching or runtime caching. Please ensure that the various glob options are set to match one or more files, and/or configure the runtimeCaching option. 14:09:55.906 | error during build: 14:09:55.906 | Error: Couldn't find configuration for either precaching or runtime caching. Please ensure that the various glob options are set to match one or more files, and/or configure the runtimeCaching option. 14:09:55.906 | at module.exports (/vercel/path0/node_modules/workbox-build/build/lib/populate-sw-template.js:41:11) 14:09:55.906 | at module.exports (/vercel/path0/node_modules/workbox-build/build/lib/write-sw-using-default-template.js:50:25) 14:09:55.906 | at async generateSW (/vercel/path0/node_modules/workbox-build/build/generate-sw.js:229:21) 14:09:55.906 | at async Object.closeBundle (/vercel/path0/node_modules/vite-plugin-pwa/dist/index.js:329:13) 14:09:55.906 | at async Promise.all (index 0) 14:09:55.907 | at async rollupInternal (/vercel/path0/node_modules/rollup/dist/shared/rollup.js:20661:9) 14:09:55.907 | at async doBuild (/vercel/path0/node_modules/vite/dist/node/chunks/dep-6b5f3ba8.js:44910:24) 14:09:55.907 | at async build (/vercel/path0/node_modules/vite/dist/node/chunks/dep-6b5f3ba8.js:44750:16) 14:09:55.907 | at async CAC.<anonymous> (/vercel/path0/node_modules/vite/dist/node/cli.js:13928:9) 14:09:55.926 | error Command failed with exit code 1. 14:09:55.926 | info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command. 14:09:55.945 | Error: Command "yarn run build" exited with 1

`

[userquin]

@bfourgeaud it seems to be a problem with vite, I'm on windows machine and just works, on linux machine will fail. I don't know why this behavior, for example, changing the import to import HelloWorld from './components/missing.vue' just fails, and the error is not masked:

yarn run v1.22.10
warning package.json: No license field
$ vite build
vite v2.3.4 building for production...
✓ 6 modules transformed.
transforming (13) node_modules\@vue\reactivity\dist\reactivity.esm-bundler.js
Could not resolve './components/missing.vue' from src\App.vue
error during build:
Error: Could not resolve './components/missing.vue' from src\App.vue
    at error (F:\work\projects\quini\GitHub\founnd-admin\node_modules\rollup\dist\shared\rollup.js:7895:30)
    at ModuleLoader.handleResolveId (F:\work\projects\quini\GitHub\founnd-admin\node_modules\rollup\dist\shared\rollup.js:19570:24)
    at F:\work\projects\quini\GitHub\founnd-admin\node_modules\rollup\dist\shared\rollup.js:19526:22
    at async Promise.all (index 2)
    at async ModuleLoader.fetchStaticDependencies (F:\work\projects\quini\GitHub\founnd-admin\node_modules\rollup\dist\shared\rollup.js:19524:34)
    at async Promise.all (index 0)
    at async ModuleLoader.fetchModule (F:\work\projects\quini\GitHub\founnd-admin\node_modules\rollup\dist\shared\rollup.js:19500:9)
    at async Promise.all (index 2)
    at async ModuleLoader.fetchStaticDependencies (F:\work\projects\quini\GitHub\founnd-admin\node_modules\rollup\dist\shared\rollup.js:19524:34)
    at async Promise.all (index 0)
error Command failed with exit code 1.

I have added pwa.js on root:

import { registerSW } from 'virtual:pwa-register'
registerSW({ immediate: true })

then, importing it on main.js with dynamic import:

import { createApp } from 'vue'
import App from './App.vue'

if (import.meta.env.MODE === 'production' && typeof window !== 'undefined') {
  import('./pwa')
}

createApp(App).mount('#app')

It works sometimes and others no, so I think is something related with vite. Seems the closeBundle is called before vite emits assets on dist folder and so it fails with the error you provide, since there is no entries on dist folder and no runtimeConfig is provided (to workbox-build::generateWS function), the error is not masked it is a correct error, vite should fail before but isn't fail.

If I change the import to be ./components/HelloWorld.vue build always works.

@antfu the project is using vite 2.3.4, we are using an older version ^2.2.3.

[userquin]

@bfourgeaud @antfu Debugging the vite build process, setting a breakpoint on closeBundle seems to gave a few seconds to vite to finish flushing assets on dist folder and just works. Strange behavior, I think some missing await clause on vite side.

[userquin]

@bfourgeaud @antfu we need to use buildEnd hook on VitePWAPlugin, just adding it before closeBundle:

      async buildEnd(error) {
        if (error) throw error
      },

For example, using this on main.js (instead import('./pwa')):

if (import.meta.env.MODE === 'production' && typeof window !== 'undefined') {
  import('pwa')
}

Without the buildEnd hook:

[vite-plugin-pwa] Couldn't find configuration for either precaching or runtime caching. Please ensure that the various glob options are set to match one or more files, and/or configure the runtimeCaching option.
error during build:
Error: Couldn't find configuration for either precaching or runtime caching. Please ensure that the various glob options are set to match one or more files, and/or configure the runtimeCaching option.
    at module.exports (F:\work\projects\quini\GitHub\founnd-admin\node_modules\workbox-build\build\lib\populate-sw-template.js:41:11)
    at module.exports (F:\work\projects\quini\GitHub\founnd-admin\node_modules\workbox-build\build\lib\write-sw-using-default-template.js:50:25)
    at async generateSW (F:\work\projects\quini\GitHub\founnd-admin\node_modules\workbox-build\build\generate-sw.js:229:21)
    at async Object.closeBundle (F:\work\projects\quini\GitHub\founnd-admin\node_modules\vite-plugin-pwa\dist\index.js:334:13)
    at async Promise.all (index 0)
    at async rollupInternal (F:\work\projects\quini\GitHub\founnd-admin\node_modules\rollup\dist\shared\rollup.js:20661:9)
    at async doBuild (F:\work\projects\quini\GitHub\founnd-admin\node_modules\vite\dist\node\chunks\dep-6b5f3ba8.js:44910:24)
    at async build (F:\work\projects\quini\GitHub\founnd-admin\node_modules\vite\dist\node\chunks\dep-6b5f3ba8.js:44750:16)
    at async CAC.<anonymous> (F:\work\projects\quini\GitHub\founnd-admin\node_modules\vite\dist\node\cli.js:13928:9)
error

with the hook rethrowing the error:

[vite-plugin-pwa] [vite]: Rollup failed to resolve import "pwa" from "src\main.js".
This is most likely unintended because it can break your application at runtime.
If you do want to externalize this module explicitly add it to
`build.rollupOptions.external`
error during build:
Error: [vite]: Rollup failed to resolve import "pwa" from "src\main.js".
This is most likely unintended because it can break your application at runtime.
If you do want to externalize this module explicitly add it to
`build.rollupOptions.external`
    at onRollupWarning (F:\work\projects\quini\GitHub\founnd-admin\node_modules\vite\dist\node\chunks\dep-6b5f3ba8.js:45022:19)
    at Object.onwarn (F:\work\projects\quini\GitHub\founnd-admin\node_modules\vite\dist\node\chunks\dep-6b5f3ba8.js:44812:13)
    at Object.onwarn (F:\work\projects\quini\GitHub\founnd-admin\node_modules\rollup\dist\shared\rollup.js:20218:20)
    at ModuleLoader.handleResolveId (F:\work\projects\quini\GitHub\founnd-admin\node_modules\rollup\dist\shared\rollup.js:19572:26)
    at ModuleLoader.resolveDynamicImport (F:\work\projects\quini\GitHub\founnd-admin\node_modules\rollup\dist\shared\rollup.js:19626:26)
    at async F:\work\projects\quini\GitHub\founnd-admin\node_modules\rollup\dist\shared\rollup.js:19464:32
    at async Promise.all (index 0)
    at async ModuleLoader.fetchDynamicDependencies (F:\work\projects\quini\GitHub\founnd-admin\node_modules\rollup\dist\shared\rollup.js:19463:30)
    at async Promise.all (index 1)
    at async ModuleLoader.fetchModule (F:\work\projects\quini\GitHub\founnd-admin\node_modules\rollup\dist\shared\rollup.js:19500:9)
error

[userquin]

@antfu don't capture the error and then omit the call to injectManifest or generateWS on closeBundle, vite will not throw the error and will generate the bundle without any warning/error (I have tested it and will not work).

[userquin]

@bfourgeaud @antfu I have it working, just removing closeBundle and moving the logic to generateBundle including bundle entries to the additionalManifestEntries for workbox (should also work for injectManifest) similar to static assets handling.

You can see it in action here. Just clone my repo, yarn install, locate node_modules/vite-plugin-pwa/dist/index.js inside the project open it and replace the content with src/vite-plugin-pwa.js content, finally run yarn build && yarn serve.

The fork include vue-router-next, web worker with vite worker plugin, generate sw manifest assets (including robots.txt, there is an issue from vitesse, favicon.svg and sw manifest icons to work offline). VitePWA plugin has been configured using registerType: 'autoUpdate' using @rollup/plugin-replace plugin to allow change sw between builds. The application is using @vueuse/useTimeAgo to show the time from the build date.