react-widget
react-widget copied to clipboard
uploadcare
Widget doesn't work in a Next js app in Production
Hello thanks for this wonderful bundle,
The widget works perfectly in development, but not in production. Instead of seeing just the choose files button, the widget renders drop files here text followed by a circle then 3 buttons (choose file, cancel and remove). When I click on any of the buttons or use the widget API ref, only plain html of the modal shows up with no CSS. It still works though.
Any idea why this is happening or what I can do to troubleshoot?
Hey @davidmedero,
Please tell me what version of next.js you are using. Do you use CSP? Do you have any errors in the console during the build or in the browser?
Hi Aleksandr! Im using ^12.3.1 for Next js. No CSP. No errors in my build or browser console. I even added it to my index.js page to see if it had anything to do with my dynamic paths but it's broken there also.
Unfortunately, I can't reproduce this issue on a clean 12.3.1 project. I should also mention that if you're using SWC, image previews won't work due to this issue.
We inject styles directly into the head tag on initialization, so I'm assuming that the head contents are being rewritten somehow. Could you provide a minimal reproducible example?
That was all I needed Alek. Thank you so much. I removed the next/Head tag from my app.js and index.js files and it works perfectly now in production. Now I just have to find out which line of code specifically is causing the issue. Is there a link stylesheet I can use for this widget that I can place in my <Head />?
I found it. These google font stylesheets were overriding the widget styles:
<link rel="preconnect" href="https://fonts.googleapis.com" /> <link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin /> <link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet"/>
It seems that this is a known next/head bug and it should be fixed in future releases. See this link for more information.
As for a link stylesheet to use for the widget, styles are directly injected into the JS bundle so there is no link. However, I have created one for you to use as a workaround. Here is the link: Gist.