Urql: Using next.js and urql with next-sass

[erickm]

Describe the bug
When using urql with next.js and also a custom next.config.js (next-sass) i get no graphql calls while navigating to different routes.

Steps to reproduce
Steps to reproduce the behavior:

1. Checkout the nextjs example from urql
2. npm install --save @zeit/next-sass node-sass
3. adjust next.config.js with withSass
4. add an extra page in the pages folder (e.g. second.js)
5. add Link element from next.js (e.g. Home)
6. yarn build
7. yarn start
8. open the second route in directly in the browser (e.g. localhost:8000/second)
9. when i try to navigate to the home url i get stuck

Do you know what i can do to also use sass with urql and next.js ?

[kitten]

This doesn't quite sound right 🤔 So to confirm, the next.js example in this repo is an SSR demo. Could you confirm that you're not accessing an entirely new page that's been rendered using SSR?

[erickm]

Hi @kitten, i can confirm; i created a repo with the specific configuration; https://github.com/erickm/next-urql-sass/tree/master/examples/3-ssr-with-nextjs

It looks like the error occurs while passing the data props to a custom component (only when using the sass function, without the sass pacakge it works fine).

To reproduce:

1. checkout the repo & install
2. yarn build && yarn start
3. navigate to localhost:3000/test
4. try to go to the home page (here is where i get stuck)

When i remove withSass in the next.config.js and remove the sass imports and sytles, build it and start it again it works fine.

[JoviDeCroock]

Looking at the code from next-sass, I'd be surprised if this specifically is impacting urql. https://github.com/zeit/next-plugins/blob/master/packages/next-sass/index.js this only adds a loader for .sass/.scss and then reexecutes the previous config (which also has no effect on the actual code since it's some alias config.

EDIT: everything seems to work for me :/

I'll update this comment as I go further through it.

[erickm]

@JoviDeCroock Thnx for testing. Maybe a package version? I added a gif for clarity.

So when i refresh the page while on Test route and try to navigate back to Home it get's stuck.

[JoviDeCroock]

@erickm so this is what I'm seeing:

Since we have a yarn.lock file it shouldn't be a discrepancy in dependencies between us. I'd look at first another browser. If that's not helping then it can't be an extension, I don't think it's in the hands of urql though.

EDIT: when running production I encounter the same issue
EDIT 2: I can't help but feel this has something to do with the static prerender... Since everything dom related seems good and clicking the dom element itself redirects me correctly

[erickm]

@JoviDeCroock Correct, this is production only. Like you state it looks like a static prerender thing. Do you have a suggestion what to do next? Should i take this issue somewhere else? (or just not use SASS :P)

[kitten]

So, I've been investigating this for a while now and it's kind of impossible to see what's going on and why we're seeing this behaviour. Either way, it's most likely an issue with Next.js itself, or at least our example, which isn't looking likely right now however. I think you'll unfortunately have to open an issue with Next.js themselves, because they're the most likely people to be able to see what's going on 😞

[erickm]

@kitten, @JoviDeCroock Thnx for your responses and looking at it, will continue searching for a solution.

[kitten]

@erickm and if it does turn out that Next.js needs us to change our example we're also happy to reopen this issue :)