search

uploadcare / react-widget

Uploadcare React Widget
MIT License
85 stars 18 forks source link

Widget doesn't work in a Next js app in Production #381

Open davidmedero opened 1 year ago

davidmedero commented 1 year ago

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.

Screen Shot 2023-04-29 at 3 24 31 AM

Screen Shot 2023-04-30 at 3 56 31 AM

Any idea why this is happening or what I can do to troubleshoot?

nd0ut commented 1 year ago

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?

davidmedero commented 1 year ago

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.

nd0ut commented 1 year ago

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?

davidmedero commented 1 year ago

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 ?

davidmedero commented 1 year ago

I found it. These google font stylesheets were overriding the widget styles:

`

<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet"/>`
nd0ut commented 1 year ago

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.

davidmedero commented 1 year ago

That's wonderful! Thank you so much Alek!