Why does tesseract not work in browser with react?

I am new to react and a begginer with node.js. I am trying to create an app that uses the tesseract package, but I'm running into a strange error: tesseract_js__WEBPACK_IMPORTED_MODULE_3___default.a.init is not a function

I am using node 12, and using this tutorial for how to use tesseract with react.

my app.js file looks like this:

import ImageUploader from 'react-images-upload'
import React, { useState } from "react";
import Tesseract from "tesseract.js"

const UploadComponent = props => (
  <form>
    <ImageUploader
      key='image-uploader'
      withIcon={true}
      singleImage={true}
      withPreview={true}
      label='Maximum Size File: 5mb'
      buttonText='Choose an Image'
      onChange={props.onImage}
      imgExtension={['.jpg', '.png', '.jpeg']}
      maxFileSize={5242880}
    ></ImageUploader>
  </form>
)

const App = () => {

  const [progress, setProgress ] = useState('getUpload')
  const [errorMessage, setErrorMessage ] = useState('')

 
  const onImage = async (failedImages, successImages) => {

    setProgress('scanning')

    try {
      console.log('successImages', successImages)
      const parts = successImages[0].split(';')
      const mime = parts[0].split(':')[1]
      const name = parts[1].split('=')[1]
      const data = parts[2]
      console.log("mime: " + mime +", name: " + name + ", data: " + data)
      const fileUrl = "~/Downloads/"+name
      console.log("fileUrl: " + fileUrl)
     
      let image = new Buffer(data, 'base64');
      Tesseract.init("eng");
      // set image
      Tesseract.setImage(image);
      console.log("set image...")
      Tesseract.recognize({ logger: m => console.log(m) }).then((data) => {
        console.log(data);
      }).catch((error) => {
        console.log("error message: " + error.message)
      })
    } catch (error) {
      console.log("error in scan: " + error.message)
      setErrorMessage(error.message)
      setProgress('uploadError')
    }

    setProgress('scanned')
  }
  const content = () => {
    switch(progress){
      case 'getUpload':
        return <UploadComponent onImage={onImage} />
      case 'scanning':
        return <h2>Scanning...</h2>
      case 'scanned':
        return <h2>Scanned</h2>
      case 'uploadError':
        return (
          <>
            <div>Error Message = {errorMessage} </div>
            <div>please upload an image</div>
          </>
        )
    }
  }
  return (
    <div className='App'>
      <h1>Text Scanner Website </h1>
      {content()}
    </div>
  )

}

export default App;

When I run npm start, and then hit localhost:3000 in my browswer, and then select an image file using my file selector, I get the above error. what am I doing wrong? I thought tesseract was supposed to work nicely in the browser, and that my setup with es6 syntax and webpack was all standard. Any help would be greatly appreciated!

Thank you,

Paul