Highway crashes on import (SSR)

[fsdiogo]

I'm using Next.js which has server-side rendering and Highway crashes on import due to the window not being defined in the server.

With a quick look in the source code, I've found that changing this line

highway/src/helpers.js

Line 10 in 4b4457e

const PARSER = new window.DOMParser();

to something along the lines of

const PARSER = typeof window !== 'undefined' ? new window.DOMParser() : undefined;

stops the crash (at least with the features of Highway I'm using at the moment).

I still have to import the non-built version to make it work even after rebuilding the project with the mentioned change (I'm npm linking the project):

import Highway from '@dogstudio/highway/src/highway';

Do you have something planned to make Highway work with SSR?

[Anthodpnt]

Hello @fsdiogo,

There is no support of React applications because there is no need of Highway for this type of project. The routing is managed by Next.js and there are already plenty of good tools for animations in React:

react-transition-group
react-spring

Best regards,
Anthodpnt

[fsdiogo]

Hi @Anthodpnt,

I've used react-transition-group before but I'd say its focus is on transitioning between components, whereas Highway's main objective is to transition between pages, so I gave it a shot 👍

Thanks anyway!

[ThaoD5]

Hello @fsdiogo,

For page transitions under Next, I am currently working with next-page-transition module

It seems to do the job pretty well, just keep in mind that having both views overlapping at the same time is not possible with this module.

Have a great day

[fsdiogo]

Hi @ThaoD5,

I gave that a go too and it worked well yes, but it had some drawbacks like no scroll restoration and no out-of-the-box support for css modules due to not spreading some props to react-transition-group (which it's using as a dependency).

If I have the time maybe I'll try to use react-transition-group directly.

Thanks, you too!