CommonJS require vs. ES6 import discrepancy

Question

So, I am new to React. Apologies if I am missing something obvious, I'm wrestling with a weird issue with my ES6 imports.

I'm using the @typeform/embed module (0.12.1), which oddly links to a GitHub repo on npm but that repo doesn't exist. So I haven't been able to look into potentially related issues.

Anyways, whenever I do the following:

import typeformEmbed from '@typeform/embed'

My text editor shows that the type of typeformEmbed is a string, and when I go to invoke a function on it, it is always undefined. Gives me the 'ole cannot invoke property X on undefined TypeError. It almost looks as if it is trying to import the README?

But, then I opened up my Node REPL and could write:

const typeformEmbed = require('@typeform/embed')

and it works like a charm.

Is there some discrepancy between the two that I am missing?

Edit: I know that this question is pretty text-heavy, let me know if there is crucial information that I'm missing. I should mention that I built this project with create-react-app.

Answer 1

import * as typeformEmbed from '@typeform/embed';


const popUpHandler = () => {     

typeformEmbed.makePopup(
  'https://admin.typeform.com/to/PlBzgL',
  {
     mode: 'drawer_left',
     autoOpen: true,
     autoClose: 3,
     hideScrollbars: true,
     onSubmit: function () {
       console.log('Typeform successfully submitted')
  }
 }
)}

Should work for you