Missing Web Assembly module in NextJS Server Environment

[Cruzor-Blade]

Hello, and thanks for this awesome package !
So, I have been trying to use the libpg-query package inside a nextjs server environment to parse and validate some SQL queries, but I am getting the output

(Using Webpack)

pnpm run dev

failed to asynchronously prepare wasm: Error: ENOENT: no such file or directory, open 'C:\Petit p\densograph_2\citygraph\.next\server\vendor-chunks\libpg-query.wasm'
Aborted(Error: ENOENT: no such file or directory, open 'C:\Petit p\densograph_2\citygraph\.next\server\vendor-chunks\libpg-query.wasm')
 GET /api/chat 405 in 3901ms
[RuntimeError: Aborted(Error: ENOENT: no such file or directory, open 'C:\Petit p\densograph_2\citygraph\.next\server\vendor-chunks\libpg-query.wasm'). Build with -sASSERTIONS for more info.]
 ⨯ unhandledRejection: [RuntimeError: Aborted(Error: ENOENT: no such file or directory, open 'C:\Petit p\densograph_2\citygraph\.next\server\vendor-chunks\libpg-query.wasm'). Build with -sASSERTIONS for more info.]    
 ⨯ unhandledRejection:  [RuntimeError: Aborted(Error: ENOENT: no such file or directory, open 'C:\Petit p\densograph_2\citygraph\.next\server\vendor-chunks\libpg-query.wasm'). Build with -sASSERTIONS for more info.]   
 ○ Compiling /_not-found ...

So, I checked and it appears that the web assembly module is not being included in the build at .next\server\vendor-chunks\libpg-query.wasm.

Edit with additional informations
Running it with npm instead of pnpm, and using Turbopack instead of Webpack gives a distinct (but similar) error
(Using Turpopack)

npm run dev

failed to asynchronously prepare wasm: Error: ENOENT: no such file or directory, open 'C:\Petit p\densograph_2\citygraph\[project]\node_modules\libpg-query\wasm\libpg-query.js [app-route] (ecmascript)\libpg-query.wasm'
Aborted(Error: ENOENT: no such file or directory, open 'C:\Petit p\densograph_2\citygraph\[project]\node_modules\libpg-query\wasm\libpg-query.js [app-route] (ecmascript)\libpg-query.wasm')
 GET /api/chat 405 in 2326ms
[RuntimeError: Aborted(Error: ENOENT: no such file or directory, open 'C:\Petit p\densograph_2\citygraph\[project]\node_modules\libpg-query\wasm\libpg-query.js [app-route] (ecmascript)\libpg-query.wasm'). Build with -sASSERTIONS for more info.]
 ⨯ unhandledRejection: [RuntimeError: Aborted(Error: ENOENT: no such file or directory, open 'C:\Petit p\densograph_2\citygraph\[project]\node_modules\libpg-query\wasm\libpg-query.js [app-route] (ecmascript)\libpg-query.wasm'). Build with -sASSERTIONS for more info.]
 ⨯ unhandledRejection:  [RuntimeError: Aborted(Error: ENOENT: no such file or directory, open 'C:\Petit p\densograph_2\citygraph\[project]\node_modules\libpg-query\wasm\libpg-query.js [app-route] (ecmascript)\libpg-query.wasm'). Build with -sASSERTIONS for more info.]

My development environment is Windows, and Node 20

Hoping this problem can be solved pretty soon. Thanks in advance !

[pyramation]

Did you end up getting this solved?

Thanks for digging into this and for the detailed reproduction info 🙏

The problem is that libpg-query.js always calls:

locateFile("libpg-query.wasm")

so in a bundled environment (Next.js, Webpack, Turbopack) the .wasm file has to either be:

1. Emitted as an asset by the bundler, or
2. Manually copied to /public and served at a known path, with locateFile overridden.

A couple of things you can try right now:

Option A – Webpack in Next.js

// next.config.js
const nextConfig = {
  webpack: (config) => {
    config.experiments = { ...config.experiments, asyncWebAssembly: true };
    config.module.rules.push({
      test: /\.wasm$/,
      type: 'asset/resource',
    });
    return config;
  },
};
module.exports = nextConfig;

And in your code:

import initPgQuery from 'libpg-query/wasm/libpg-query.js';
import wasmUrl from 'libpg-query/wasm/libpg-query.wasm';

const pg = await initPgQuery({
  locateFile: (path) => (path.endsWith('.wasm') ? wasmUrl : path),
});

Option B – Turbopack (simpler workaround)

• Copy node_modules/libpg-query/wasm/libpg-query.wasm → public/libpg-query.wasm
• Then:

import initPgQuery from 'libpg-query/wasm/libpg-query.js';

const pg = await initPgQuery({
  locateFile: (path) => (path.endsWith('.wasm') ? '/libpg-query.wasm' : path),
});

That ensures the loader can actually find the .wasm binary instead of looking inside .next/server/vendor-chunks/.

Let me know if this helps!

[Cruzor-Blade]

Hello @pyramation and thanks.

Unfortunatelly, none of the two approaches worked for me.

The approach with webpack still tries to get the file from 'C:\_next\static\media\libpg-query.901d7f78.wasm'.

Also, the turbopack one fails to resolve too [project]/densograph_2/citygraph/node_modules/libpg-query/wasm/libpg-query.wasm [app-rsc]

So, the solution (or more like a workaround) I found was to use a watching script, and listen to the .next/server/vendor-chunks/ folder.
Each time the folder is created, which happens on dev server start or browser hard refreshes, the script will copy the .wasm. file from node_modules to the appropriate folder.

But I had to install an extra dependency, chokidar for file system listening.

This is the exact script I used

const chokidar = require('chokidar');
const fs = require('fs-extra');
const path = require('path');

const targetDir = '.next/server';
const src = 'node_modules/libpg-query/wasm/libpg-query.wasm';
const dest = path.join(targetDir, 'vendor-chunks', 'libpg-query.wasm');

console.log(`🔍 Watching for ${targetDir} creation...`);

chokidar.watch('.next', {
  ignoreInitial: false,
  depth: 0,
}).on('addDir', async (addedPath) => {
  if (path.resolve(addedPath) === path.resolve(targetDir)) {
    console.log(`📦 ${targetDir} was created. Copying .wasm...`);
    try {
      await fs.copy(src, dest);
      console.log('✅ WASM file copied successfully.');
    } catch (err) {
      console.error('❌ Error copying file:', err);
    }
  }
});

And then in package.json

{
  "scripts": {
    "dev": "concurrently -k -n WATCH,DEV -c yellow,cyan \"npm:watch:copy\" \"next dev\""
  }
}

As you can see, this method works only with Webpack (because turbopack has a different path resolution mechanism apparently) and is very hacky. But it gets the job done for the time being, until we get a better alternative 😅.

[pyramation]

nice!

we also found that if you copy node_modules/libpg-query/wasm/libpg-query.wasm to the public/ directory, you can do it once and it will work!

[Xetera]

For us libpg-query.wasm is being requested relative to the current url as libpg-query.wasm instead of /libpg-query.wasm so copying the file under the public directory doesn't work

[Xetera]

Ended up fixing this with patch-package because we weren't even calling initPgQuery in our codebase and it seemed like a strange workaround.

Find node_modules/@pgsql/parser/wasm/libpg-query.js and just prefix the filename with a slash

- locateFile("libpg-query.wasm")
+ locateFile("/libpg-query.wasm")

Save, and follow the rest of the instructions in patch-package to save your changes permanently. I have no idea why isn't the default behavior