fix: Revert Web Vite Config Breaking changes (#776)

stevensJourney · web-flow · commit 507197f8e6c5 · 2025-11-20T16:40:12.000+02:00
diff --git a/.changeset/lovely-birds-kick.md b/.changeset/lovely-birds-kick.md
@@ -0,0 +1,7 @@
+---
+'@powersync/common': minor
+'@powersync/react-native': minor
+'@powersync/web': minor
+---
+
+Revert `event-iterator` externalization in `@powersync/common` rollup config. This now bundles `event-iterator` again in `@powersync/common`'s non Node.js export.
diff --git a/.changeset/slow-birds-breathe.md b/.changeset/slow-birds-breathe.md
@@ -0,0 +1,13 @@
+---
+'@powersync/web': minor
+---
+
+Fixes regression introduced in `@powersync/web@1.28.1`. Vite users don't need to include `event-iterator` in included optimized dependencies.
+
+vite.config.js
+
+```diff
+include: [
+-   '@powersync/web > event-iterator'
+]
+```
diff --git a/demos/example-vite/e2e/customers.test.js b/demos/example-vite/e2e/customers.test.js
@@ -0,0 +1,27 @@
+import { describe, expect, it, vi } from 'vitest';
+import { setupTestDOM } from './test-setup.js';
+
+describe('Customer List E2E', () => {
+  it('should display the inserted customer "Fred" in the HTML list', async () => {
+    // Set up the DOM structure for testing
+    setupTestDOM();
+
+    // Import the main script which will execute and populate the DOM
+    await import('../src/index.js');
+
+    // Trigger DOMContentLoaded if needed (script listens for this)
+    if (document.readyState === 'complete' || document.readyState === 'interactive') {
+      document.dispatchEvent(new Event('DOMContentLoaded'));
+    }
+
+    // Wait for the customer list to appear and contain "Fred" using vi.waitFor
+    await vi.waitFor(() => {
+      const customersList = document.getElementById('customers-list');
+      expect(customersList).not.toBeNull();
+
+      const listItems = customersList.querySelectorAll('li');
+      const customerNames = Array.from(listItems).map((li) => li.textContent);
+      expect(customerNames).toContain('Fred');
+    });
+  });
+});
diff --git a/demos/example-vite/e2e/test-setup.js b/demos/example-vite/e2e/test-setup.js
@@ -0,0 +1,12 @@
+/**
+ * Test setup: Creates the DOM structure needed for tests
+ * This mimics the structure in index.html
+ */
+export function setupTestDOM() {
+  // Set up the HTML structure to match index.html
+  document.body.innerHTML = `
+    <h1>Vite bundling test: Check the console to see it in action!</h1>
+    <h2>Customers:</h2>
+    <ul id="customers-list"></ul>
+  `;
+}
diff --git a/demos/example-vite/package.json b/demos/example-vite/package.json
@@ -8,15 +8,19 @@
     "build": "vite build",
     "preview": "vite preview",
     "start": "pnpm build && pnpm preview",
-    "test:build": "pnpm build"
+    "prepare:isolated:test": "pnpm exec playwright install ",
+    "test:build": "pnpm build && vitest run"
   },
   "dependencies": {
     "@powersync/web": "workspace:*"
   },
   "devDependencies": {
     "@swc/core": "~1.6.0",
+    "@vitest/browser": "^3.2.4",
+    "playwright": "^1.51.0",
     "vite": "^5.0.12",
     "vite-plugin-top-level-await": "^1.4.1",
-    "vite-plugin-wasm": "^3.3.0"
+    "vite-plugin-wasm": "^3.3.0",
+    "vitest": "^3.2.4"
   }
 }
diff --git a/demos/example-vite/src/index.html b/demos/example-vite/src/index.html
@@ -1,9 +1,14 @@
 <!doctype html>
 <html>
-  <head>
-    <script type="module" src="./index.js"></script>
-  </head>
-  <body>
-    Vite bundling test: Check the console to see it in action!
-  </body>
-</html>
+
+<head>
+  <script type="module" src="./index.js"></script>
+</head>
+
+<body>
+  <h1>Vite bundling test: Check the console to see it in action!</h1>
+  <h2>Customers:</h2>
+  <ul id="customers-list"></ul>
+</body>
+
+</html>
diff --git a/demos/example-vite/src/index.js b/demos/example-vite/src/index.js
@@ -1,4 +1,4 @@
-import { column, Schema, Table, PowerSyncDatabase, createBaseLogger } from '@powersync/web';
+import { PowerSyncDatabase, Schema, Table, column, createBaseLogger } from '@powersync/web';
 
 createBaseLogger().useDefaults();
 
@@ -38,6 +38,19 @@ const openDatabase = async () => {
   const result = await PowerSync.getAll('SELECT * FROM customers');
   console.log('contents of customers: ', result);
 
+  // Display customers in the HTML list
+  const customersList = document.getElementById('customers-list');
+  if (customersList) {
+    // Clear existing list items
+    customersList.textContent = '';
+    // Create and append list items
+    result.forEach((customer) => {
+      const listItem = document.createElement('li');
+      listItem.textContent = customer.name || 'Unknown';
+      customersList.appendChild(listItem);
+    });
+  }
+
   console.log(
     `Attempting to connect in order to verify web workers are correctly loaded.
     This doesn't use any actual network credentials.
diff --git a/demos/example-vite/vite.config.ts b/demos/example-vite/vite.config.ts
@@ -1,6 +1,6 @@
-import wasm from 'vite-plugin-wasm';
-import topLevelAwait from 'vite-plugin-top-level-await';
 import { defineConfig } from 'vite';
+import topLevelAwait from 'vite-plugin-top-level-await';
+import wasm from 'vite-plugin-wasm';
 
 // https://vitejs.dev/config/
 export default defineConfig({
@@ -22,5 +22,21 @@ export default defineConfig({
   worker: {
     format: 'es',
     plugins: () => [wasm(), topLevelAwait()]
+  },
+  test: {
+    globals: true,
+    include: ['../e2e/**/*.test.js'],
+    maxConcurrency: 1,
+    browser: {
+      enabled: true,
+      isolate: true,
+      provider: 'playwright',
+      headless: true,
+      instances: [
+        {
+          browser: 'chromium'
+        }
+      ]
+    }
   }
 });
diff --git a/packages/common/package.json b/packages/common/package.json
@@ -56,7 +56,6 @@
   },
   "dependencies": {
     "async-mutex": "^0.5.0",
-    "buffer": "^6.0.3",
     "event-iterator": "^2.0.0"
   },
   "devDependencies": {
@@ -66,6 +65,7 @@
     "@rollup/plugin-node-resolve": "^16.0.3",
     "@types/node": "^20.5.9",
     "@types/uuid": "^9.0.1",
+    "buffer": "^6.0.3",
     "rollup": "^4.52.5",
     "cross-fetch": "^4.1.0",
     "js-logger": "^1.6.1",
diff --git a/packages/common/rollup.config.mjs b/packages/common/rollup.config.mjs
@@ -1,5 +1,3 @@
-import * as path from 'node:path';
-
 import commonjs from '@rollup/plugin-commonjs';
 import inject from '@rollup/plugin-inject';
 import json from '@rollup/plugin-json';
@@ -33,7 +31,7 @@ function defineBuild(isNode) {
         })
       ]
     ],
-    external: ['async-mutex', 'bson', 'buffer/', 'event-iterator']
+    external: ['async-mutex', 'bson', isNode ? 'event-iterator' : undefined]
   };
 }
 
diff --git a/packages/web/CHANGELOG.md b/packages/web/CHANGELOG.md
@@ -16,6 +16,10 @@
 - Updated dependencies [3e4a25c]
   - @powersync/common@1.41.1
 
+Note for Vite users:
+
+This release introduced a regression which requires including `'@powersync/web > event-iterator'` in the Vite `optimizeDeps -> include` config. This regression was fixed in `@powersync/web@1.29.0`.
+
 ## 1.28.0
 
 ### Minor Changes
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/scripts/isolated-demo-test.ts b/scripts/isolated-demo-test.ts

Original file line number	Diff line number	Diff line change
`@@ -1,5 +1,3 @@`
`1`		`-import * as path from 'node:path';`
`2`		`-`
`3`	`1`	`import commonjs from '@rollup/plugin-commonjs';`
`4`	`2`	`import inject from '@rollup/plugin-inject';`
`5`	`3`	`import json from '@rollup/plugin-json';`
`@@ -33,7 +31,7 @@ function defineBuild(isNode) {`
`33`	`31`	`})`
`34`	`32`	`]`
`35`	`33`	`],`
`36`		`- external: ['async-mutex', 'bson', 'buffer/', 'event-iterator']`
	`34`	`+ external: ['async-mutex', 'bson', isNode ? 'event-iterator' : undefined]`
`37`	`35`	`};`
`38`	`36`	`}`
`39`	`37`