How to add mailchimp integration script to next.js `Head` without creating pre-render errors?

user_12936898 0
Viewed 948

Heyo

I'm trying to add mailchimp integration to my nextjs site and I can't seem to do it by adding the following to next/Head in my custom _document

<script id="mcjs">!function(c,h,i,m,p){m=c.createElement(h),p=c.getElementsByTagName(h)[0],m.async=1,m.src=i,p.parentNode.insertBefore(m,p)}(document,"script","https://chimpstatic.com/mcjs-connected/js/users/6de8d2d6c939d766316a64859/bd399ce06369bd3a09a174bb7.js");</script>

I think the problem has something to do with the script tag being a !function.

Any help is appreciated. Thanks!

The Error I get is

remote: Error occurred prerendering page
remote: ReferenceError: c is not defined
next.js mailchimp node.js javascript
1 Answers

My solution is the use next/head in custom _document.js with dangerouslysetinnerhtml

EG:

                <script
                        dangerouslySetInnerHTML={{
                            __html: `!function(c,h,i,m,p){m=c.createElement(h),p=c.getElementsByTagName(h)[0],m.async=1,m.src=i,p.parentNode.insertBefore(m,p)}(document,"script","https://chimpstatic.com/mcjs-connected/js/users/6de8d2d6c939d766316a64859/bd399ce06369bd3a09a174bb7.js");`,
                        }}
                    />

Hope this helps someone :D

user_129368980
Related