Answered

Using Nextjs and embedded typeform sdk

  • 12 February 2021
  • 6 replies
  • 2307 views

With NextJS I am doing server side rendering and am trying to take advantage of the sdk as the cdn script isn’t playing nice with my NextJS code. However i am getting a babel error with the node_module typeform code. 

 

A more detailed description on stack overflow

 

I am getting the following in regards to the typeform sdk. 

ReferenceError: regeneratorRuntime is not defined

 

Any tips on how to use typeform with nextjs

 

icon

Best answer by Liz 10 January 2022, 22:12

View original

6 replies

Userlevel 3
Badge +3

Hi @nick this error usually happens because of `async await` and missing a babel Polyfill.

Can you have a look if you have a file called `.babelrc` in your root folder and if the `next/babel` presets are loaded? You can follow this article for adding the presets.

 

Userlevel 5
Badge +3

Hello Nick, 


I don’t know if this will help your case as I’m not familiar with next.js, but another customer had issues a month ago adding the library too and he resolved it this way: 

 

Instead of using the "next/dynamic" (which is apparently the old way to dynamically load in next.js), I instead just did the following:
import('@typeform/embed').then(...typeform implementation…)

 

If that works for you, then kudos to Kaelin.H for being a hero amongst heroes :) 

I am getting a new error about content security policy for third party cookies issued. It looks like many of  the Typeform cookies issued, do not have `SameSite=None`. This is preventing the typeform survey from rendering!

 

So i ended up figuring out that i could move the script into my own file and call the script manually. 

 

I created a public/typeformScript.js

```

;(function () {

var qs,

js,

q,

s,

d = document,

gi = d.getElementById,

ce = d.createElement,

gt = d.getElementsByTagName,

id = "typef_orm",

b = "https://embed.typeform.com/"

if (!gi.call(d, id)) {

js = ce.call(d, "script")

js.id = id

js.src = b + "embed.js"

q = gt.call(d, "script")[0]

q.parentNode.insertBefore(js, q)

}

})()

```

 

In `<Head>` in document i pulled in this script. 

```

<script src="/typeformScript.js"></script>

```

Any tips on the content security privacy policy?

Userlevel 7
Badge +5

Hi @nick - I asked one of our developers about the error, but to help us look a little further into this, would you mind sharing a screenshot of the error in the console? (Or any other errors you’re seeing?) Thanks!

Nick,

 

How’d you come up with that JS? I’m having the same issue.

Userlevel 7
Badge +5

Hello, all! I wanted to post an update that our dev team has let me know that our current Embed SDK should work with the current version now of NextJS. :grinning:

If anyone is still experiencing issues, please let us know!

Reply