Weird artifacts using Next.js 13

[michaelbonner]

Some really bizarre things are happening while using Next.js 13. There's a dotted line from the top left of the canvas to where the cursor is drawing.

Here's a reference image:

It only happens when using a production build. npm run dev works fine, but npm run build and npm run start makes the weirdness happen.

Bare Bones Reproduction

repo: https://github.com/michaelbonner/react-signature-pad-next-test

deployed URL: https://react-signature-pad-next-test.vercel.app/

[vladshcherbin]

Same with another wrapper package - https://github.com/michaeldzjap/react-signature-pad-wrapper

I believe it's something with underlying signature_pad package and new SWC compiler which is ON by default in next 13.

[agilgur5]

I believe it's something with underlying signature_pad package and new SWC compiler which is ON by default in next 13.

Yea, as per above, this seems to be due to some compiler optimization screwing something up. And if it exists in other signature_pad packages, it's independent of this library. This issue does not pop up elsewhere, and as such there's not really anything this library can do -- either swc or Next.js or maybe signature_pad would have to fix this. So this is out-of-scope for this library.

[ElTimuro]

For everyone else facing this: I was able to fix this by disabling swcMinify in the next config:

const nextConfig = {
  reactStrictMode: true,
  swcMinify: false,
};