Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Vite 6 PWA build doesn't seem to resolve the correct file #19087

Open
7 tasks done
jacquesg opened this issue Dec 27, 2024 · 5 comments
Open
7 tasks done

Vite 6 PWA build doesn't seem to resolve the correct file #19087

jacquesg opened this issue Dec 27, 2024 · 5 comments

Comments

@jacquesg
Copy link

Describe the bug

I've tried to upgrade from v5 to v6, but for some reason, the PWA build seems to not quite do what it did before.

This is the output for v6 in the repro repository

> [email protected] build /Users/jacquesg/github/sw-repro
> tsc && vite build

vite v6.0.6 building for production...
✓ 35 modules transformed.
dist/manifest.webmanifest                          0.47 kB
dist/index.html                                    0.70 kB │ gzip:  0.38 kB
dist/assets/react-CHdo91hT.svg                     4.13 kB │ gzip:  2.05 kB
dist/assets/index-BtyAWewE.css                     1.79 kB │ gzip:  0.86 kB
dist/assets/workbox-window.prod.es5-B9K5rw8f.js    5.72 kB │ gzip:  2.35 kB
dist/assets/index-BY4XzQdA.js                    147.58 kB │ gzip: 47.88 kB
✓ built in 242ms

PWA v0.21.1
Building src/sw.ts service worker ("es" format)...
vite v6.0.6 building for production...
[plugin:vite:resolve] [plugin vite:resolve] Module "util" has been externalized for browser compatibility, imported by "/Users/jacquesg/github/sw-repro/node_modules/.pnpm/[email protected]/node_modules/broadcast-channel/dist/esnode/methods/node.js". See https://vite.dev/guide/troubleshooting.html#module-externalized-for-browser-compatibility for more details.
[plugin:vite:resolve] [plugin vite:resolve] Module "fs" has been externalized for browser compatibility, imported by "/Users/jacquesg/github/sw-repro/node_modules/.pnpm/[email protected]/node_modules/broadcast-channel/dist/esnode/methods/node.js". See https://vite.dev/guide/troubleshooting.html#module-externalized-for-browser-compatibility for more details.
[plugin:vite:resolve] [plugin vite:resolve] Module "crypto" has been externalized for browser compatibility, imported by "/Users/jacquesg/github/sw-repro/node_modules/.pnpm/[email protected]/node_modules/broadcast-channel/dist/esnode/methods/node.js". See https://vite.dev/guide/troubleshooting.html#module-externalized-for-browser-compatibility for more details.
[plugin:vite:resolve] [plugin vite:resolve] Module "os" has been externalized for browser compatibility, imported by "/Users/jacquesg/github/sw-repro/node_modules/.pnpm/[email protected]/node_modules/broadcast-channel/dist/esnode/methods/node.js". See https://vite.dev/guide/troubleshooting.html#module-externalized-for-browser-compatibility for more details.
[plugin:vite:resolve] [plugin vite:resolve] Module "events" has been externalized for browser compatibility, imported by "/Users/jacquesg/github/sw-repro/node_modules/.pnpm/[email protected]/node_modules/broadcast-channel/dist/esnode/methods/node.js". See https://vite.dev/guide/troubleshooting.html#module-externalized-for-browser-compatibility for more details.
[plugin:vite:resolve] [plugin vite:resolve] Module "net" has been externalized for browser compatibility, imported by "/Users/jacquesg/github/sw-repro/node_modules/.pnpm/[email protected]/node_modules/broadcast-channel/dist/esnode/methods/node.js". See https://vite.dev/guide/troubleshooting.html#module-externalized-for-browser-compatibility for more details.
[plugin:vite:resolve] [plugin vite:resolve] Module "path" has been externalized for browser compatibility, imported by "/Users/jacquesg/github/sw-repro/node_modules/.pnpm/[email protected]/node_modules/broadcast-channel/dist/esnode/methods/node.js". See https://vite.dev/guide/troubleshooting.html#module-externalized-for-browser-compatibility for more details.
✓ 70 modules transformed.
dist/sw.mjs  41.99 kB │ gzip: 13.30 kB

For v5:

> [email protected] build /Users/jacquesg/github/sw-repro
> tsc && vite build

vite v5.4.11 building for production...
✓ 39 modules transformed.
dist/manifest.webmanifest                          0.47 kB
dist/index.html                                    0.70 kB │ gzip:  0.38 kB
dist/assets/react-CHdo91hT.svg                     4.13 kB │ gzip:  2.05 kB
dist/assets/index-BtyAWewE.css                     1.79 kB │ gzip:  0.86 kB
dist/assets/workbox-window.prod.es5-B9K5rw8f.js    5.72 kB │ gzip:  2.35 kB
dist/assets/index-B4lB10bN.js                    146.84 kB │ gzip: 47.51 kB
✓ built in 255ms

PWA v0.21.1
Building src/sw.ts service worker ("es" format)...
vite v5.4.11 building for production...
✓ 46 modules transformed.
dist/sw.mjs  10.91 kB │ gzip: 3.91 kB

From what I can tell, vite seems to be picking the node files instead for the browser files, despite the package.json for broadcast-channel having the following. The errors in the console I believe are related due to trying to use the incompatible node files instead of the browser version.

  "name": "broadcast-channel",
  "version": "7.0.0",
  "description": "A BroadcastChannel that works in New Browsers, Old Browsers, WebWorkers, NodeJs, Deno and iframes",
  "exports": {
    ".": {
      "node": {
        "types": "./types/index.d.ts",
        "import": "./dist/esnode/index.js",
        "default": "./dist/es5node/index.js"
      },
      "deno": {
        "types": "./types/index.d.ts",
        "import": "./dist/esbrowser/index.js",
        "default": "./dist/lib/index.js"
      },
      "browser": {
        "types": "./types/index.d.ts",
        "import": "./dist/esbrowser/index.js",
        "default": "./dist/lib/index.es5.js"
      },
      "default": {
        "types": "./types/index.d.ts",
        "default": "./dist/lib/index.es5.js"
      }
    },
    "./package.json": "./package.json"
  },

Reproduction

https://github.com/jacquesg/sw-repro

Steps to reproduce

pnpm i && pnpm build && pnpm preview

Open http://localhost:4173

The error console should show something like the following:

image

System Info

System:
    OS: macOS 15.2
    CPU: (14) arm64 Apple M3 Max
    Memory: 2.55 GB / 36.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 22.8.0 - ~/.nvm/versions/node/v22.8.0/bin/node
    Yarn: 1.22.22 - /opt/homebrew/bin/yarn
    npm: 10.8.2 - ~/.nvm/versions/node/v22.8.0/bin/npm
    pnpm: 9.12.2 - ~/.nvm/versions/node/v22.8.0/bin/pnpm
  Browsers:
    Brave Browser: 131.1.73.104
    Chrome: 131.0.6778.205
    Safari: 18.2
  npmPackages:
    @vitejs/plugin-react: ^4.2.1 => 4.3.4 
    @vitejs/plugin-react-swc: ^3.7.2 => 3.7.2 
    vite: ^6.0.6 => 6.0.6

Used Package Manager

pnpm

Logs

No response

Validations

@userquin
Copy link
Contributor

I need to add resolve.conditions when using Vite 6, in the meantime you can use this in the pwa options:

    integration: {
      configureCustomSWViteBuild: inlineConfig => {
        inlineConfig.resolve ??= {}
        inlineConfig.resolve.conditions = ['browser', 'module']
      },
    },

@jacquesg
Copy link
Author

I need to add resolve.conditions when using Vite 6, in the meantime you can use this in the pwa options:

    integration: {
      configureCustomSWViteBuild: inlineConfig => {
        inlineConfig.resolve ??= {}
        inlineConfig.resolve.conditions = ['browser', 'module']
      },
    },

Thank you, that solved that problem for me. Didn't realise that this was needed. I have another module, pino, which also seems to be misbehaving somewhat, even with the above.

This package is slightly different, in that it has the browser key at the top-level of package.json, not inside exports:

{
  "name": "pino",
  "version": "9.6.0",
  "description": "super fast, all natural json logger",
  "main": "pino.js",
  "type": "commonjs",
  "types": "pino.d.ts",
  "browser": "./browser.js",

I'm not sure if this is a bug in the package itself, or if this should also just work?

Log:

PWA v0.21.1
Building src/service-worker.ts service worker ("es" format)...
vite v6.0.6 building for production...
[plugin:vite:resolve] [plugin vite:resolve] Module "node:os" has been externalized for browser compatibility, imported by "/Users/jacquesg/dev/projects/asterias/antaeus/node_modules/pino/pino.js". See https://vite.dev/guide/troubleshooting.html#module-externalized-for-browser-compatibility for more details.
[plugin:vite:resolve] [plugin vite:resolve] Module "node:events" has been externalized for browser compatibility, imported by "/Users/jacquesg/dev/projects/asterias/antaeus/node_modules/pino/lib/proto.js". See https://vite.dev/guide/troubleshooting.html#module-externalized-for-browser-compatibility for more details.
[plugin:vite:resolve] [plugin vite:resolve] Module "module" has been externalized for browser compatibility, imported by "/Users/jacquesg/dev/projects/asterias/antaeus/node_modules/pino/lib/transport.js". See https://vite.dev/guide/troubleshooting.html#module-externalized-for-browser-compatibility for more details.
[plugin:vite:resolve] [plugin vite:resolve] Module "node:path" has been externalized for browser compatibility, imported by "/Users/jacquesg/dev/projects/asterias/antaeus/node_modules/pino/lib/transport.js". See https://vite.dev/guide/troubleshooting.html#module-externalized-for-browser-compatibility for more details.
[plugin:vite:resolve] [plugin vite:resolve] Module "worker_threads" has been externalized for browser compatibility, imported by "/Users/jacquesg/dev/projects/asterias/antaeus/node_modules/pino/lib/tools.js". See https://vite.dev/guide/troubleshooting.html#module-externalized-for-browser-compatibility for more details.
[plugin:vite:resolve] [plugin vite:resolve] Module "fs" has been externalized for browser compatibility, imported by "/Users/jacquesg/dev/projects/asterias/antaeus/node_modules/sonic-boom/index.js". See https://vite.dev/guide/troubleshooting.html#module-externalized-for-browser-compatibility for more details.
[plugin:vite:resolve] [plugin vite:resolve] Module "path" has been externalized for browser compatibility, imported by "/Users/jacquesg/dev/projects/asterias/antaeus/node_modules/sonic-boom/index.js". See https://vite.dev/guide/troubleshooting.html#module-externalized-for-browser-compatibility for more details.
[plugin:vite:resolve] [plugin vite:resolve] Module "worker_threads" has been externalized for browser compatibility, imported by "/Users/jacquesg/dev/projects/asterias/antaeus/node_modules/thread-stream/index.js". See https://vite.dev/guide/troubleshooting.html#module-externalized-for-browser-compatibility for more details.
[plugin:vite:resolve] [plugin vite:resolve] Module "path" has been externalized for browser compatibility, imported by "/Users/jacquesg/dev/projects/asterias/antaeus/node_modules/thread-stream/index.js". See https://vite.dev/guide/troubleshooting.html#module-externalized-for-browser-compatibility for more details.
✓ 395 modules transformed.
dist/service-worker.mjs  295.61 kB │ gzip: 94.41 kB │ map: 1,181.95 kB
✓ built in 965ms

@userquin
Copy link
Contributor

userquin commented Dec 27, 2024

try using:

    integration: {
      configureCustomSWViteBuild: inlineConfig => {
        inlineConfig.resolve ??= {}
        inlineConfig.resolve.alias ??= {}
        inlineConfig.resolve.alias['pino'] = './node_modules/pino/browser.js'
        inlineConfig.resolve.conditions = ['browser', 'module']
      },
    },

@jacquesg
Copy link
Author

try using:

    integration: {
      configureCustomSWViteBuild: inlineConfig => {
        inlineConfig.resolve ??= {}
        inlineConfig.resolve.alias ??= {}
        inlineConfig.resolve.alias['pino'] = './node_modules/pino/browser.js'
        inlineConfig.resolve.conditions = ['browser', 'module']
      },
    },

Yep, I'm aware I can manually force it to use the file. Should this not work out of the box?

@userquin
Copy link
Contributor

The custom sw build done via Vite build, maybe I need to configure a few more things when configuring the options for the build call, still not checked the required fields (for example, latest pwa plugin version not using enviroments entry at all and this may be wrong): https://github.com/vite-pwa/vite-plugin-pwa/blob/main/src/vite-build.ts

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

2 participants