Integrating scripts from platforms like Journey or Medivine into a Next.js project using TypeScript can sometimes be a daunting task. Recently, I encountered the "We're Having Trouble Seeing Your Script" error while trying to add a script to my project.
By the way, I'm not even close to getting 10k views, but I'd like to give it a shot since Journey Grow will test it better the earlier we apply.
Here’s a step-by-step guide on how I diagnosed and solved the issue. You can also check their original post which didn't work for me.
I resolved the issue using dangerouslySetInnerHTML in Next.js, but clearer documentation or better code examples would help. Not every blogger is a developer, so offering clearer, user friendly solutions for would make integration easier for everyone.
What Happened
I wanted to add a script provided by Journey into my Next.js application. The script was meant to be placed in the head (in every platform) section of my HTML.
Here’s what I copied from Journey:
<script data-grow-initializer="">!(function(){window.growMe||((window.growMe=function(e){window.growMe._.push(e);}),(window.growMe._=[]));var e=document.createElement("script");(e.type="text/javascript"),(e.src="https://faves.grow.me/main.js"),(e.defer=!0),e.setAttribute("data-grow-faves-site-id","U2=");var t=document.getElementsByTagName("script")[0];t.parentNode.insertBefore(e,t);})();</script>and I tried to fix with Typescript.
Since this script was designed for HTML, I directly copied it into my layout.tsx file. In a TypeScript environment, however, I immediately ran into several issues:
- Error: Parameter 'e' implicitly has an 'any' type
TypeScript requires explicit typing for function parameters, and the parameter e in the script didn't have a specified type.
- Error: '}' expected
This was a syntax error indicating that the script was missing a closing brace or had incorrect syntax.
- Error: Unexpected token. Did you mean {'}'} or }?
This error pointed to another syntax issue, suggesting there was a character or syntax that TypeScript didn’t recognize.
Diagnosing the Issue
The script I copied was plain JavaScript meant for an HTML context. TypeScript, however, is much stricter and flagged errors because:
TypeScript needs explicit types for parameters, so e was flagged as an issue because it was implicitly any
Solution: Using dangerouslySetInnerHTML with Next.js
To correctly integrate this JavaScript, I used dangerouslySetInnerHTML. This React method allows you to directly set HTML content, but it needs to be carefully formatted to work in TypeScript.
Here’s what worked:
Here it is for you to copy, remember to change your code;
<script data-grow-initializer="" dangerouslySetInnerHTML={{ __html: ` !(function() { window.growMe || (window.growMe = function(e) { window.growMe._.push(e); }, window.growMe._ = []); var e = document.createElement("script"); e.type = "text/javascript"; e.src = "https://faves.grow.me/main.js"; e.defer = true; e.setAttribute("data-grow-faves-site-id", "U2"); var t = document.getElementsByTagName("script")[0]; t.parentNode.insertBefore(e, t); })(); `, }}/>Why This Worked:
Because syntax was wrong for TypeScript;
- Removed Unnecessary TypeScript Annotations:
By treating the script purely as JavaScript and not adding TypeScript types, it avoided TypeScript errors.
- Properly Formatted JavaScript for React:
I ensured that the JavaScript code was properly formatted within the dangerouslySetInnerHTML. This method expects a string of HTML or JavaScript, so making sure the script was correctly structured was crucial.
- Correct Script Placement:
Placing the script inside the
component ensured that it was executed at the right time, before any other scripts or page content.Conclusion:
Integrating third-party scripts into a Next.js project using TypeScript can be challenging, especially if the scripts are designed for a plain HTML context. I was able to resolve the "We're Having Trouble Seeing Your Script" error. If you face similar issues, remember to check your syntax, avoid overcomplicating with unnecessary types, and ensure your scripts are correctly placed in your document.
I hope this guide helps you in your debugging journey. Happy coding!
