search

Built-With-Code / wysiwyg-editor

5 stars 0 forks source link

Updating @blocknote/core to version 0.14.5 causes an error #2

Open derekjwilliams opened 1 week ago

derekjwilliams commented 1 week ago

When I updated to the latest versions of @blocknote/core and @blocknote/react (0.14.5 and 0.14.5), I get errors, e.g. in the terminal

Attempted import error: 'BlockNoteView' is not exported from '@blocknote/react' (imported as 'BlockNoteView').

and in the browser Error:

Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Check the render method of 'Editor'.

I have not modified the source and it runs correctly with a fresh clone and install, so it looks like there were some breaking changes in @blocknote/core or @blocknote/react. Investigating and will post my findings here.

Here is my package.json

{
    "name": "wysiwyg-editor",
    "version": "0.1.0",
    "private": true,
    "scripts": {
        "dev": "next dev",
        "build": "next build",
        "start": "next start",
        "lint": "next lint"
    },
    "dependencies": {
        "@blocknote/core": "^0.14.5",
        "@blocknote/mantine": "^0.14.5",
        "@blocknote/react": "^0.14.5",
        "@uploadthing/react": "^6.7.2",
        "next": "14.2.4",
        "react": "^18",
        "react-dom": "^18",
        "react-textarea-autosize": "^8.5.3",
        "uploadthing": "^6.13.2"
    },
    "devDependencies": {
        "@types/node": "^20",
        "@types/react": "^18",
        "@types/react-dom": "^18",
        "autoprefixer": "^10.4.19",
        "eslint": "^8",
        "eslint-config-next": "14.2.4",
        "postcss": "^8",
        "prettier": "3.3.2",
        "tailwindcss": "^3.4.4",
        "typescript": "^5"
    }
}
derekjwilliams commented 1 week ago

Fix: in src/components/Editor.tsx, change

import { BlockNoteView, useCreateBlockNote } from '@blocknote/react'

to

import { BlockNoteViewRaw, useCreateBlockNote } from '@blocknote/react'
derekjwilliams commented 1 week ago

It looks like BlockNoteVew should come from @blocknote/mantine

e.g.

import { BlockNoteView } from '@blocknote/mantine'
import { useCreateBlockNote } from '@blocknote/react'

make sure to install @blocknote/mantine, e.g. npm install @blocknote/mantine (not sure if this would work with shadcn, or ariakit (e.g. @blocknote/shadcn, @blocknote/ariakit)

derekjwilliams commented 1 week ago

Let me know if you'd like a PR for these changes, still going through your video, so there could be others related to the upgrade to the latest blocknote.

akhilwaghmare commented 1 week ago

We love breaking changes :)

Thanks @derekjwilliams for hunting this down. Feel free to make a PR once you go through the whole video to confirm any other changes you find.

Would prefer if we're able to keep the imported objects the same (e.g., sticking to BlockNoteView with a different import path instead of switching to BlockNoteViewRaw) to maintain consistency with the tutorial.