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

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. Screenshot 2023-03-15 at 1 00 56 PM

About this issue

Original URL
State: closed
Created a year ago
Comments: 20

Most upvoted comments

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 on Mar 31, 2023

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

Are you using NPM or a different package manager?

YousefED on Mar 16, 2023

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

ishan-flek-ai on Mar 15, 2023

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>

YousefED on Mar 15, 2023