search

vite-pwa / vite-plugin-pwa

Zero-config PWA for Vite
https://vite-pwa-org.netlify.app/
MIT License
3.16k stars 206 forks source link

First build fails when the plugin is enabled for Vue 3.0 #39

Closed WintonLi closed 3 years ago

WintonLi commented 3 years ago

Problem: When building a Vue 3.0 project that hasn't been built before, the plugin raises errors e.g. (the actual error depends on the configuration):

[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.

I am not very sure if this only happens to my project because I am very new to Vue and Vite.

Environment: Windows 10

Dependencies: 

    "@iconify/iconify": "^2.0.0-rc.6",
    "@vueuse/core": "^4.6.2",
    "@zxcvbn-ts/core": "^0.3.0",
    "ant-design-vue": "^2.1.2",
    "apexcharts": "^3.26.0",
    "axios": "^0.21.1",
    "crypto-js": "^4.0.0",
    "echarts": "^5.0.2",
    "lodash-es": "^4.17.21",
    "mockjs": "^1.1.0",
    "nprogress": "^0.2.0",
    "path-to-regexp": "^6.2.0",
    "print-js": "^1.6.0",
    "pwa-asset-generator": "^4.1.1",
    "qrcode": "^1.4.4",
    "sortablejs": "^1.13.0",
    "vditor": "^3.8.4",
    "vue": "3.0.7",
    "vue-echarts": "^6.0.0-rc.4",
    "vue-i18n": "^9.0.0",
    "vue-router": "^4.0.5",
    "vue-types": "^3.0.2",
    "vuex": "^4.0.0",
    "vuex-module-decorators": "^1.0.1",
    "xlsx": "^0.16.9"

Build script:

vite build && esno ./build/script/postBuild.ts

How to repeat: Clone a project that has been successfully built before to a new machine, run yarn install to install dependencies, and run the above build command produces the errors.

Workaround Disable the plugin (unimporting it) temporarily from the app and run the first build. After that, the plugin causes no trouble anymore in building.

userquin commented 3 years ago

@WintonLi can you show dev dependencies? Since 0.6.4 (fixing #33) there was some changes (including workbox dependencies that fails on your build) that can be solved updating pwa plugin dependency. Try to just remove it and reinstalling (yarn remove vite-plugin-pwa + yarn add -D vite-plugin-pwa).

On the original project just check plugin version with yarn list vite-plugin-pwa: it should be 0.6.4. If you have an older version, you need to upgrade before installing on new machine.

You can see vitesse template, we have never had that problem there, of course, we need to update the dependency before building the project...

WintonLi commented 3 years ago

@userquin Thanks for the reply. The version is indeed 0.6.4:

  "devDependencies": {
    "@commitlint/cli": "^12.0.1",
    "@commitlint/config-conventional": "^12.0.1",
    "@iconify/json": "^1.1.322",
    "@purge-icons/generated": "^0.7.0",
    "@types/crypto-js": "^4.0.1",
    "@types/fs-extra": "^9.0.9",
    "@types/inquirer": "^7.3.1",
    "@types/lodash-es": "^4.17.4",
    "@types/mockjs": "^1.0.3",
    "@types/nprogress": "^0.2.0",
    "@types/qrcode": "^1.4.0",
    "@types/qs": "^6.9.6",
    "@types/rollup-plugin-visualizer": "^2.6.0",
    "@types/sortablejs": "^1.10.6",
    "@typescript-eslint/eslint-plugin": "^4.19.0",
    "@typescript-eslint/parser": "^4.19.0",
    "@vitejs/plugin-legacy": "^1.3.2",
    "@vitejs/plugin-vue": "^1.2.0",
    "@vitejs/plugin-vue-jsx": "^1.1.2",
    "@vue/compiler-sfc": "3.0.7",
    "autoprefixer": "^10.2.5",
    "body-parser": "^1.19.0",
    "commitizen": "^4.2.3",
    "conventional-changelog-cli": "^2.1.1",
    "cross-env": "^7.0.3",
    "dotenv": "^8.2.0",
    "eslint": "^7.23.0",
    "eslint-config-prettier": "^8.1.0",
    "eslint-define-config": "^1.0.4",
    "eslint-plugin-prettier": "^3.3.1",
    "eslint-plugin-vue": "^7.8.0",
    "esno": "^0.5.0",
    "fs-extra": "^9.1.0",
    "http-server": "^0.12.3",
    "husky": "^5.2.0",
    "inquirer": "^8.0.0",
    "is-ci": "^3.0.0",
    "less": "^4.1.1",
    "lint-staged": "^10.5.4",
    "postcss": "^8.2.8",
    "prettier": "^2.2.1",
    "pretty-quick": "^3.1.0",
    "rimraf": "^3.0.2",
    "rollup-plugin-visualizer": "4.2.2",
    "stylelint": "^13.12.0",
    "stylelint-config-prettier": "^8.0.2",
    "stylelint-config-standard": "^21.0.0",
    "stylelint-order": "^4.1.0",
    "ts-node": "^9.1.1",
    "typescript": "4.2.3",
    "vite": "2.1.3",
    "vite-plugin-compression": "^0.2.3",
    "vite-plugin-html": "^2.0.3",
    "vite-plugin-imagemin": "^0.2.9",
    "vite-plugin-mock": "^2.4.0",
    "vite-plugin-purge-icons": "^0.7.0",
    "vite-plugin-pwa": "^0.6.4",
    "vite-plugin-style-import": "^0.9.1",
    "vite-plugin-svg-icons": "^0.4.0",
    "vite-plugin-theme": "^0.5.0",
    "vite-plugin-windicss": "0.10.4",
    "vue-eslint-parser": "^7.6.0"
  }
userquin commented 3 years ago

@WintonLi can you show the VitePWA configuration you have on vite.config.ts or vite.config.js file?

WintonLi commented 3 years ago

@userquin The following is the relevant code in the vite.config.ts:

...
import { createVitePlugins } from './build/vite/plugin';
...
export default ({ command, mode }: ConfigEnv): UserConfig => {
  const root = process.cwd();

  const env = loadEnv(mode, root);

  // The boolean type read by loadEnv is a string. This function can be converted to boolean type
  const viteEnv = wrapperEnv(env);

  const { VITE_PORT, VITE_PUBLIC_PATH, VITE_PROXY, VITE_DROP_CONSOLE } = viteEnv;

  const isBuild = command === 'build';

  return {
    base: VITE_PUBLIC_PATH,
    root,
    resolve: {
      alias: createAlias([
        // /@/xxxx => src/xxxx
        ['/@/', 'src'],
        // /#/xxxx => types/xxxx
        ['/#/', 'types'],
      ]),
    },
...
    // The vite plugin used by the project. The quantity is large, so it is separately extracted and managed
    plugins: createVitePlugins(viteEnv, isBuild),
    optimizeDeps: {...},
    ...
    },
  };
};

and the createVitePlugins() is defined as:

...
import { VitePWA } from 'vite-plugin-pwa';
import * as manifestConfig from '../../../src/manifest-auto.json';

export function createVitePlugins(viteEnv: ViteEnv, isBuild: boolean) {
  const { VITE_USE_IMAGEMIN, VITE_USE_MOCK, VITE_LEGACY, VITE_BUILD_COMPRESS } = viteEnv;

  const vitePlugins: (Plugin | Plugin[])[] = [
    // have to
    vue(),
    // have to
    vueJsx(),
  ];
  ...
  vitePlugins.push(
    VitePWA({
      injectRegister: 'script',
      manifest: manifestConfig,
    })
  );
  ...
  return vitePlugins;
}

I tried different PWA configurations: Attempt 1:

 VitePWA({
      manifest: manifestConfig,
    })

Attempt 2:

 VitePWA()

Attempt 3:

    VitePWA({
      injectRegister: False,
      manifest: manifestConfig,
    })

and more. None of them were successful. I ended up commenting out all the relevant PWA codes and ran the build. After that, uncommenting the codes and built again, and that time the build was successful.

userquin commented 3 years ago

@WintonLi can you elaborate a minimal repo so we can test it?

WintonLi commented 3 years ago

@userquin Strangely I couldn't reproduce the problem. I clone the problematic project, following the same procedure I used before, and the project built successfully. I have no clue what happened.

Anyway thanks for the attention. I will close the issue now, and update if I have anything new.

xieyezi commented 3 years ago

@WintonLi I have encountered a similar problem. devDependencies:

 "@better-scroll/core": "^2.3.1",
    "@commitlint/cli": "^12.1.4",
    "@commitlint/config-angular": "^12.1.4",
    "@types/axios": "^0.14.0",
    "@types/node": "^15.6.0",
    "@vitejs/plugin-vue": "^1.2.2",
    "@vue/compiler-sfc": "^3.0.5",
    "@vueuse/core": "^4.11.0",
    "autoprefixer": "^10.2.5",
    "axios": "^0.21.1",
    "commitizen": "^4.2.3",
    "commitlint-config-cz": "^0.13.2",
    "cz-customizable": "^6.3.0",
    "eslint": "^7.27.0",
    "eslint-plugin-prettier": "^3.4.0",
    "husky": "^6.0.0",
    "lint-staged": "^10.5.3",
    "postcss": "^8.3.0",
    "prettier": "^2.2.1",
    "tailwindcss": "^2.1.2",
    "typescript": "^4.1.3",
    "vite": "^2.3.3",
    "vite-plugin-pwa": "^0.7.3",
    "vite-plugin-style-import": "^0.10.0",
    "vue-tsc": "^0.0.24",
    "xieyezi-storage": "^1.0.4"

And vite.config.ts:

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import styleImport from 'vite-plugin-style-import';
import { resolve } from 'path'
import { VitePWA } from 'vite-plugin-pwa'

// https://vitejs.dev/config/
export default defineConfig({
  resolve: {
    alias: {
      "@src": resolve(__dirname, "./src"),
      "@assets": resolve(__dirname, "./src/assets"),
      "@components": resolve(__dirname, "./src/components"),
      "@uitl": resolve(__dirname, "./src/uitl")
    }
  },
  plugins: [
    vue(),
    styleImport({
      libs: [
        {
          libraryName: 'vant',
          esModule: true,
          resolveStyle: (name) => `vant/es/${name}/style`,
        },
      ],
    }),
    VitePWA({
      outDir: '.vue3-shopping-airi/dist',
      manifest: {
        name: 'Vue3-AiRi',
        short_name: 'AiRi',
        theme_color: '#ffffff',
        icons: [
          {
            src: '/pwa-192x192.png',
            sizes: '192x192',
            type: 'image/png',
          },
          {
            src: '/pwa-512x512.png',
            sizes: '512x512',
            type: 'image/png',
          },
        ],
      },
    }),
  ],
  server: {
    proxy: {
      '/api': {
        target: 'http://xieyezi.com:9003/mock/11/airi',
        changeOrigin: true,
        rewrite: (path: string) => path.replace(/^\/api/, '')
      }
    }
  }
})

When I run yarn build ,I get this: 

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.

So How can resolve this?