Preact compatibility with next-urql

[alxclark]

I've been trying to use next-urql in a Next.js app that also uses Preact, without any success.

Using the following alias :

{
  "dependencies": {
    "react": "npm:@preact/compat@^0.0.3",
    "react-dom": "npm:@preact/compat@^0.0.3",
    "react-ssr-prepass": "npm:preact-ssr-prepass@^1.1.1"
}

Using urql directly, I can get the app to work, but queries aren't being ran server side.

Using @urql/preact I get this error when trying to run next dev :

error - /Users/.../Documents/urql/packages/preact-urql/dist/urql-preact.mjs
Can't import the named export 'createContext' from non EcmaScript module (only default export is available)
TypeError: Cannot read property 'context' of undefined

My current setup is very similar to https://github.com/developit/nextjs-preact-demo.

• Has anyone succeeded to make those work together ?
• If so, can we get a working example merged ?

I have a feeling this might be an issue with https://github.com/sventschui/preact-ssr-prepass 🤔

[JoviDeCroock]

I've been debugging this and the error is situated in the node-resolution.

Basically, our urql/preact file is a .mjs one, which means that it's going to enforce .js to be commonjs and .mjs to be esm. When it hits preact it sees that there are no .mjs files so it will regard the .module.js file as cjs and parse it that way. This is why we are running in to this issue.

When I change these in the preact node_modules folder another internal issue occurs, I've brought this up in the Preact internal slack channel as well now.

[danjebs]

@alxclark Oh man!! After spending all day wrestling with this, I finally created a minimal repo and came here to post the same question and found this discussion 🤦

I think the mjs issue can be patched using https://github.com/lukeed/webpack-modules. And then use the same approach as the Apollo example (hat tip to @erickm for this) to get SSR working 🎉

My minimal working repo in the workaround branch: https://github.com/danjebs/next-preact-urql/tree/workaround