Module "crypto" has been externalized for browser compatibility

[isaachinman]

Hello, I am setting up @powersync/web in a Vite application. I have followed the setup instructions closely.

Here is my vite.config.ts:

import pandaPostcss from '@pandacss/dev/postcss'
import { TanStackRouterVite } from '@tanstack/router-plugin/vite'
import react from '@vitejs/plugin-react'
import { Plugin } from 'postcss'
import { defineConfig } from 'vite'
import topLevelAwait from 'vite-plugin-top-level-await'
import wasm from 'vite-plugin-wasm'

export default defineConfig({
  css: {
    postcss: {
      plugins: [
        pandaPostcss() as Plugin,
      ],
    },
  },
  optimizeDeps: {
    exclude: ['@journeyapps/wa-sqlite', '@powersync/web'],
    include: ['@powersync/web > js-logger'],
  },
  plugins: [
    TanStackRouterVite({
      quoteStyle: 'single',
      semicolons: false,
    }),
    react(),
    wasm(),
    topLevelAwait(),
  ],
  resolve: {
    alias: {
      '@my-app': '/src',
    },
  },
  worker: {
    format: 'es',
    plugins: () => [
      wasm(),
      topLevelAwait(),
    ],
  },
})

I see this output on every vite build:

[plugin:vite:resolve] [plugin vite:resolve] Module "crypto" has been externalized for browser compatibility, imported by "/my-app/node_modules/bson/lib/bson.mjs". See https://vite.dev/guide/troubleshooting.html#module-externalized-for-browser-compatibility for more details.

I am on @powersync/web v1.12.0. The docs say:

Note: As of @powersync/web@1.4.0, polyfills are bundled in the SDK and are no longer required.

However, this error seems to be related to an unpolyfilled crypto call in bson.

[guillempuche]

In @powersync/web@1.9.0, it works with your configuration 🙃.

[rudetrue]

I was getting this error, and about to downgrade to 1.9.0, but I realized I didn't have my vite.config.ts configured like yours with vite-plugin-top-level-await and vite-plugin-wasm.

So I installed those packages, and added the missing pieces from https://github.com/powersync-ja/powersync-js/blob/main/demos/example-vite/vite.config.ts, and it fixed this error. The problem manifested as a rollup error too (which is also fixed):

[commonjs--resolver] Invalid value "iife" for option "worker.format" - UMD and IIFE output formats are not supported for code-splitting builds.