Prevent Cloudflare Rocket Loader deferring script

[andreacassani]

When using Cloudflare with Rocket Loader enabled, the script injected by next-themes gets deferred causing the screen to flash.

As per Cloudflare docs, adding data-cfasync="false" to the <script /> tag prevents this behavior from happening, and the flash doesn't happen anymore.

I don't know if this is the best solution, but since Cloudflare is quite common and Rocket Loader is enabled by default, this might be useful for people who want to keep it enabled or for those who don't actually know it will prevent next-themes from working properly.

[vercel[bot]]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated
next-themes-basic	✅ Ready (Inspect)	Visit Preview	💬 Add your feedback	Nov 25, 2022 at 7:26PM (UTC)
next-themes-tailwind	✅ Ready (Inspect)	Visit Preview	💬 Add your feedback	Nov 25, 2022 at 7:26PM (UTC)

[pacocoursey]

Not a fan of adding this universally – not everyone uses CloudFlare. But it would be better to support spreading props onto the <script /> tag so you can just add it yourself.

[andreacassani]

Not a fan of adding this universally – not everyone uses CloudFlare. But it would be better to support spreading props onto the <script /> tag so you can just add it yourself.

Yes, you are totally right. I've added a new prop scriptAttribute to the ThemeProvider where we can pass attributes and their values down to the <script /> element. I've also updated the readme with an example. Let me know what do you think

[nicholashamilton]

@andreacassani I've temporarily disabled Rocket Loader on my site because of the flash on page load. I would find it useful if they merged this PR to allow scriptAttribute on the next-themes ThemeProvider.

[alakhpc]

is there something blocking this? I believe this would be very useful.

[dollannn]

What is the status for this? What is blocking, are we looking for alternative solutions?

[patelvivekdev]

Thank you

Solved: https://github.com/pacocoursey/next-themes/issues/281#issuecomment-2094657762

If there is no alternative, I think this PR should be merge. @pacocoursey