[BUG]makePopup is not a function when trying to implement typeform popover inReact/Gatsby about embed HOT 10 CLOSED

Getting a similar error with Next.js. My guess is that it has something to do with server-side rendering, but I'm not entirely sure.

I also tried importing the module using next/dynamic (with SSR disabled) instead of a regular import statement, but that didn't seem to fix it. Any pointers would be appreciated!

TypeError: _typeform_embed__WEBPACK_IMPORTED_MODULE_7__["makeWidget"] is not a function. (In '_typeform_embed__WEBPACK_IMPORTED_MODULE_7__["makeWidget"](elm, url, options)', '_typeform_embed__WEBPACK_IMPORTED_MODULE_7__["makeWidget"]' is undefined)

from embed.

I also see this in Vue. There is a createWidget function in there though! I'm not sure if it's the same thing or not; I get an InnerHTML error when I pass the element into that (this could still be user error on my part).

from embed.

I'm having the same issue in Gatsby on makePopup. The function is in there but for some reason it is giving below error:

undefined is not a function (near '..._typeform_embed__WEBPACK_IMPORTED_MODULE_2__.makePopup...')

from embed.

I am getting this error on gatsby project too.
TypeError: typeform_embed__WEBPACK_IMPORTED_MODULE_5_.makeWidget is not a function

from embed.

@lucashu1 @HairMachine

I was able to get this to work in React/Gatsby by running this code on the layout index.tsx:

  useEffect(() => {
    let mounted = true;
    if (mounted) {
      const initializeScripts = () => {
        loadScript("https://embed.typeform.com/embed.js", () => {
          () => {};
        });
      };
      initializeScripts();
    }
    return () => {
      mounted = false;
    };
  }, []);

Here's loadScript()

export const loadScript = (url: string, cb: GlobalEventHandlers["onload"]) => {
  const element = document.getElementsByTagName("script")[0];
  const fjs = element;
  const js = document.createElement("script");
  js.id = "widget-script";
  js.src = url;
  if (fjs && fjs.parentNode) {
    fjs.parentNode.insertBefore(js, fjs);
  } else {
    document.head.appendChild(js);
  }
  js.onload = cb;
};

And then I have my component with the link tag and SVG below this at the bottom of my layout index.tsx. I had to use this solution for another 3rd party script that wasn't working in React and figured this was the way. I'm not using this package at all. Hopefully, this will help anyone else having this issue.

from embed.

I got the same error trying to use makeWidget in my nextjs app. On inspection, I only have access to "createWidget" which I am using and it works.

from embed.

Have tried to use and it didn't work. I use simple react app without SSR. Does anyone know how this can be used in React?

from embed.

Had the same issue with React app. Had to revert the package version to a stable one: yarn add @typeform/[email protected]. It helped.

from embed.

@flppv decided to write my own small wrapper.

from embed.

Latest released version (>= 1) now works with server-side rendering. You can see a demo implementation in Next.js here.

from embed.