import rough from "roughjs/bundled/rough.esm" <a target="_blank" rel="noopener nor

AFAIK it's resolved in Next 12. <p dir="au

Here is a simple example in Next: <div class="highlight highlight-source-js notran

Use in Nextjs about rough HOT 5 OPEN

kaisiant commented on May 27, 2024

Use in Nextjs

from rough.

Comments (5)

pshihn commented on May 27, 2024 3

Seems like you are having trouble loading es6 modules in next. Not sure how to configure that.
You can also try loading from roughjs/bundled/rough.cjs.js

from rough.

museumhotel commented on May 27, 2024 2

AFAIK it's resolved in Next 12.

Can you get it working? No luck here, even tried using next-transpile-modules.

was able to achieve rough-like effect in next using the thi.ng geom-fuzz library 🤷‍♂️

from rough.

ShahriarKh commented on May 27, 2024

~~AFAIK it's resolved in Next 12.~~

from rough.

williamsjokvist commented on May 27, 2024

AFAIK it's resolved in Next 12.

Can you get it working? No luck here, even tried using next-transpile-modules.

from rough.

ShahriarKh commented on May 27, 2024

Here is a simple example in Next:

import rough from "roughjs/bundled/rough.cjs.js";

export default function ComponentName() {
    useEffect(() => {
        let svg = document.getElementById('some-id');
        const rc = rough.svg(svg);
        let node = rc.circle(12, 12, 20);
        svg.appendChild(node);
    }, [])

    return <svg id='some-id' />
}

be sure to set height ad width for your <svg> element.
I'm using useEffect here to ensure the element is created in client-side (not server-side) and document is available.

from rough.

Recommend Projects