Can't get web SDK to work

[rpander93]

Hi,

I'm trying to implement the web SDK in a project, but it doesnt work for me. I just tried running the example-vite, but it doesnt seem to run.

so the output from this line https://github.com/powersync-ja/powersync-web-sdk/blob/main/demos/example-vite/src/index.js#L31 isnt shown.

I'm using Firefox 121 on macOS 14.2. Also tried Chome, but that didnt work either

[DominicGBauer]

@rpander93 thanks for raising the issue. I can reproduce it. We are looking into it and will get back to you as soon as we have more information.

[DominicGBauer]

Hi @rpander93 did you run pnpm build:packages before running the vite example?

[rpander93]

Ah, missed that. If I do that and then pnpm start it works.

But, I cannot run it with npm run dev? So I need to re-build and preview everytime I make a change? It shows me:

[kobiebotha]

No need to rebuild the SDK during your usage of it.

pnpm dev should watch for changes using vite's development server - could you try that?

[kobiebotha]

Hmm no, that doesn't work - I'm getting a console error. I'll investigate ways to have a watch type of workflow and update here.

[aleksdotbar]

Here's my Vite config that works in dev.
Maybe it'll help.

import { defineConfig } from "vite";

// https://vitejs.dev/config/
export default defineConfig({
  optimizeDeps: {
    exclude: ["@journeyapps/powersync-sdk-web"],
    include: [
      "object-hash",
      "uuid",
      "event-iterator",
      "js-logger",
      "lodash",
      "can-ndjson-stream",
    ],
  },
  worker: {
    format: "es",
  },
  build: {
    target: "ESNext",
  },
});

[rpander93]

Here's my Vite config that works in dev. Maybe it'll help.

import { defineConfig } from "vite";

// https://vitejs.dev/config/
export default defineConfig({
  optimizeDeps: {
    exclude: ["@journeyapps/powersync-sdk-web"],
    include: [
      "object-hash",
      "uuid",
      "event-iterator",
      "js-logger",
      "lodash",
      "can-ndjson-stream",
    ],
  },
  worker: {
    format: "es",
  },
  build: {
    target: "ESNext",
  },
});

Copy-pasting this in the example project doesnt work for me. Same error :(

[aleksdotbar]

@rpander93

https://github.com/xanderbarkhatov/powersync-vite-demo

Here's the same working demo.

For pnpm you also need an .npmrc file with shamefully-hoist=true

[rpander93]

that works. thanks!