(NextJS on M1 OSX) Reference error: Navigator not defined about blocknote

[YousefED]

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

[YousefED]

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]

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

[YousefED]

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

Are you using NPM or a different package manager?

[ishan-flek-ai]

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]

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]

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

[steven-tey]

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} />;
}

[steven-tey]

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

[steven-tey]

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

[oalexdoda]

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

[YousefED]

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]

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]

Unfortunately, I have the same issue:

ReferenceError: navigator is not defined

BlockNode: 0.5.0
NextJs: 12.2.5

[YousefED]

@Kay2dan could you share a reproducible sandbox / repo?

[Kay2dan]

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

[adamk22]

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

[YousefED]

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]

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!

[adamk22]

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