Eui: Provide SSR support

[elvenking]

It would be fantastic to run EUI in NextJS

EUI is a clear winner for me in category of publicly available design systems. Unfortunately this is a showstopper.

Can somebody confirm that it is doable and try to explain conceptual approach how to implement it ?

This feature request relates to https://github.com/elastic/eui/issues/1830

[thompsongl]

Server-side rendering is certainly something we _want_ to support, but we don't yet have it as a prioritized roadmap item.

We have done cursory exploration into making it work for basic prototyping with Gatsby. The gist is that node needs some polyfills for DOM globals (https://github.com/elastic/gatsby-eui-starter/blob/master/gatsby-node.js). Similar things would be possible with Next.js next.config.js.

If we get more formal with that ^ repo, we can update this issue with the approach.

[elvenking]

@thompsongl Thanks for explanation. I've tried to replicate that Gatsby sample to NextJS but doesn't works for me. I hope that there will be some advancement toward SSR support in the future.

[b-barry]

Hello,

I have transformed the gatsby config to a valid next.config.js

Kr,

[thompsongl]

Thanks for that, @b-barry!
I'll give it a try soon

[SavchenkoValeriy]

@b-barry Thank you for sharing your solution!
It eliminates HTMLElement and window issues, however I get the following error:

Attempted import error: 'DragDropContextProps' is not exported from 'react-beautiful-dnd'.
ModuleDependencyError: "export 'DragDropContextProps' was not found in 'react-beautiful-dnd'

I have react-beautiful-dnd installed, so I don't know what's the problem. I though it might be a problem with TS, but next.js has a built-in support for TS.
Did you encounter anything similar?

[chandlerprall]

react-beautiful-dnd itself doesn't provide TS types, you'll also need to install @types/react-beautiful-dnd

[thompsongl]

I just opened an issue (#2185) related to those dnd types. I _think_ we need to remove them from es/ and lib/

[SavchenkoValeriy]

@chandlerprall unfortunately, simple yarn add @types/react-beautiful-dnd didn't make if for me. Still thanks for helping!

@thompsongl great to hear!

[ScreamZ]

This is working. Thanks @b-barry .

For those who missed, don't forget to add null-loader to dev depencies.

[ryanbelke]

+1 for SSR support in next.js, this would take EUI to the top in my opinion.. testing now with the configuration provided.

[ScreamZ]

As long as you are using it as a back office, you don't need SSR. You can currently leverage the framework within nextJS using the above "hack". Ima write an article on that soon.

I think typescript support completed is more important atm.

[ScreamZ]

@b-barry

Which configuration do you use for build with css… I was doing such a thing

import "@elastic/eui/dist/eui_theme_light.css";

To get CSS but looks like it's not shipped and with the above hack it only works in dev mode

[pugnascotia]

Inspired by this post, I put together a Next.js starter. Feedback welcome!

[ScreamZ]

@pugnascotia Oh! That's my post 😆 Glad to see that it is useful :)

it's not perfect as CSS is stripped and mocked, but it works, especially with static rendering :)

[pugnascotia]

@pugnascotia Oh! That's my post 😆 Glad to see that it is useful :)

Yes, thank you very much @ScreamZ for the inspiration!

it's not perfect as CSS is stripped and mocked, but it works, especially with static rendering :)

Can you elaborate? If something isn't working, I'd like to fix it. If you could open an issue on the repo, that'd be great 👍

[nandorojo]

@pugnascotia That starter is super useful! I did just drop this minor issue on it (https://github.com/elastic/next-eui-starter/issues/5), as it seems that the nav drawer doesn't have the expected behavior when it's locked. Thanks again for adding it!

[sondh0127]

Please support SSR for EuiCollapsibleNav.
EUI v24.1.0 + Next v9.4 got error:
ReferenceError: window is not defined

Current solution:

import dynamic from 'next/dynamic'
const EuiCollapsibleNav = dynamic(
  () => import('@elastic/eui').then((mod) => mod.EuiCollapsibleNav),
  {
    ssr: false,
  },
)

[ScreamZ]

@pugnascotia +1 EuiCollapsibleNav has not the same behavior than others

ReferenceError: window is not defined
    at EuiCollapsibleNav (webpack-internal:///./node_modules/@elastic/eui/lib/components/collapsible_nav/collapsible_nav.js:73:41)

[nandorojo]

@ScreamZ Do you have a git repo for your Medium article? I like how minimal a starter would be from that piece.

[ScreamZ]

@nandorojo

Nope because the article was small enough to allow reproduction from a barebones nextjs app

[nandorojo]

@ScreamZ sounds good, I went ahead and did that, thanks!

[cchaos]

Thanks to @pugnascotia for the NextJS starter for EUI. That satisfies the original ask of this issue. If you have special needs of the starter, please open an issue in that repo.