I am trying to put the latest version of @mapbox/search-js-react version 1.0.0-beta.12 into my nextjs application however when I do I get the following error.

Server Error ReferenceError: document is not defined This error happened while generating the page. Any console logs will be displayed in the terminal window.

Now the logs show the following

Call Stack Object.

file:///Users/USERNAME/Node_Projects/(APP)/node_modules/@mapbox/search-js-web/dist/index.js (1:1939)

Here is the code below.

import { getSession, signOut } from 'next-auth/react';
import { useState, useEffect } from 'react';
import { AddressAutofill } from '@mapbox/search-js-react';
import Dashboard from '../../../components/layout/dashboard';
import { Container, Button, Table } from 'react-bootstrap';

export default function Details({ signOOut }) {
  if (signOOut == true) {
    signOut();
  }

  //    const [data, setData] = useState(null)
  //    const [isLoading, setLoading] = useState(false)

  return (
    <form>
      <AddressAutofill accessToken='pk.eyJ1IjoicnVzc2VsbGhhcnJvd2VyIiwiYSI6ImNsMzhiYzZ5YjFqbzUzZnFzeXU1MnNjaTYifQ.baPPgnI_Vxxu0mS32DDs3w'>
        <input
          name='address'
          placeholder='Address'
          type='text'
          autoComplete='address-line1'
        />
      </AddressAutofill>
      <input
        name='apartment'
        placeholder='Apartment number'
        type='text'
        autoComplete='address-line2'
      />
      <input
        name='city'
        placeholder='City'
        type='text'
        autoComplete='address-level2'
      />
      <input
        name='state'
        placeholder='State'
        type='text'
        autoComplete='address-level1'
      />
      <input
        name='country'
        placeholder='Country'
        type='text'
        autoComplete='country'
      />
      <input
        name='postcode'
        placeholder='Postcode'
        type='text'
        autoComplete='postal-code'
      />
    </form>
  );
}

export async function getServerSideProps(ctx) {
  const Gsession = await getSession(ctx);

  var signo = false;
  console.log('Checking Session are : ' + JSON.stringify(Gsession));
  if (Gsession) {
    if (Gsession.error == 555) {
      signo = true;
    }
  }

  return {
    props: {
      sessions: Gsession,
      signOOut: signo,
    },
  };
}

Details.auth = true;

Details.getLayout = function getLayout(page) {
  return <Dashboard>{page}</Dashboard>;
};