search

vite-pwa / vite-plugin-pwa

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

Upgrade to v0.21.0 doesn't seem to work with Vite #785

Closed jacquesg closed 1 week ago

jacquesg commented 1 week ago

I've updated to 0.21.0, but there seems to be an interaction with vite/babel:

PWA v0.21.0                                                                                                                                                                  14:08:16 [20/49083]
Building src/service-worker.ts service worker ("es" format)...                                                                                                                                  
vite v5.4.11 building for production...                                                                                                                                                         
/Users/jacquesg/dev/projects/asterias/antaeus/node_modules/@babel/helper-create-class-features-plugin/lib/fields.js:125                                                                         
  const nestedVisitor = _traverse.visitors.environmentVisitor(Object.assign({}, visitor));                                                                                                      
                                           ^                                                                                                                                                    

TypeError: _traverse.visitors.environmentVisitor is not a function                                                                                                                              
    at privateNameVisitorFactory (/Users/jacquesg/dev/projects/asterias/antaeus/node_modules/@babel/helper-create-class-features-plugin/lib/fields.js:125:44)                                   
    at Object.<anonymous> (/Users/jacquesg/dev/projects/asterias/antaeus/node_modules/@babel/helper-create-class-features-plugin/lib/fields.js:156:28)                                          
    at Module._compile (node:internal/modules/cjs/loader:1546:14)                                                                                                                               
    at Module._extensions..js (node:internal/modules/cjs/loader:1691:10)                                                                                                                        
    at Module.load (node:internal/modules/cjs/loader:1317:32)                                                                                                                                   
    at Module._load (node:internal/modules/cjs/loader:1127:12)                                                                                                                                  
    at TracingChannel.traceSync (node:diagnostics_channel:315:14)                                                                                                                               
    at wrapModuleLoad (node:internal/modules/cjs/loader:217:24)                                                                                                                                 
    at Module.require (node:internal/modules/cjs/loader:1339:12)
    at require (node:internal/modules/helpers:135:16)
    at Object.<anonymous> (/Users/jacquesg/dev/projects/asterias/antaeus/node_modules/@babel/helper-create-class-features-plugin/lib/decorators.js:10:15)
    at Module._compile (node:internal/modules/cjs/loader:1546:14)
    at Module._extensions..js (node:internal/modules/cjs/loader:1691:10)
    at Module.load (node:internal/modules/cjs/loader:1317:32)
    at Module._load (node:internal/modules/cjs/loader:1127:12)
    at TracingChannel.traceSync (node:diagnostics_channel:315:14)
    at wrapModuleLoad (node:internal/modules/cjs/loader:217:24)
    at Module.require (node:internal/modules/cjs/loader:1339:12)
    at require (node:internal/modules/helpers:135:16)
    at Object.<anonymous> (/Users/jacquesg/dev/projects/asterias/antaeus/node_modules/@babel/helper-create-class-features-plugin/lib/index.js:32:19)
    at Module._compile (node:internal/modules/cjs/loader:1546:14)
    at Module._extensions..js (node:internal/modules/cjs/loader:1691:10)
    at Module.load (node:internal/modules/cjs/loader:1317:32)
    at Module._load (node:internal/modules/cjs/loader:1127:12)
    at TracingChannel.traceSync (node:diagnostics_channel:315:14)
    at wrapModuleLoad (node:internal/modules/cjs/loader:217:24)
    at Module.require (node:internal/modules/cjs/loader:1339:12)
    at require (node:internal/modules/helpers:135:16)
    at Object.<anonymous> (/Users/jacquesg/dev/projects/asterias/antaeus/node_modules/@babel/plugin-transform-class-properties/lib/index.js:8:40)
    at Module._compile (node:internal/modules/cjs/loader:1546:14)
    at Module._extensions..js (node:internal/modules/cjs/loader:1691:10)
    at Module.load (node:internal/modules/cjs/loader:1317:32)
    at Module._load (node:internal/modules/cjs/loader:1127:12)
    at TracingChannel.traceSync (node:diagnostics_channel:315:14)
    at wrapModuleLoad (node:internal/modules/cjs/loader:217:24)
    at Module.require (node:internal/modules/cjs/loader:1339:12)
    at require (node:internal/modules/helpers:135:16)
    at Object.<anonymous> (/Users/jacquesg/dev/projects/asterias/antaeus/node_modules/@babel/preset-env/lib/available-plugins.js:10:39)
userquin commented 1 week ago

did you update workbox dependencies to 7.3.0? can you provide a minimal reproduction?

imagen

jacquesg commented 1 week ago

Yes, both were updated to 7.3.0

jacquesg commented 1 week ago

My config looks something like the following, which may help:

  const pwaOptions: Partial<VitePWAOptions> = {
    manifest: {
      id: '/',
      scope: '/',
      theme_color: '#000000',
      icons: [
        {
          src: 'pwa-64x64.png',
          sizes: '64x64',
          type: 'image/png',
        },
        {
          src: 'pwa-192x192.png',
          sizes: '192x192',
          type: 'image/png',
        },
        {
          src: 'pwa-512x512.png',
          sizes: '512x512',
          type: 'image/png',
          purpose: 'any',
        },
        {
          src: 'maskable-icon-512x512.png',
          sizes: '512x512',
          type: 'image/png',
          purpose: 'maskable',
        },
      ],
    },
    registerType: 'prompt',
    devOptions: {
      enabled: true,
      type: 'module',
    },
    base: '/',
    scope: '/',
    srcDir: 'src',
    filename: 'service-worker.ts',
    strategies: 'injectManifest',
    injectManifest: {
      maximumFileSizeToCacheInBytes: 5120000,
      injectionPoint: undefined,
    },
    pwaAssets: {
      config: true,
      overrideManifestIcons: true,
    },
  };
userquin commented 1 week ago

I guess it is not related to pwa plugin, can you try disabling the pwa and run the build command, the build pwa internal plugin will re-throw any error in the build, there is no trace in your stacktrace about pwa plugin, looks like the client build is falling.

Can you share your vite config file?

userquin commented 1 week ago

I've tested with all frameworks lib (test script here, old Vite version), so maybe we need a custom tsconfig.json for the service worker, but it is weird that running with previous pwa plugin version works. We've changed only workbox versions removing old rollup from dependencies (moved to pnpm.overrides)

jacquesg commented 1 week ago

The application build works fine, it errors when the PWA is built.

jacquesg commented 1 week ago

Here is a more complete log:

(!) Some chunks are larger than 2000 kB after minification. Consider:
- Using dynamic import() to code-split the application
- Use build.rollupOptions.output.manualChunks to improve chunking: https://rollupjs.org/configuration-options/#output-manualchunks
- Adjust chunk size limit for this warning via build.chunkSizeWarningLimit.
[vite-plugin-static-copy] Copied 273 items.
✓ built in 32.72s

PWA v0.21.0
Building src/service-worker.ts service worker ("es" format)...
vite v5.4.11 building for production...
/Users/jacquesg/dev/projects/asterias/antaeus/node_modules/@babel/helper-create-class-features-plugin/lib/fields.js:125
  const nestedVisitor = _traverse.visitors.environmentVisitor(Object.assign({}, visitor));
                                           ^

TypeError: _traverse.visitors.environmentVisitor is not a function
    at privateNameVisitorFactory (/Users/jacquesg/dev/projects/asterias/antaeus/node_modules/@babel/helper-create-class-features-plugin/lib/fields.js:125:44)
    at Object.<anonymous> (/Users/jacquesg/dev/projects/asterias/antaeus/node_modules/@babel/helper-create-class-features-plugin/lib/fields.js:156:28)
    at Module._compile (node:internal/modules/cjs/loader:1546:14)
    at Module._extensions..js (node:internal/modules/cjs/loader:1691:10)
    at Module.load (node:internal/modules/cjs/loader:1317:32)
    at Module._load (node:internal/modules/cjs/loader:1127:12)
    at TracingChannel.traceSync (node:diagnostics_channel:315:14)
    at wrapModuleLoad (node:internal/modules/cjs/loader:217:24)
    at Module.require (node:internal/modules/cjs/loader:1339:12)
    at require (node:internal/modules/helpers:135:16)
    at Object.<anonymous> (/Users/jacquesg/dev/projects/asterias/antaeus/node_modules/@babel/helper-create-class-features-plugin/lib/decorators.js:10:15)
    at Module._compile (node:internal/modules/cjs/loader:1546:14)
    at Module._extensions..js (node:internal/modules/cjs/loader:1691:10)
    at Module.load (node:internal/modules/cjs/loader:1317:32)
    at Module._load (node:internal/modules/cjs/loader:1127:12)
    at TracingChannel.traceSync (node:diagnostics_channel:315:14)
    at wrapModuleLoad (node:internal/modules/cjs/loader:217:24)
    at Module.require (node:internal/modules/cjs/loader:1339:12)
    at require (node:internal/modules/helpers:135:16)
    at Object.<anonymous> (/Users/jacquesg/dev/projects/asterias/antaeus/node_modules/@babel/helper-create-class-features-plugin/lib/index.js:32:19)
    at Module._compile (node:internal/modules/cjs/loader:1546:14)
    at Module._extensions..js (node:internal/modules/cjs/loader:1691:10)
    at Module.load (node:internal/modules/cjs/loader:1317:32)
    at Module._load (node:internal/modules/cjs/loader:1127:12)
    at TracingChannel.traceSync (node:diagnostics_channel:315:14)
    at wrapModuleLoad (node:internal/modules/cjs/loader:217:24)
    at Module.require (node:internal/modules/cjs/loader:1339:12)
    at require (node:internal/modules/helpers:135:16)
    at Object.<anonymous> (/Users/jacquesg/dev/projects/asterias/antaeus/node_modules/@babel/plugin-transform-class-properties/lib/index.js:8:40)
    at Module._compile (node:internal/modules/cjs/loader:1546:14)
    at Module._extensions..js (node:internal/modules/cjs/loader:1691:10)
    at Module.load (node:internal/modules/cjs/loader:1317:32)
    at Module._load (node:internal/modules/cjs/loader:1127:12)
    at TracingChannel.traceSync (node:diagnostics_channel:315:14)
    at wrapModuleLoad (node:internal/modules/cjs/loader:217:24)
    at Module.require (node:internal/modules/cjs/loader:1339:12)
    at require (node:internal/modules/helpers:135:16)
    at Object.<anonymous> (/Users/jacquesg/dev/projects/asterias/antaeus/node_modules/@babel/preset-env/lib/available-plugins.js:10:39)
    at Module._compile (node:internal/modules/cjs/loader:1546:14)
    at Module._extensions..js (node:internal/modules/cjs/loader:1691:10)
    at Module.load (node:internal/modules/cjs/loader:1317:32)
    at Module._load (node:internal/modules/cjs/loader:1127:12)
    at TracingChannel.traceSync (node:diagnostics_channel:315:14)
    at wrapModuleLoad (node:internal/modules/cjs/loader:217:24)
    at Module.require (node:internal/modules/cjs/loader:1339:12)
    at require (node:internal/modules/helpers:135:16)
    at Object.<anonymous> (/Users/jacquesg/dev/projects/asterias/antaeus/node_modules/@babel/preset-env/lib/filter-items.js:10:25)
    at Module._compile (node:internal/modules/cjs/loader:1546:14)
    at Module._extensions..js (node:internal/modules/cjs/loader:1691:10)
    at Module.load (node:internal/modules/cjs/loader:1317:32)

Node.js v22.8.0
 ELIFECYCLE  Command failed with exit code 1.
jacquesg commented 1 week ago

I've reduced this to not passing any config to the PWA plugin, and also removing all code from the service worker, same result.

userquin commented 1 week ago

So the problem when Vite building the sw? We use a custom Vite build, what was previous pwa plugin version?

What's your tsconfig.json file? maybe you can move the service worker to its own folder with a custom tsconfig.json file.

jacquesg commented 1 week ago

Yep, currently on 0.20.5. The only things I changed was to upgrade to 0.21 and updating the workbox modules to 7.3.0.

tsconfig.json:

{
  "$schema": "http://json.schemastore.org/tsconfig",
  "compilerOptions": {
    "baseUrl": "./src",
    "target": "ESNext",
    "useDefineForClassFields": true,
    "lib": ["DOM", "DOM.Iterable", "ESNext"],
    "incremental": false,
    "allowJs": true,
    "checkJs": false,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "module": "ESNext",
    "moduleResolution": "Node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx",
    "types": ["node", "unplugin-icons/types/react"],
    "paths": {
      "*": ["./@types/*"]
    }
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.tsx",
    "src/**/*.mts",
    "src/**/*.cts",
    ".storybook/*.ts",
    ".storybook/*.tsx",
    "vite*.ts",
    "serve*.ts",
    "orval*.ts",
    "codegen.ts",
    "pwa-assets.config.ts",
    "openapi*.cts"
  ]
}
userquin commented 1 week ago

any chance to share the repo?

jacquesg commented 1 week ago

Unfortunately not, its pretty much our full platform which is proprietary, but more than happy to try things and feedback.

Tried everything that I could think of to bisect and pin-point, but so far, no luck :)

userquin commented 1 week ago

what plugins do you have in your vite config file?

jacquesg commented 1 week ago

A couple, I've tried removing them all pretty much, but haven't had any luck with that either:

    plugins: [
      ...(mode === 'test' ? [topLevelAwait()] : []),
      viteStaticCopy({
        targets: [
          {
            src: 'node_modules/flag-icons/flags/4x3/*.svg',
            dest: 'flags/4x3',
          },
          {
            src: 'node_modules/@asteriidae/rosetta/dist/locales/en/*.json',
            dest: 'locales/en',
          },
          {
            src: 'node_modules/@syncfusion/ej2-pdfviewer/dist/ej2-pdfviewer-lib/*',
            dest: 'ej2-pdfviewer-lib',
          },
        ],
      }),
      tsconfigPaths(),
      routesPlugin(),
      i18NextPlugin(),
      nodePolyfills({
        globals: {
          Buffer: false, // can also be 'build', 'dev', or false
          global: true,
          process: true,
        },
      }),
      react({ tsDecorators: true }),
      svgr(),
      generouted(),
      importMetaEnv.vite({ example: '.env.example' }),
      VitePWA(pwaOptions),
      Icons({ compiler: 'jsx', jsx: 'react', scale: 1 }),
      analyze({ summaryOnly: true, limit: 100 }) as unknown as PluginOption,
      visualizer({
        sourcemap: true,
      }) as unknown as PluginOption,
    ],
userquin commented 1 week ago

Try creating a service-worker folder moving your service-worker.ts inside it, adding a custom tsconfig.json in the folder, then change the pwa options to use service-worker in srcDir. (don't include the folder inside the src folder it should be at root: I guess the problem is with react plugin => tsDecorators)

If you're using import.meta, you can add the types in the tsconfig or add a reference in your sw: 

/// <reference types="vite/client" />
/// <reference lib="webworker" />

// src/service.worker/tsconfig.json
{
  "compilerOptions": {
    "target": "ES2020",
    "useDefineForClassFields": true,
    "lib": ["ESNext", "WebWorker", "DOM.Iterable"],
    "module": "ESNext",
    "skipLibCheck": true,
    "types": ["vite/client"],

    /* Bundler mode */
    "moduleResolution": "bundler",
    "allowImportingTsExtensions": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,

    /* Linting */
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noFallthroughCasesInSwitch": true
  },
  "include": ["."],
  "exclude": []
}
jacquesg commented 1 week ago

Ok. That didn't help either, but I seem to have figured out what is going on.

It seems like pnpm has screwed this up somehow. What I've done is to remove my pnpm-lock.yaml file, ran pnpm i, and manually rolled back the packages I didn't want to update, which has fixed this.

There is/was some weird interaction between rollup and babel as far as I can tell.

Really appreciate your help and suggestions. Clearly, this isn't a bug with vite-plugin-pwa.