A RangeError: No value supplied for attribute previewWidth has occurred

[MyungJiwoo]

When using the /image command in the default editor setup following the documentation, the image is not added, and the console displays the following error.

This issue occurs in both v0.41.1, v0.42.0.

According to the documentation, previewWidth: number = 512; is specified, but in the actual code, it was declared as undefined.

In the current version, applying the following temporary fix allowed the editor to work without any errors.

import {
  BlockNoteSchema,
  defaultBlockSpecs,
  createCodeBlockSpec,
} from "@blocknote/core";

const createSchema = () => {
  const blockSpecs = {
    ...defaultBlockSpecs,

    image: {
      ...defaultBlockSpecs.image,
      config: {
        ...defaultBlockSpecs.image.config,
        propSchema: {
          ...defaultBlockSpecs.image.config.propSchema,
          previewWidth: {
            ...defaultBlockSpecs.image.config.propSchema.previewWidth,
            default: 512 as const,
          },
        },
      },
    },

    codeBlock: createCodeBlockSpec({}),
  };

  return BlockNoteSchema.create({ blockSpecs });
};

const editor = useCreateBlockNote({ schema: createSchema() });

[AntoLC]

You can see the error here: https://stackblitz.com/edit/github-gj7clar3?file=package.json,index.html

Blocknote.05.Comments.Example.-.StackBlitz.online-video-cutter.com.mp4

The problem is not only with images.

[fraudenwp]

I hit the same RangeError: “No value supplied for attribute start.” The root cause was saved JSON blocks for numberedListItem missing props.start, but ProseMirror treats start as required.

I fixed it by sanitizing the content before passing it to BlockNote:

const sanitizeContent = (raw: string) => {
  const fallback = [
    {
      type: 'paragraph',
      props: { textColor: 'default', backgroundColor: 'default', textAlignment: 'left' },
      content: [{ type: 'text', text: '', styles: {} }],
    },
  ];

  try {
    const parsed = JSON.parse(raw);
    if (!Array.isArray(parsed)) return fallback;

    return parsed.map((block: any) => {
      const props = block.props ?? {};
      if (block.type === 'numberedListItem') {
        props.start = typeof props.start === 'number' ? props.start : 1; // critical line
      }
      return { ...block, props };
    });
  } catch {
    return fallback;
  }
};

// ...
const editor = useCreateBlockNote({
  schema,
  initialContent: content ? sanitizeContent(content) : undefined,
});

Same idea works for other blocks (e.g., images) that blow up because a required attribute is missing: “repair” the props before hydrating. After this, the RangeError disappeared entirely.

[nperez0111]

This was a bug in a recent version of Tiptap, where they no longer accept an attribute as being undefined. I've submitted something upstream to them, and will wait for their response before modifying our code to support this.

Bear with me while we get this resolved. If you need an immediate fix, downgrade to Tiptap v3.10.4 which was just before this bug was introduced

[hughes-hc]

It's really frustrating. Was the new version released without any testing? You can even reproduce this issue in the official simplest editor—just type "1", then a period, then a space, and it throws an error.
https://stackblitz.com/github/TypeCellOS/BlockNote/tree/main/examples/01-basic/01-minimal?file=package.json

[nperez0111]

@hughes-hc, I understand that you are frustrated, but as I stated above, this issue was introduced by Tiptap, not by us. We have our Tiptap version pinned to one that works in our repo, but since you did a fresh install, it was not pinned & therefore got the latest version. This is not our fault & does not indicate the quality of our repo or testing. Our repo is tested very thoroughly, much more thoroughly than Tiptap's and would have caught this issue if the version was not pinned (which is good practice).

As stated before:

Bear with me while we get this resolved. If you need an immediate fix, downgrade to Tiptap v3.10.4 which was just before this bug was introduced

[ygcaicn]

@nperez0111
I tried to lock the following packages to a specific version: "@tiptap/core": "=3.10.4", "@tiptap/extensions": "=3.10.4",

But the problem persists. Could you clarify which specific packages need to be locked?

[ygcaicn]

@nperez0111 Actually, I tried downgrading BlockNote directly, but that didn't solve the problem either. It's now in a totally non-functional state.

"@blocknote/core": "=0.41.0",
"@blocknote/mantine": "=0.41.0",
"@blocknote/react": "=0.41.0",
"@blocknote/server-util": "=0.41.0",

[mostafanasser775]

this code works for me it rmeove the sub menu to upload but works fine in upload image or you can make inital but make a image and then use it

"use client";

import "@blocknote/core/fonts/inter.css";
import { useCreateBlockNote } from "@blocknote/react";
import { BlockNoteView } from "@blocknote/mantine";
import "@blocknote/mantine/style.css";
import { filterSuggestionItems, BlockNoteEditor } from "@blocknote/core";
import { getDefaultReactSlashMenuItems, SuggestionMenuController } from "@blocknote/react";

const getCustomSlashMenuItems = (editor: BlockNoteEditor) => {
const defaultItems = getDefaultReactSlashMenuItems(editor);
return defaultItems.map((item) => {
if (item.title === "Image") {
return {
...item,
onItemClick: async () => {
const input = document.createElement("input");
input.type = "file";
input.accept = "image/*";
input.style.display = "none";
document.body.appendChild(input);
input.onchange = async (e) => {
const file = (e.target as HTMLInputElement).files?.[0];
if (file) {
const formData = new FormData();
formData.append("file", file);
const response = await fetch("/api/upload", {
method: "POST",
body: formData,
});
const data = await response.json();
const url = data.url;
editor.insertBlocks([{
type: "image",
props: { url, previewWidth: 1024, caption: "", showPreview: true }
}], editor.getTextCursorPosition().block);
}
document.body.removeChild(input);
};
input.click();
}
};
}
return item;
});
};

export default function App() {
// Creates a new editor instance.
const editor = useCreateBlockNote({

});

// Renders the editor instance using a React component.
return
<SuggestionMenuController
triggerCharacter="/"
getItems={async (query) => filterSuggestionItems(getCustomSlashMenuItems(editor), query)}
/>
;
}

[nperez0111]

@nperez0111 I tried to lock the following packages to a specific version: "@tiptap/core": "=3.10.4", "@tiptap/extensions": "=3.10.4",
But the problem persists. Could you clarify which specific packages need to be locked?

In our demos, we are currently running @tiptap/core@3.10.2, so that version is guaranteed to be working (as it is in our demos). So depending on your package manager, you'll need to check your package-lock.json, pnpm-lock.yaml, bun.lock, etc. and make sure that is actually installing that version of @tiptap/core (which is the one that has the problem). The other tiptap packages will have dependencies on @tiptap/core as well so you can end up in a situation where there is multiple versions of @tiptap/core installed. You'll need to force the resolution to be to that specific version for this to work. Like NPM overrides:

{
"overrides": {
  "@tiptap/core": "3.10.2"
  }
}