Navigator error

[aaronchan32]

I added the AlanButton to my app:

import alanBtn from "@alan-ai/alan-sdk-web";
alanBtn({
 key: "myKey",
 rootEl: document.getElementById("alan-btn")
});
 
function Layout({ children }) {return (
   <>
     <Header />
 
     <main>
       <Banner />
 
       {children}
       <div id="alan-btn"></div>
     </main>
 
     <Footer />
   </>
 );
}

I get this error when I build it:

ReferenceError: navigator is not defined
    at undefined.window.alanAudio (/Users/aaron/Work/ssrtest/node_modules/@alan-ai/alan-sdk-web/index.js:13:5)
    at /Users/aaron/Work/ssrtest/node_modules/@alan-ai/alan-sdk-web/index.js:271:3
    at /Users/aaron/Work/ssrtest/node_modules/@alan-ai/alan-sdk-web/index.js:5:22
    at Object.<anonymous> (/Users/aaron/Work/ssrtest/node_modules/@alan-ai/alan-sdk-web/index.js:9:2)
    at Module._compile (internal/modules/cjs/loader.js:776:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:787:10)
    at Module.load (internal/modules/cjs/loader.js:653:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:593:12)
    at Function.Module._load (internal/modules/cjs/loader.js:585:3)
    at Module.require (internal/modules/cjs/loader.js:690:17)

[annmirosh]

Hi, @aaronchan32 ,

it looks like you're trying to use the Alan Button in the server-side rendered app. If it's a case, here is how you can use it:

import React, { useEffect } from 'react';

function Layout({ children }) {
  useEffect(() => {
    const alanBtn = require('@alan-ai/alan-sdk-web');
    alanBtn({
      key: "myKey",
      rootEl: document.getElementById("alan-btn")
    });
  }, []);

  return (
    <>
      <Header />
      <main>
        <Banner />
        {children}
        <div id="alan-btn"></div>
      </main>
      <Footer />
    </>
  );
}