Use in Nextjs

[kaisiant]

import rough from "roughjs/bundled/rough.esm"

import rough from "roughjs/bin/rough"

I need some help, thanks

[pshihn]

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

[ShahriarKh]

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

[williamsjokvist]

AFAIK it's resolved in Next 12.

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

[museumhotel]

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 🤷‍♂️

[ShahriarKh]

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.