Vite trying to bundle node methods instead of webCrypto

[bruceharrison1984]

This is probably a long shot, but I'm trying to use Vite and Wrangler to deploy a CF Worker. Everything works fine locally, Vite builds successfully, but when wrangler attempts to deploy it fails due to Node dependencies being pulled in.

X [ERROR] _worker.js is not being bundled by Wrangler but it is importing from another file.
This will throw an error if deployed.
You should bundle the Worker in a pre-build step, remove the import if it is unused, or ask Wrangler to bundle it by setting `--bundle`. [plugin block-worker-js-imports]

    dist/_worker.js:26:26:
      26 │ import * as crypto$1 from "crypto";
         ╵                           ~~~~~~~~

  This error came from the "onResolve" callback registered here:

    node_modules/wrangler/wrangler-dist/cli.js:140553:11:
      140553 │     build5.onResolve({ filter: /.*/g }, (args) => {


---

    dist/_worker.js:28:34:
      28 │ import { Buffer as Buffer2 } from "buffer";
         ╵                                   ~~~~~~~~

  This error came from the "onResolve" callback registered here:

    node_modules/wrangler/wrangler-dist/cli.js:140553:11:
      140553 │     build5.onResolve({ filter: /.*/g }, (args) => {

Removing the call-chain to all things jose allows the build to proceed as expected, though without the encryption I need. A simple test directly using webCrypto also deploys correctly, so I think something weird is happening when Vite compiles.

Is there any mechanism I can use to ensure the correct runtime is used?

[bruceharrison1984]

As is tradition, as soon as I posted this I found my answer. Vite seems to fumble on selecting the correct entry point, so it ends up using something other than browser.

vitejs/vite#2329

Forcibly telling Vite to use the browser version only when deploying via alias looks something like this:

import { defineConfig } from 'vite';
import sonik from 'sonik/vite';
import pages from '@sonikjs/cloudflare-pages';
import { fileURLToPath, URL } from 'url';

export default defineConfig(({command}) => ({ 
  plugins: [sonik(), pages()],
  resolve: {
    alias: [
      {
        find: '@',
        replacement: fileURLToPath(new URL('./app', import.meta.url)),
      },
      ...(command === 'build' ? [{
        find: 'jose',
        replacement: fileURLToPath(
          new URL('./node_modules/jose/dist/browser/index.js', import.meta.url)
        ),
      }] : [])
    ],
  },
  build: {
    emptyOutDir: false,
  },
  server: {
    cors: true,
    host: 'localhost',
    port: 3000,
  },
}));

Once I set that up, everything deployed as expected.

[panva]

I was about to suggest to figure out what target keyword would vite / wrangler prefer and could make that addition...

jose/package.json

Lines 77 to 86 in 60db9ad

	"exports": {
	".": {
	"types": "./dist/types/index.d.ts",
	"bun": "./dist/browser/index.js",
	"deno": "./dist/browser/index.js",
	"browser": "./dist/browser/index.js",
	"worker": "./dist/browser/index.js",
	"import": "./dist/node/esm/index.js",
	"require": "./dist/node/cjs/index.js"
	},