[BUG]makePopup is not a function when trying to implement typeform popover inReact/Gatsby

Describe the bug I’ve been trying to follow the guide to embedding a typeform widget in a React component, but I’m receiving a webpack error. I tried to use makePopup too, but also recieved the error. I’m using this code

import React, { useEffect, useRef, useState } from "react";
import * as typeformEmbed from "@typeform/embed";

export const Quiz = () => {
  const typeformRef = useRef(null);
  const url =
    "https://form.typeform.com/to/P9O5wcaX?typeform-medium=embed-snippet";
  useEffect(() => {
    typeformEmbed.makeWidget(
      typeformRef.current,
      "https://form.typeform.com/to/MY_TYPEFORM_ID",
      {
        hideFooter: true,
        hideHeaders: true,
        opacity: 50
      }
    );
  }, [typeformRef]);
  console.log(typeformRef);

  return (
    <div ref={typeformRef} style={{ height: "100vh", width: "100%" }}></div>
  );
};

and receiving this error Uncaught TypeError: _typeform_embed__WEBPACK_IMPORTED_MODULE_1__.makeWidget is not a function

[HairMachine]

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).

[lucashu1]

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)