(NextJS on M1 OSX) Reference error: Navigator not defined #132

ishan-flek-ai · 2023-03-15T07:34:00Z

Firstly love the implementation and would love to contribute to make it better.

I am using nextJS on macOS with the following configuration file.

  "name": "token-dashboard",
  "version": "3.8.0",
  "scripts": {
    "dev": "next dev -p 3040",
    "build": "next build",
    "start": "next start -p 3040",
    "build-stats": "cross-env ANALYZE=true pnpm run build",
    "export": "next export",
    "build-prod": "run-s clean build export",
    "clean": "rimraf .next out",
    "lint": "next lint",
    "format": "next lint --fix && prettier '**/*.{json,yaml}' --write --ignore-path .gitignore",
    "check-types": "tsc --noEmit --pretty",
    "test": "jest",
    "postbuild": "next-sitemap"
  },
  "dependencies": {
    "@blocknote/react": "0.4.6-alpha.3",
    "@emotion/react": "^11.10.6",
    "@emotion/server": "^11.10.0",
    "@mantine/carousel": "^6.0.1",
    "@mantine/core": "^6.0.1",
    "@mantine/dates": "^6.0.1",
    "@mantine/dropzone": "^6.0.1",
    "@mantine/ds": "^6.0.1",
    "@mantine/form": "^6.0.1",
    "@mantine/hooks": "^6.0.1",
    "@mantine/modals": "^6.0.1",
    "@mantine/next": "^6.0.1",
    "@mantine/notifications": "^6.0.1",
    "@mantine/nprogress": "^6.0.1",
    "@mantine/prism": "^6.0.1",
    "@mantine/spotlight": "^6.0.1",
    "@next/env": "*",
    "@tabler/icons-react": "^2.10.0",
    "@tanstack/react-query": "^4.26.1",
    "cookies-next": "^2.1.1",
    "dayjs": "^1.11.7",
    "embla-carousel-react": "^7.1.0",
    "next": "^13.2.4",
    "next-seo": "^5.15.0",
    "next-sitemap": "^4.0.5",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-query": "^3.39.3",
    "remeda": "^1.9.0"
  },
  "devDependencies": {
    "@next/bundle-analyzer": "^13.2.4",
    "@percy/cli": "^1.20.3",
    "@semantic-release/changelog": "^6.0.2",
    "@semantic-release/git": "^10.0.1",
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^14.0.0",
    "@types/jest": "^29.4.0",
    "@types/node": "^18.15.0",
    "@types/react": "^18.0.28",
    "@typescript-eslint/eslint-plugin": "^5.54.1",
    "@typescript-eslint/parser": "^5.54.1",
    "autoprefixer": "^10.4.14",
    "commitizen": "^4.3.0",
    "cross-env": "^7.0.3",
    "cssnano": "^5.1.15",
    "eslint": "^8.35.0",
    "eslint-config-airbnb-base": "^15.0.0",
    "eslint-config-airbnb-typescript": "^17.0.0",
    "eslint-config-next": "^13.2.4",
    "eslint-config-prettier": "^8.7.0",
    "eslint-plugin-import": "^2.27.5",
    "eslint-plugin-jest": "^27.2.1",
    "eslint-plugin-jest-dom": "^4.0.3",
    "eslint-plugin-jest-formatting": "^3.1.0",
    "eslint-plugin-jsx-a11y": "^6.7.1",
    "eslint-plugin-prettier": "^4.2.1",
    "eslint-plugin-react": "^7.32.2",
    "eslint-plugin-react-hooks": "^4.6.0",
    "eslint-plugin-simple-import-sort": "^10.0.0",
    "eslint-plugin-tailwindcss": "^3.10.1",
    "eslint-plugin-testing-library": "^5.10.2",
    "eslint-plugin-unused-imports": "^2.0.0",
    "inquirer": "^8.0.0",
    "jest": "^29.5.0",
    "jest-environment-jsdom": "^29.5.0",
    "npm-run-all": "^4.1.5",
    "postcss": "^8.4.21",
    "prettier": "^2.8.4",
    "rimraf": "^4.4.0",
    "semantic-release": "^19.0.5",
    "start-server-and-test": "^2.0.0",
    "tailwindcss": "^3.2.7",
    "typescript": "^4.9.5"
  },
  "release": {
    "branches": [
      "main"
    ],
    "plugins": [
      "@semantic-release/commit-analyzer",
      "@semantic-release/release-notes-generator",
      "@semantic-release/changelog",
      [
        "@semantic-release/npm",
        {
          "npmPublish": false
        }
      ],
      "@semantic-release/git",
      "@semantic-release/github"
    ]
  },
  "author": "Ishan Sharma"
}

If I try to refresh the page from the browser, I am getting the following error.

The text was updated successfully, but these errors were encountered:

ishan-flek-ai · 2023-03-15T07:51:41Z

Tried it on a brand new next app using create-next-app and was able to reproduce this error. Tried main repo and running the example and I am not getting the error. In the next app I have also disabled ssr on the page this is loading using dynamic still getting this error.

So looks like next specific error.

ishan-flek-ai · 2023-03-15T10:01:12Z

packages/core/src/shared/utils.ts
packages/react/src/utils.ts

export const isAppleOS = () => {
  // FIXME: Code causing issues in SSR
  // /Mac/.test(navigator.platform) ||
  // (/AppleWebKit/.test(navigator.userAgent) &&
  //   /Mobile\/\w+/.test(navigator.userAgent));
  return false;
};

steven-tey · 2023-03-15T19:52:08Z

Running into this error as well using Next.js 13 App Router. Will investigate!

steven-tey · 2023-03-15T21:36:24Z

Update: Still stuck on this – looks like importing with next/dynamic does remove the error but doesn't render the actual component. Here's my code:

"use client";

import dynamic from "next/dynamic";
const BlockNoteView = dynamic(
  () => import("@blocknote/react").then((mod) => mod.BlockNoteView),
  {
    ssr: false,
  }
);
const useBlockNote = dynamic(
  () => import("@blocknote/react").then((mod) => mod.useBlockNote),
  {
    ssr: false,
  }
);
import "@blocknote/core/style.css";

export default function Editor() {
  const editor = useBlockNote({
    onUpdate: ({ editor }) => {
      console.log(editor.getJSON());
    },
  });

  return <BlockNoteView editor={editor} />;
}

YousefED · 2023-03-15T22:01:22Z

Does this work for you?

DynamicBlockNote.tsx:

import "@blocknote/core/style.css";
import { BlockNoteView, useBlockNote } from "@blocknote/react";

function Editor() {
  const editor = useBlockNote({});

  return <BlockNoteView editor={editor} />;
}

export default Editor;

index.tsx (or any other next page)

// top of file
const BlockNote = dynamic(() => import("./DynamicBlockNote"), {
  ssr: false,
});

...
// in your render() function:

<div style={{ width: "500px;height:300px;background:white" }}>
    <BlockNote />
</div>

ishan-flek-ai · 2023-03-15T22:04:45Z

I tried this. It doesn't solve the problem.

steven-tey · 2023-03-16T01:36:06Z

Yeah same - dynamically importing from @blocknote/react gave me an undefined value for useBlockNote

YousefED · 2023-03-16T04:36:29Z

This demo works for me: https://github.com/YousefED/blocknote-examples-nextjs/pull/1

Are you using NPM or a different package manager?

steven-tey · 2023-03-16T22:52:47Z

Ooooh this 0.4.6-alpha.3 version worked!! Thank you!

oalexdoda · 2023-03-19T00:19:40Z

Next.js completely broken due to the navigator error. Any fix coming? @YousefED ?

YousefED · 2023-03-19T05:14:27Z

Next.js completely broken due to the navigator error. Any fix coming? @YousefED ?

Have you tried the version / demo above? Are you still encountering issues?

YousefED · 2023-03-20T11:23:03Z

I'm closing this issue as I think NextJS should be fixed as part of 0.4.6-alpha.3 and there's a working demo @ https://github.com/YousefED/blocknote-examples-nextjs

Kay2dan · 2023-03-27T09:24:27Z

Unfortunately, I have the same issue:

ReferenceError: navigator is not defined

BlockNode: 0.5.0
NextJs: 12.2.5

YousefED · 2023-03-27T09:41:26Z

@Kay2dan could you share a reproducible sandbox / repo?

Kay2dan · 2023-03-27T10:38:28Z

Yes sure, however, can you give me a day or two to get to it.

adamk22 · 2023-03-31T06:45:45Z

I just installed 0.5.0 in combination with "next": "13.1.2", and also getting this error.

YousefED · 2023-03-31T06:49:18Z

Are you using npm / pnpm / yarn? Which version?

…

On Fri, 31 Mar 2023 at 08:45, Adam ***@***.***> wrote: I just installed 0.5.0 in combination with "next": "13.1.2", and also getting this error. — Reply to this email directly, view it on GitHub <#132 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAC2BWKDTHYURJFZEPHOQU3W6Z4SHANCNFSM6AAAAAAV3NKPRM> . You are receiving this because you modified the open/close state.Message ID: ***@***.***>

adamk22 · 2023-03-31T06:56:30Z

I'm using node v16.14.2 (npm v8.5.0). I also tried the dynamic import fix you mentioned earlier and that seems to do the trick for now!

YousefED · 2023-03-31T12:22:05Z

Fyi, nextjs should work more straightforward as part of v0.5.1: https://github.com/TypeCellOS/BlockNote/releases/tag/v0.5.1. dynamic is no longer needed

adamk22 · 2023-03-31T16:35:03Z

0.5.1 fixed the issue completely for me (without dynamic imports). Thank you!

ishan-flek-ai changed the title ~~bug: (NextJS on M1 OSX) Reference error: Navigator not defined~~ (NextJS on M1 OSX) Reference error: Navigator not defined Mar 15, 2023

steven-tey mentioned this issue Mar 15, 2023

Possible to customize the placeholder text? #122

Closed

YousefED closed this as completed Mar 20, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

(NextJS on M1 OSX) Reference error: Navigator not defined #132

(NextJS on M1 OSX) Reference error: Navigator not defined #132

ishan-flek-ai commented Mar 15, 2023

ishan-flek-ai commented Mar 15, 2023

ishan-flek-ai commented Mar 15, 2023

steven-tey commented Mar 15, 2023

steven-tey commented Mar 15, 2023

YousefED commented Mar 15, 2023 •

edited

ishan-flek-ai commented Mar 15, 2023

steven-tey commented Mar 16, 2023

YousefED commented Mar 16, 2023

steven-tey commented Mar 16, 2023 •

edited

oalexdoda commented Mar 19, 2023

YousefED commented Mar 19, 2023

YousefED commented Mar 20, 2023

Kay2dan commented Mar 27, 2023

YousefED commented Mar 27, 2023

Kay2dan commented Mar 27, 2023 via email •

edited

adamk22 commented Mar 31, 2023

YousefED commented Mar 31, 2023 via email

adamk22 commented Mar 31, 2023

YousefED commented Mar 31, 2023

adamk22 commented Mar 31, 2023

(NextJS on M1 OSX) Reference error: Navigator not defined #132

(NextJS on M1 OSX) Reference error: Navigator not defined #132

Comments

ishan-flek-ai commented Mar 15, 2023

ishan-flek-ai commented Mar 15, 2023

ishan-flek-ai commented Mar 15, 2023

steven-tey commented Mar 15, 2023

steven-tey commented Mar 15, 2023

YousefED commented Mar 15, 2023 • edited

ishan-flek-ai commented Mar 15, 2023

steven-tey commented Mar 16, 2023

YousefED commented Mar 16, 2023

steven-tey commented Mar 16, 2023 • edited

oalexdoda commented Mar 19, 2023

YousefED commented Mar 19, 2023

YousefED commented Mar 20, 2023

Kay2dan commented Mar 27, 2023

YousefED commented Mar 27, 2023

Kay2dan commented Mar 27, 2023 via email • edited

adamk22 commented Mar 31, 2023

YousefED commented Mar 31, 2023 via email

adamk22 commented Mar 31, 2023

YousefED commented Mar 31, 2023

adamk22 commented Mar 31, 2023

YousefED commented Mar 15, 2023 •

edited

steven-tey commented Mar 16, 2023 •

edited

Kay2dan commented Mar 27, 2023 via email •

edited