[vite:wasm-fallback] Could not load [...] @neondatabase/serverless/tls.wasm [...] "ESM integration proposal for Wasm" is not supported currently.

[bbigras]

I'm trying to use neon serverless with qwik (which uses vite).

Steps to reproduce

• clone https://github.com/bbigras/test-qwik-neon
• npm install
• npm run build

Expected result

Actual result

[vite:wasm-fallback] Could not load /home/bbigras/dev/test-qwik-cf/node_modules/@neondatabase/serverless/tls.wasm (imported by node_modules/@neondatabase/serverless/tlsImport-C3RRX7ZD.js): "ESM integration proposal for Wasm" is not supported currently. Use vite-plugin-wasm or other community plugins to handle this. Alternatively, you can use `.wasm?init` or `.wasm?url`. See https://vitejs.dev/guide/features.html#webassembly for more details.
error during build:
Error: Could not load /home/bbigras/dev/test-qwik-cf/node_modules/@neondatabase/serverless/tls.wasm (imported by node_modules/@neondatabase/serverless/tlsImport-C3RRX7ZD.js): "ESM integrationproposal for Wasm" is not supported currently. Use vite-plugin-wasm or other community plugins to handle this. Alternatively, you can use `.wasm?init` or `.wasm?url`. See https://vitejs.dev/guide/features.html#webassembly for more details.
    at Object.load (file:///home/bbigras/dev/test-qwik-cf/node_modules/vite/dist/node/chunks/dep-67e7f8ab.js:37402:19)
    at file:///home/bbigras/dev/test-qwik-cf/node_modules/rollup/dist/es/shared/rollup.js:22748:40

I tried adding vite-plugin-wasm in vite.config.ts, but I get the same error.

Environment

Logs, links

• https://github.com/bbigras/test-qwik-neon
• https://stackblitz.com/edit/vitejs-vite-hgmlte?file=src/routes/index.tsx

[bbigras]

the problem is that they do import in index.js but they don't say that they are an ESM module so it's actually wrong. Their package.json needs to get "type": "module" or they should add a cjs build

from someone trying to help in the qwik discord.

[bbigras]

If I add "type": "module", I now get this:

[vite]: Rollup failed to resolve import "a" from "../../src/serverless/dist/npm/tls.wasm".
This is most likely unintended because it can break your application at runtime.
If you do want to externalize this module explicitly add it to
`build.rollupOptions.external`
error during build:
Error: [vite]: Rollup failed to resolve import "a" from "../../src/serverless/dist/npm/tls.wasm".
This is most likely unintended because it can break your application at runtime.
If you do want to externalize this module explicitly add it to
`build.rollupOptions.external`
    at onRollupWarning (file:///home/bbigras/dev/test-qwik-neon/node_modules/vite/dist/node/chunks/dep-67e7f8ab.js:45526:19)
    at onwarn (file:///home/bbigras/dev/test-qwik-neon/node_modules/vite/dist/node/chunks/dep-67e7f8ab.js:45297:13)
    at Object.onwarn (file:///home/bbigras/dev/test-qwik-neon/node_modules/rollup/dist/es/shared/rollup.js:23263:13)
    at ModuleLoader.handleResolveId (file:///home/bbigras/dev/test-qwik-neon/node_modules/rollup/dist/es/shared/rollup.js:22158:26)
    at file:///home/bbigras/dev/test-qwik-neon/node_modules/rollup/dist/es/shared/rollup.js:22119:26

vite.config.ts

import { defineConfig } from "vite";
import { qwikVite } from "@builder.io/qwik/optimizer";
import { qwikCity } from "@builder.io/qwik-city/vite";
import tsconfigPaths from "vite-tsconfig-paths";

import wasm from "vite-plugin-wasm";
import topLevelAwait from "vite-plugin-top-level-await";

export default defineConfig(() => {
  return {
    plugins: [wasm(), topLevelAwait(), qwikCity(), qwikVite(), tsconfigPaths()],
    preview: {
      headers: {
        "Cache-Control": "public, max-age=600",
      },
    },
  };
});

[jawj]

I've not tried the driver with qwik or vite — but I have found that when importing WebAssembly it's difficult to simultaneously satisfy the requirements of multiple platforms. We currently have the driver tested working on Cloudflare Workers only.

Of course, wider compatibility is a high priority. We're working to remove the WebAssembly dependency in the next major release, which should mean a smaller, faster, and more compatible driver. This should be ready early in the new year.

[bbigras]

Thanks.

Note that I'm actually planning to use @neondatabase/serverless with Cloudflare functions. With qwik's Cloudflare Pages Adaptor.

[TimoWilhelm]

I'm using Svelte with the Cloudflare Pages adapter and this module seems really promising! Since Svelte is also using Vite for bundling, I'm facing the same issues using the vite-plugin-wasm plugin.

You can get around the "type": "module" issue by specifying the following in your vite.config.ts

  ssr: {
    noExternal: ['@neondatabase/serverless'],
  },

However, this still leaves you with the following error message: [vite]: Rollup failed to resolve import "a" from "D:/.../node_modules/@neondatabase/serverless/tls.wasm".

It probably depends on how the tls.wasm is created and if it is compatible with bundlers. I know at least wasm-bindgen has different --target modes for use with bundlers.

Looking forward to giving this library a try in the future.

[jawj]

Thanks @TimoWilhelm. As mentioned above, we should have a new version that drops the WebAssembly requirement ready very shortly, and this seems likely to fix the problem.

[jawj]

Hi all. We've just released version 0.2.0 to npm, which is entirely WebAssembly-free. It would be great if you could let us know how you get on with the new version.

[bbigras]

I got this:

16 h 14 min 13 s [vite] Internal server error: Cannot read properties of undefined (reading 'Client')
  File: /home/bbigras/dev/test-qwik-neon/src/routes/index.tsx:13:21
  11 |   *  */
  12 |  export default component$(() => {
  13 |    const client = new Client("http://127.0.0.1");
     |                      ^
  14 |    /* console.log("client", client); */
  15 |
      at routes_component_xYL1qOwPyDI (/home/bbigras/dev/test-qwik-neon/src/routes/index.tsx:13:21)
      at invoke (file:///home/bbigras/dev/test-qwik-neon/node_modules/@builder.io/qwik/core.mjs:706:26)
      at file:///home/bbigras/dev/test-qwik-neon/node_modules/@builder.io/qwik/core.mjs:6348:28
      at async Promise.all (index 0)
      at async Promise.all (index 0)
      at async renderRoot (file:///home/bbigras/dev/test-qwik-neon/node_modules/@builder.io/qwik/core.mjs:6840:5)
      at async renderSSR (file:///home/bbigras/dev/test-qwik-neon/node_modules/@builder.io/qwik/core.mjs:6836:5)
      at async Proxy.renderToStream (file:///home/bbigras/dev/test-qwik-neon/node_modules/@builder.io/qwik/server.mjs:632:3)
      at async /home/bbigras/dev/test-qwik-neon/node_modules/@builder.io/qwik/optimizer.cjs:1763:28

[jawj]

Huh: that's a somewhat confusing error, since Client is not actually a property of anything in the highlighted code fragment. I assume you have import { Client } from '@neondatabase/serverless'; near the top of the file?

To investigate further, a full (failing) code example would be very useful.

[jawj]

It may or may not help, but in the 0.2.1 release just now I have now added "type": "module" to our package.json, as suggested further up this thread.

[bbigras]

I don't have the problem anymore. Thank you very much!