Unable to import Html5 Navigator

[samuelcastro]

Bug report

Describe the bug

I'm unable to use Navigator, I'm getting:

ReferenceError: navigator is not defined

To Reproduce

Simple try to use native HTML5 navigator api.

Expected behavior

Be able to access navigator

System information

• OS: macOS
• Browser (if applies): Chrome
• Version of Next.js: 9.2.2

[ijjk]

Hi, you need to wrap any usage of client-side APIs in a if (typeof window !== 'undefined') check before you attempt to use them or else they will throw an error during SSR or prerendering

[samuelcastro]

Hmm, great, thanks!

[chrisdrackett]

@timneutkens is this the case everywhere? I just tried this and I'm still getting ReferenceError: navigator is not defined

[rafaelalmeidatk]

@chrisdrackett useEffect will always only run in the client, if you are receiving this error you may be using this variable somewhere else

[chrisdrackett]

yeah, I think the issue is the code I'm using in the useEffect is being evaluated no matter what because of a get

[rafaelalmeidatk]

Can you share the code that is giving you this error? That would help

[samuelcastro]

Thanks @ijjk, that make sense.

[yoventures]

hi @samuelcastro . I am seeing the same issue. did you ever fix this?

[shreykoradia]

hello folks, I installed the library called device-uuid after that i started getting the navigator error after running build but before that I was not getting any build error , I have used navigator for making a functionality of copy to clipboard where i used navigator object I tried @ijjk solution but seems like it did not work !

Piece of code I tried after @ijjk solution

export const copyToClipBoard = async (copyMe: string) => {
  try {
    if(typeof window !== 'undefined'){
      await navigator.clipboard.writeText(copyMe);
    }
    toast("copied to clipboard", { type: "success" });
  } catch (error) {
    console.log(error);
  }
};

[eihsan94]

If you are encountering issues even after following the if typeof widow !== undefined check, you may want to consider the following steps:

Define a lazy-loaded component that encapsulates the implementation of the library depending on the window or navigator reference. In this example, I'm using the HandsontableJs library, which causes this behavior:

import React from "react";
import { HotTable } from "@handsontable/react";
import "handsontable/dist/handsontable.full.min.css";
import { registerAllModules } from "handsontable/registry";

registerAllModules();

export default function Spreadsheets() {
  return (
    <HotTable
      data={[
        ["", "Tesla", "Volvo", "Toyota", "Ford"],
        ["2019", 10, 11, 12, 13],
        ["2020", 20, 11, 14, 13],
        ["2021", 30, 15, 12, 13],
      ]}
      rowHeaders={true}
      colHeaders={true}
      height="auto"
      licenseKey="non-commercial-and-evaluation" // for non-commercial use only
    />
  );
}

Dynamically import the above component in your page component in next js as follows

import dynamic from "next/dynamic";
const Spreadsheets = dynamic(
  () => import("~/components/Spreadsheets/Spreadsheets"),
  {
    ssr: false,
  }
);

export default function PageComponent() {
   return <Spreadsheets />
}

by doing this next js will only import your component only when the hydration took place which is in the browser where the window and the navigator is accessible for the component to use