UnknownError - sqlite3.oo1.OpfsDb is not a constructor

[steida]

Why?

[steida]

You have to add COOP and COEP HTTP Headers as described in https://sqlite.org/wasm/doc/trunk/persistence.md#coop-coep

In Next.js, add async headers:

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,

  // ADD THIS:
  async headers() {
    return [
      {
        source: "/(.*?)",
        headers: [
          {
            key: "cross-origin-embedder-policy",
            value: "require-corp",
          },
          {
            key: "cross-origin-opener-policy",
            value: "same-origin",
          },
        ],
      },
    ];
  },
};

module.exports = nextConfig;

[FilipChalupa]

Is there any recommended way to force localStorage instead of opfs in all browsers? I would love to try Evolu but I'm not able to get it working with opfs in our private pnpm monorepo.

Patching Browser.js with false on line 19 to force localStorage works for me but seems very dirty.

---

For opfs I've tried setting cross-origin-*policy headers in next-config.js, adding "type": "module" to package.json, copypasting your examples/nextjs/tsconfig.json. All without any luck. I'm still getting the sqlite3.oo1.OpfsDb is not a constructor in both Chrome (MS Edge) and Firefox.

[steida]

Type module or tsconfig are irrelevant. You have to enable https://sqlite.org/wasm/doc/trunk/persistence.md#coop-coep.

Of course, I can add an option to enforce LocalStorage, but OPFS should work, or my detection is wrong. Maybe this will help https://github.com/mandolyte/sqlitenext#opfs_db (there is a link to vercel/next.js#17991

[FilipChalupa]

The problem is that source: "/(.*?)" is not matching root url / and my app runs under /. 😅

Solution:

const headers = [
	{
		key: 'cross-origin-embedder-policy',
		value: 'require-corp',
	},
	{
		key: 'cross-origin-opener-policy',
		value: 'same-origin',
	},
]

const nextConfig = {
  // ADD THIS:
  async headers() {
  	return [
  		{
  			source: '/',
  			headers,
  		},
  		{
  			source: '/(.*?)',
  			headers,
  		},
  	]
  },
};

[steida]

@FilipChalupa Thank you, it will help others.