feat: support next.js out-of-the-box

[sebastianvitterso]

Next.js is angry at styled components, and does not allow them. There are workarounds, but generally they still require users to put the styled components inside "use client" components.

A dear friend of ours, however, recommended a solution like this:

"use client"
import styled from 'styled-components'
import { Button as EdsButton } from '@equinor/eds-core-react'

export Button as styled(EdsButton)``

In their project, that worked well.

We experimented further with this, and found that this works just as well:

"use client"
export { Button } from '@equinor/eds-core-react'

Further experimentation found that we could also just do:

"use client"
export * from '@equinor/eds-core-react'

Which let us just import EDS components from this file instead of directly from @equinor/eds-core-react.

My theory here is that this PR will make the whole package work in all next projects, without any degradation to other react project support. After all, the "use client" string at the top of the file is just a string (to all other js libraries than next/remix).

---

Also, I could add an issue that the docs should add some documentation about how to use the library with next.js, as there might be more next.js projects upcoming.

[oddvernes]

Worth a try 😅 , just fix the linting warning (Replace "use·client" with 'use·client')

[oddvernes]

Hm, looks like 'use-client' gets stripped away in the dist/esm/index.js file though when built.

Basically we need to use https://www.npmjs.com/package/rollup-preserve-directives or something so rollup doesn't remove it

Perhaps in that case it is better to just add documentation 🤷‍♂️

[sebastianvitterso]

I see that rollup as a plugin for this: Ephem/rollup-plugin-preserve-directives, discovered here: rollup/rollup#4699 (comment) . Of course, adding a plugin to your rollup stack is something I suspect you may not take lightly.

[oddvernes]

Yea we have to do that. If you make a feature request ticket with the same information as in this pr we can take a look at it 👍

[oddvernes]

this was instead resolved by #3703