navigator is not defined

[BjoernRave]

When trying to import @uppy/webcam in next.js, so React with SSR, I get the following error: ReferenceError: navigator is not defined

This is my code

import Uppy from '@uppy/core'
import { Dashboard } from '@uppy/react'
import Webcam from '@uppy/webcam'
import { FC } from 'react'

const Upload: FC<Props> = ({ name }) => {
  const uppy = Uppy().use(Webcam)

  return <Dashboard uppy={uppy} plugins={['Webcam']} />
}

export default Upload

interface Props {
  name: string
}

[RibbtDev]

@BjoernRave this is because the navigator object is present in browsers not in the node. To resolve your issue make sure to use Uppy once your component is mounted.

[timneutkens]

Have a look at #11013 (reply in thread)

Basically the way that you currently are doing it every render you will initialize that object, which is obviously not what you would want.

Here's the correct way to handle it:

import Uppy from '@uppy/core'
import { Dashboard } from '@uppy/react'
import Webcam from '@uppy/webcam'
import { FC } from 'react'

const Upload: FC<Props> = ({ name }) => {
  const [uppy, setUppy] = useState(null) // note that `uppy` will be `null` on the server-side in this case
  useEffect(() => {
   const uppy = Uppy().use(Webcam)
   setUppy(uppy)
  }, [])

  return <Dashboard uppy={uppy} plugins={['Webcam']} />
}

export default Upload

interface Props {
  name: string
}

[ttduongtran]

Try it:

import dynamic from 'next/dynamic';
const Webcam = dynamic(() => import('@uppy/webcam'), {
  ssr: false
});

[ChaitraK2000]

I am facing the same issue with Alan API.. While i was using Alan AI API to my project..
The code is like this:
import alanBtn from '@alan-ai/alan-sdk-web';
const alanKey = my key;
const App = () => {
useEffect(() => {
alanBtn({
key: alanKey,
onCommand: ({ command }) => {
alert('This code was executed');
}
})
}, []);
return (

Alan AI News Application

);
}
export default App;

I tried to use your code. But I got the error like alanBtn is not a function.
So hw can i fix it?
kindly reply me.