bug: Uncaught RangeError: Schema is missing its top node type ('doc')

[Sloosmore]

Provide environment information

System: OS: macOS 14.3.1 CPU: (12) arm64 Apple M2 Pro Memory: 492.72 MB / 16.00 GB Shell: 5.9 - /bin/zsh Binaries: Node: 21.5.0 - /opt/homebrew/bin/node npm: 10.2.4 - /opt/homebrew/bin/npm

Describe the bug

Pasted the default code into a React-vite project and logged the error when rendered:

Uncaught RangeError: Schema is missing its top node type ('doc') at _NodeType.compile (novel.js?v=621d91f9:7773:13) at new Schema (novel.js?v=621d91f9:7859:137) at getSchemaByResolvedExtensions (novel.js?v=621d91f9:17768:10) at new _ExtensionManager (novel.js?v=621d91f9:18114:19) at Editor2.createExtensionManager (novel.js?v=621d91f9:20519:29) at new Editor (novel.js?v=621d91f9:20391:10) at new Editor2 (novel.js?v=621d91f9:48281:5) at novel.js?v=621d91f9:48344:25 at commitHookEffectListMount (chunk-ZRJG7NCB.js?v=10fd422c:16904:34) at commitPassiveMountOnFiber (chunk-ZRJG7NCB.js?v=10fd422c:18152:19)

Link to reproduction

No repo but could upload if needed

To reproduce

"use client";

import { EditorContent, EditorRoot } from "novel"; import { useState } from "react";

const Editor = () => { const [content, setContent] = useState(null); return (

{ const json = editor.getJSON(); setContent(json); }} />

); }; export default Editor;

Additional information

Am I missing any packages aside from novel?

[Sloosmore]

The bug comes from pasting the code in the documentation

[Sloosmore]

Just needed to add extensions, closed

[aligajani]

@Sloosmore What is the solution exactly?

[Sloosmore]

configure extensions and editor props as well

[aligajani]

Can you please guide me, the docs seem a big vague, so I have this below. I get

RangeError: Schema is missing its top node type ('doc')

"use client";

import { EditorContent, EditorRoot } from "novel";
import { useState } from "react";
import { defaultEditorProps } from "novel";

const Editor = () => {
    const [content, setContent] = useState(null);
    return (
        <EditorRoot>
            <EditorContent
                editorProps={{
                    ...defaultEditorProps,
                    attributes: {
                        class: `prose-lg prose-stone dark:prose-invert prose-headings:font-title font-default focus:outline-none max-w-full`,
                    },
                }}
                initialContent={content}
                onUpdate={({ editor }) => {
                    const json = editor.getJSON();
                    setContent(json);
                }}
            />
        </EditorRoot>
    );
};
export default Editor;

[Sloosmore]

follow the rest of the guide and the issue will resolve

[aligajani]

@Sloosmore Apparently I did, errors went away, but Editor is no where to be seen.

"use client";

import { defaultEditorProps, EditorContent, EditorRoot } from "novel";
import { defaultExtensions } from "./extensions";

import { useState } from "react";

const Editor = () => {
    const [content, setContent] = useState(null);
    const extensions = [...defaultExtensions];

    return (
        <EditorRoot>
            <EditorContent
                extensions={extensions}
                editorProps={{
                    ...defaultEditorProps,
                    attributes: {
                        class: `prose-lg prose-stone dark:prose-invert prose-headings:font-title font-default focus:outline-none max-w-full`,
                    },
                }}
                initialContent={content}
                onUpdate={({ editor }) => {
                    const json = editor.getJSON();
                    setContent(json);
                }}
            />
        </EditorRoot>
    );
};
export default Editor;

return (
    <SlimLayout>
      <Editor />

[Areeb-dev]

@Sloosmore Hey i'm facing the same issue can you help me?

[ThisIsSimple]

@Sloosmore Hey i'm facing the same issue can you help me?

I just fixed this error. You should Follow instructions about extensions from the links below.

https://novel.sh/docs/guides/tailwind/extensions https://novel.sh/docs/guides/tailwind/slash-command

after copy pasting code, there still some errors. I just commented them out and solved the problem. It's looks weird that empty arrayed extensions makes such errors. I hope it helped. :)