search

ueberdosis / tiptap

The headless rich text editor framework for web artisans.
https://tiptap.dev
MIT License
27.54k stars 2.29k forks source link

TipTap is not working on react with vite project. #3492

Closed TroublesomeSaramsh789 closed 1 year ago

TroublesomeSaramsh789 commented 1 year ago

What’s the bug you are facing?

X [ERROR] Could not resolve "prosemirror-keymap"

node_modules/@tiptap/core/dist/tiptap-core.esm.js:3:23:
  3 │ import { keymap } from 'prosemirror-keymap';     
    ╵                        ~~~~~~~~~~~~~~~~~~~~

You can mark the path "prosemirror-keymap" as external to exclude it from the bundle, which will remove this error.

X [ERROR] Could not resolve "prosemirror-commands"

node_modules/@tiptap/core/dist/tiptap-core.esm.js:6:567:
  6 │ ... selectTextblockEnd$1, selectTextblockStart as selectTextblockStart$1, setBlockType, wrapIn as wrapIn$1 } from 'prosemirror-commands'; 
    ╵                                                                                                                   ~~~~~~~~~~~~~~~~~~~~~~

You can mark the path "prosemirror-commands" as external to exclude it from the bundle, which will remove this error.

X [ERROR] Could not resolve "prosemirror-schema-list"

node_modules/@tiptap/core/dist/tiptap-core.esm.js:7:107:
  7 │ import { liftListItem as liftListItem$1, sinkListItem as sinkListItem$1, wrapInList as wrapInList$1 } from 'prosemirror-schema-list';     
    ╵                                                                                                            ~~~~~~~~~~~~~~~~~~~~~~~~~

You can mark the path "prosemirror-schema-list" as external to exclude it from the bundle, which will remove this error.

X [ERROR] Could not resolve "prosemirror-gapcursor"

node_modules/@tiptap/extension-gapcursor/dist/tiptap-extension-gapcursor.esm.js:2:26:
  2 │ import { gapCursor } from 'prosemirror-gapcursor';
    ╵                           ~~~~~~~~~~~~~~~~~~~~~~~

You can mark the path "prosemirror-gapcursor" as external to exclude it from the bundle, which will remove this error.

X [ERROR] Could not resolve "prosemirror-history"

node_modules/@tiptap/extension-history/dist/tiptap-extension-history.esm.js:2:36:
  2 │ import { undo, redo, history } from 'prosemirror-history';
    ╵                                     ~~~~~~~~~~~~~~~~~~~~~

You can mark the path "prosemirror-history" as external to exclude it from the bundle, which will remove this error.

X [ERROR] Could not resolve "prosemirror-dropcursor"

node_modules/@tiptap/extension-dropcursor/dist/tiptap-extension-dropcursor.esm.js:2:27:
  2 │ import { dropCursor } from 'prosemirror-dropcursor';
    ╵                            ~~~~~~~~~~~~~~~~~~~~~~~~

You can mark the path "prosemirror-dropcursor" as external to exclude it from the bundle, which will remove this error.

(node:24016) UnhandledPromiseRejectionWarning: Error: Build failed with 6 errors: node_modules/@tiptap/core/dist/tiptap-core.esm.js:3:23: ERROR: Could not resolve "prosemirror-keymap" node_modules/@tiptap/core/dist/tiptap-core.esm.js:6:567: ERROR: Could not resolve "prosemirror-commands" node_modules/@tiptap/core/dist/tiptap-core.esm.js:7:107: ERROR: Could not resolve "prosemirror-schema-list" node_modules/@tiptap/extension-dropcursor/dist/tiptap-extension-dropcursor.esm.js:2:27: ERROR: Could not resolve "prosemirror-dropcursor" node_modules/@tiptap/extension-gapcursor/dist/tiptap-extension-gapcursor.esm.js:2:26: ERROR: Could not resolve "prosemirror-gapcursor"

Which browser was this experienced in? Are any special extensions installed?

Firefox 107

How can we reproduce the bug on our side?

  1. create a vite project.
  2. yarn add @tiptap/react @tiptap/starter-kit
  3. Import these 
    
import { useEditor, EditorContent } from '@tiptap/react';
import StarterKit from '@tiptap/starter-kit';

const Tiptap = () => { const editor = useEditor({ extensions: [StarterKit], content: '

Hello World!

', }); return ; };

export default Tiptap;


4. yarn dev

### Can you provide a CodeSandbox?

_No response_

### What did you expect to happen?

tip tap editor should have rendered on the webpage.

### Anything to add? (optional)

_No response_

### Did you update your dependencies?

- [X] Yes, I’ve updated my dependencies to use the latest version of all packages.

### Are you sponsoring us?

- [ ] Yes, I’m a sponsor. 💖
slax57 commented 1 year ago

We are having this exact same issue too. Seems this is specific to the version 2.0.0-beta.205, which was recently released on npm.

It comes from this commit which turned the dependencies into devDependencies + peerDependencies (which is not equivalent)

Is this change intended?

anshubaldeep commented 1 year ago

Don't think it is specific to just version 2.0.0-beta.205, our team is facing the same issue even with version 2.0.0-beta.199

ctrlplusb commented 1 year ago

Same for a Remix site. Moving required dependencies into devDependencies definitely sounds like it is the issue.

massimopalmieri commented 1 year ago

I'm having the same issue, switching back to 2.0.0-beta.204 doesn't solve the issue, I had to add all the prosemirror-* packages to the dependencies

muradbu commented 1 year ago

We're having the same issue in our monorepo with pnpm on 2.0.0-beta.202.

numediaweb commented 1 year ago

Same here, had to add them temporarily to my dependencies:

yarn add prosemirror-commands prosemirror-keymap prosemirror-model prosemirror-schema-list prosemirror-state prosemirror-transform prosemirror-view prosemirror-dropcursor prosemirror-gapcursor prosemirror-history
RomainLanz commented 1 year ago

Same here.

I had to roll back and lock the version to 2.0.0-beta.204.

Willian-A commented 1 year ago

Same issue here at 2.0.0-beta.205. My team tried to roll back to 2.0.0-beta.202 (the version that we used to use before this update) but it keeps the error.

HannesEURESA commented 1 year ago

Same Error here at 2.0.0-beta.205 After Roleback to 2.0.0-beta.204 The Error is gone, but new Error appears: ERROR in ./node_modules/@tiptap/extension-dropcursor/dist/tiptap-extension-dropcursor.esm.js ERROR in ./node_modules/@tiptap/extension-gapcursor/dist/tiptap-extension-gapcursor.esm.js ERROR in ./node_modules/@tiptap/extension-history/dist/tiptap-extension-history.esm.js

Haraldson commented 1 year ago

I’m not sure how the sub-versioning of the 2.0.0-beta version is supposed to be interpreted, what I know is that moving from 202 to 205 certainly doesn’t feel like it should be breaking like this.

janthurau commented 1 year ago

hey all 👋 all prosemirror and yjs packages have been moved to peerDependencies (and devDependencies, for extension development), to avoid issues that occur if multiple versions of prosemirror or yjs are included in a project (e.g. because a project includes both yjs and prosemirror). Without peerDependencies, it's possible that two different versions are installed, which then crashes (https://discuss.yjs.dev/t/different-versions-of-yjs/1004, https://github.com/ueberdosis/hocuspocus/issues/445, https://github.com/ueberdosis/tiptap/issues/577, https://github.com/ueberdosis/tiptap/issues/3209).

Im not aware of another solution to this, if there is one, let me know! 🙏

What you have to do now: When running npm install in your project, npm should complain about UNMET PEER DEPENDENCY, so just require them yourself and the error should be gone.

Haraldson commented 1 year ago

I’m getting no such warning from yarn, @janthurau.

janthurau commented 1 year ago

hmm, I just ran a test - with npm, I cannot reproduce any issue at all (tried the instructions from the initial post here). With yarn, I'm getting the same error, however, yarn install (1.22.10) yields this:

[3/4] 🔗  Linking dependencies...
warning "@tiptap/starter-kit > @tiptap/core@2.0.0-beta.205" has unmet peer dependency "prosemirror-commands@^1.3.1".
warning "@tiptap/starter-kit > @tiptap/core@2.0.0-beta.205" has unmet peer dependency "prosemirror-keymap@^1.2.0".
warning "@tiptap/starter-kit > @tiptap/core@2.0.0-beta.205" has unmet peer dependency "prosemirror-model@^1.18.1".
warning "@tiptap/starter-kit > @tiptap/core@2.0.0-beta.205" has unmet peer dependency "prosemirror-schema-list@^1.2.2".
warning "@tiptap/starter-kit > @tiptap/core@2.0.0-beta.205" has unmet peer dependency "prosemirror-state@^1.4.1".
warning "@tiptap/starter-kit > @tiptap/core@2.0.0-beta.205" has unmet peer dependency "prosemirror-transform@^1.7.0".
warning "@tiptap/starter-kit > @tiptap/core@2.0.0-beta.205" has unmet peer dependency "prosemirror-view@^1.28.2".
warning "@tiptap/starter-kit > @tiptap/extension-code-block@2.0.0-beta.205" has unmet peer dependency "prosemirror-state@^1.4.1".
warning "@tiptap/starter-kit > @tiptap/extension-dropcursor@2.0.0-beta.205" has unmet peer dependency "prosemirror-dropcursor@1.5.0".
warning "@tiptap/starter-kit > @tiptap/extension-gapcursor@2.0.0-beta.205" has unmet peer dependency "prosemirror-gapcursor@^1.3.1".
warning "@tiptap/starter-kit > @tiptap/extension-history@2.0.0-beta.205" has unmet peer dependency "prosemirror-history@^1.3.0".
warning "@tiptap/starter-kit > @tiptap/extension-horizontal-rule@2.0.0-beta.205" has unmet peer dependency "prosemirror-state@^1.4.1".
warning "@tiptap/vue-3 > @tiptap/extension-bubble-menu@2.0.0-beta.205" has unmet peer dependency "@tiptap/core@^2.0.0-beta.193".
warning "@tiptap/vue-3 > @tiptap/extension-bubble-menu@2.0.0-beta.205" has unmet peer dependency "prosemirror-state@^1.4.1".
warning "@tiptap/vue-3 > @tiptap/extension-bubble-menu@2.0.0-beta.205" has unmet peer dependency "prosemirror-view@^1.28.2".
warning "@tiptap/vue-3 > @tiptap/extension-floating-menu@2.0.0-beta.205" has unmet peer dependency "@tiptap/core@^2.0.0-beta.193".
warning "@tiptap/vue-3 > @tiptap/extension-floating-menu@2.0.0-beta.205" has unmet peer dependency "prosemirror-state@^1.4.1".
warning "@tiptap/vue-3 > @tiptap/extension-floating-menu@2.0.0-beta.205" has unmet peer dependency "prosemirror-view@^1.28.2".
warning " > @tiptap/vue-3@2.0.0-beta.205" has unmet peer dependency "@tiptap/core@^2.0.0-beta.193".
warning " > @tiptap/vue-3@2.0.0-beta.205" has unmet peer dependency "prosemirror-state@^1.4.1".
warning " > @tiptap/vue-3@2.0.0-beta.205" has unmet peer dependency "prosemirror-view@^1.28.2".
[4/4] 🔨  Building fresh packages...
Haraldson commented 1 year ago

I’ve now tried some different things to get the editor up and running again;

  1. Adding the prosemirror-* dependencies to my project (Webpack stops complaining, but runtime error)
  2. Adding the same dependencies as explicit resolutions in my package.json (runtime error)
  3. Completely deleting my node_modules and yarn.lock between each step

The runtime error I’m getting:

RangeError: Adding different instances of a keyed plugin (plugin$)

I haven’t made any changes to any of the editor code, besides upgrading all tiptap dependencies.

There needs to be a clear guide on how to go about getting this up and running on tiptap.dev, it seems a bit rushed to include such a change without having that handy.

w-A-L-L-e commented 1 year ago

Same issue here vue3 app + vite. Works fine on my machine but gives these errors when using inside a docker. This solves it for me (thanks for the tip @massimopalmieri ):

npm i prosemirror-schema-list prosemirror-history prosemirror-dropcursor prosemirror-gapcursor prosemirror-keymap prosemirror-commands

Imho these should be deps of tiptap if it doesn't work without those.

avitorio commented 1 year ago

My project doesn't use vite and it also broke. It's weird because we are using 2.0.0-beta.202 as the exact version to avoid bumps breaking our project and still, new installs are being affected. I really don't get it... thought this peerDependencies change should only affect ^2.0.0-beta.205.

nikolakanacki commented 1 year ago

@Haraldson and anyone else who stumps upon this:

Even if you lock down all @tiptap/... deps to ...-beta-204 (no caret, no tilde, exact semver dep), @tiptap/starter-kit@2.0.0-beta-204 still has carets in its deps, from yarn.lock:

...
"@tiptap/starter-kit@^2.0.0-beta.204":
  version "2.0.0-beta.204"
  resolved "https://registry.yarnpkg.com/@tiptap/starter-kit/-/starter-kit-2.0.0-beta.204.tgz#12fb0701d7c37f022b94042f430f1518beeea072"
  integrity sha512-VTjQFKyByBpCXk6k8s/o/xO5m98oJ/raLvDt3XLCehjMgqyePfv0tKjIg2MlPKe/Bbog1RgEix1O1RJy9vL4xw==
  dependencies:
    "@tiptap/core" "^2.0.0-beta.204"
    "@tiptap/extension-blockquote" "^2.0.0-beta.204"
    "@tiptap/extension-bold" "^2.0.0-beta.204"
    "@tiptap/extension-bullet-list" "^2.0.0-beta.204"
    "@tiptap/extension-code" "^2.0.0-beta.204"
    "@tiptap/extension-code-block" "^2.0.0-beta.204"
    "@tiptap/extension-document" "^2.0.0-beta.204"
    "@tiptap/extension-dropcursor" "^2.0.0-beta.204"
    "@tiptap/extension-gapcursor" "^2.0.0-beta.204"
    "@tiptap/extension-hard-break" "^2.0.0-beta.204"
    "@tiptap/extension-heading" "^2.0.0-beta.204"
    "@tiptap/extension-history" "^2.0.0-beta.204"
    "@tiptap/extension-horizontal-rule" "^2.0.0-beta.204"
    "@tiptap/extension-italic" "^2.0.0-beta.204"
    "@tiptap/extension-list-item" "^2.0.0-beta.204"
    "@tiptap/extension-ordered-list" "^2.0.0-beta.204"
    "@tiptap/extension-paragraph" "^2.0.0-beta.204"
    "@tiptap/extension-strike" "^2.0.0-beta.204"
    "@tiptap/extension-text" "^2.0.0-beta.204"
...

...and so those deps resolves to @tiptap/...@...-beta-205 which do not include prosemirror-... in their deps.

We had success with locking down our direct @tiptap/... deps to exactly 2.0.0-beta-204 (notice no semver prefix character) in our package.json and then manually installing all the missing prosemirror-... deps, for us it was:

...
    "prosemirror-commands": "^1.3.1",
    "prosemirror-dropcursor": "1.5.0",
    "prosemirror-gapcursor": "^1.3.1",
    "prosemirror-history": "^1.3.0",
    "prosemirror-keymap": "^1.2.0",
    "prosemirror-model": "^1.18.1",
    "prosemirror-schema-list": "^1.2.2",
    "prosemirror-state": "^1.4.1",
    "prosemirror-transform": "^1.7.0",
    "prosemirror-view": "^1.28.2",
...

Hope this helps someone.

tiendatleo commented 1 year ago

We are having the same issue on ^2.0.0-beta.84

Haraldson commented 1 year ago

@nikolakanacki Thanks for the help, but for me this doesn’t change anything, I still get the RangeError: Adding different instances of a keyed plugin (plugin$) error.

There’s a possibility I’m the only one in this thread using any of the @tiptap-pro extensions (I’m using both emoji and unique-id), and that somehow those aren’t updated in the same way as the public ones? If so, please advice.

DutchGerman commented 1 year ago

Have the same issue @Haraldson describes (VueJS 2.7 + Vite), also added the prosemirror deps to our package.json

DutchGerman commented 1 year ago

It seems that prosemirror-state loads with multiple versions, adding the following resolutions to the package.json works for me:

  "resolutions": {
    "prosemirror-model": "1.18.1",
    "prosemirror-state": "1.4.1",
    "prosemirror-transform": "1.7.0",
    "prosemirror-view": "1.28.2"
  }
PatrykKeska commented 1 year ago

I spent over two hours trying to fix it, finally worked for me. I hope I have saved some time for someone. By the way. I did use it in Next.js version 13

"dependencies": {
        "@tiptap/core": "^2.0.0-beta.207",
        "@tiptap/react": "^2.0.0-beta.207",
        "@tiptap/starter-kit": "^2.0.0-beta.207",
        "prosemirror-commands": "^1.5.0",
        "prosemirror-dropcursor": "^1.6.1",
        "prosemirror-gapcursor": "^1.3.1",
        "prosemirror-history": "^1.3.0",
        "prosemirror-keymap": "^1.2.0",
        "prosemirror-schema-list": "^1.2.2",
    },

What I did step by step : 1.

yarn add prosemirror-commands prosemirror-keymap prosemirror-model prosemirror-schema-list prosemirror-state prosemirror-transform prosemirror-view

2.for starter-kit :

yarn add prosemirror-history prosemirror-dropcursor prosemirror-gapcursor

3.

yarn add  @tiptap/core @tiptap/starter-kit

4.

yarn add @tiptap/react
Naddiseo commented 1 year ago

@PatrykKeska, did that get rid of the "XXXX doesn't provide YYY, requested by ZZZZ" message that yarn emits for you? I tried following your steps and I see:

➤ YN0000: ┌ Resolution step
➤ YN0002: │ @tiptap/react@npm:2.0.0-beta.207 [437d0] doesn't provide prosemirror-state (pe7855), requested by @tiptap/extension-floating-menu
➤ YN0002: │ @tiptap/starter-kit@npm:2.0.0-beta.207 doesn't provide prosemirror-commands (p0602a), requested by @tiptap/core
➤ YN0002: │ @tiptap/starter-kit@npm:2.0.0-beta.207 doesn't provide prosemirror-dropcursor (p9cbc1), requested by @tiptap/extension-dropcursor
➤ YN0002: │ @tiptap/starter-kit@npm:2.0.0-beta.207 doesn't provide prosemirror-gapcursor (pcbc8d), requested by @tiptap/extension-gapcursor
➤ YN0002: │ @tiptap/starter-kit@npm:2.0.0-beta.207 doesn't provide prosemirror-history (p7b6a5), requested by @tiptap/extension-history
➤ YN0002: │ @tiptap/starter-kit@npm:2.0.0-beta.207 doesn't provide prosemirror-keymap (p51b89), requested by @tiptap/core
➤ YN0002: │ @tiptap/starter-kit@npm:2.0.0-beta.207 doesn't provide prosemirror-model (pbdbb4), requested by @tiptap/core
➤ YN0002: │ @tiptap/starter-kit@npm:2.0.0-beta.207 doesn't provide prosemirror-schema-list (pb00bd), requested by @tiptap/core
➤ YN0002: │ @tiptap/starter-kit@npm:2.0.0-beta.207 doesn't provide prosemirror-state (p63819), requested by @tiptap/core
➤ YN0002: │ @tiptap/starter-kit@npm:2.0.0-beta.207 doesn't provide prosemirror-state (p7b431), requested by @tiptap/extension-code-block
➤ YN0002: │ @tiptap/starter-kit@npm:2.0.0-beta.207 doesn't provide prosemirror-state (pe219f), requested by @tiptap/extension-horizontal-rule
➤ YN0002: │ @tiptap/starter-kit@npm:2.0.0-beta.207 doesn't provide prosemirror-transform (p66fe5), requested by @tiptap/core
➤ YN0002: │ @tiptap/starter-kit@npm:2.0.0-beta.207 doesn't provide prosemirror-view (ped8c5), requested by @tiptap/core
PatrykKeska commented 1 year ago

@PatrykKeska, did that get rid of the "XXXX doesn't provide YYY, requested by ZZZZ" message that yarn emits for you? I tried following your steps and I see:

➤ YN0000: ┌ Resolution step
➤ YN0002: │ @tiptap/react@npm:2.0.0-beta.207 [437d0] doesn't provide prosemirror-state (pe7855), requested by @tiptap/extension-floating-menu
➤ YN0002: │ @tiptap/starter-kit@npm:2.0.0-beta.207 doesn't provide prosemirror-commands (p0602a), requested by @tiptap/core
➤ YN0002: │ @tiptap/starter-kit@npm:2.0.0-beta.207 doesn't provide prosemirror-dropcursor (p9cbc1), requested by @tiptap/extension-dropcursor
➤ YN0002: │ @tiptap/starter-kit@npm:2.0.0-beta.207 doesn't provide prosemirror-gapcursor (pcbc8d), requested by @tiptap/extension-gapcursor
➤ YN0002: │ @tiptap/starter-kit@npm:2.0.0-beta.207 doesn't provide prosemirror-history (p7b6a5), requested by @tiptap/extension-history
➤ YN0002: │ @tiptap/starter-kit@npm:2.0.0-beta.207 doesn't provide prosemirror-keymap (p51b89), requested by @tiptap/core
➤ YN0002: │ @tiptap/starter-kit@npm:2.0.0-beta.207 doesn't provide prosemirror-model (pbdbb4), requested by @tiptap/core
➤ YN0002: │ @tiptap/starter-kit@npm:2.0.0-beta.207 doesn't provide prosemirror-schema-list (pb00bd), requested by @tiptap/core
➤ YN0002: │ @tiptap/starter-kit@npm:2.0.0-beta.207 doesn't provide prosemirror-state (p63819), requested by @tiptap/core
➤ YN0002: │ @tiptap/starter-kit@npm:2.0.0-beta.207 doesn't provide prosemirror-state (p7b431), requested by @tiptap/extension-code-block
➤ YN0002: │ @tiptap/starter-kit@npm:2.0.0-beta.207 doesn't provide prosemirror-state (pe219f), requested by @tiptap/extension-horizontal-rule
➤ YN0002: │ @tiptap/starter-kit@npm:2.0.0-beta.207 doesn't provide prosemirror-transform (p66fe5), requested by @tiptap/core
➤ YN0002: │ @tiptap/starter-kit@npm:2.0.0-beta.207 doesn't provide prosemirror-view (ped8c5), requested by @tiptap/core

Right now, I did create a new project in Next.js, and I got only one warning : 


warning "@tiptap/starter-kit > @tiptap/extension-dropcursor@2.0.0-beta.207" has incorrect peer dependency "prosemirror-dropcursor@1.5.0".

Did you try to use it after that? is it work? I've checked a few projects, and for now, it is ok

Update: I did try to install steps: 3,4,1,2, and only then I got those warnings as well.

Naddiseo commented 1 year ago

to everyone following this bug: sorry for spamming you again.

@PatrykKeska, I followed your steps in order, however I have an older version already installed. I've now tried to remove the older version, removing the node_modules folder, and the yarn.lock file, and I'm still getting the yarn warnings.

For now I think I'm going to stick with the older version (beta-204) until the peer-dependency mess the later versions have is improved

PatrykKeska commented 1 year ago

to everyone following this bug: sorry for spamming you again.

@PatrykKeska, I followed your steps in order, however I have an older version already installed. I've now tried to remove the older version, removing the node_modules folder, and the yarn.lock file, and I'm still getting the yarn warnings.

For now I think I'm going to stick with the older version (beta-204) until the peer-dependency mess the later versions have is improved

I tried a few older versions and got the same error when using the component. In the end, this way is working fine in Next.js 13, but honestly, I have yet to learn if it is only my case or not.

You got warnings but is it working or not?

JenuelDev commented 1 year ago

Any update on this? I am having issues... It would be awesome if this will be fixed early. I am using Vite + Vue3 + TypeScript, followed the Vue 3 installation in the documentation but having an error.

janthurau commented 1 year ago

Any update on this? I am having issues... It would be awesome if this will be fixed early.

I am using Vite + Vue3 + TypeScript, followed the Vue 3 installation in the documentation but having an error.

Can you share package.json, command and exact error message? @BroJenuel

JenuelDev commented 1 year ago

Any update on this? I am having issues... It would be awesome if this will be fixed early.

I am using Vite + Vue3 + TypeScript, followed the Vue 3 installation in the documentation but having an error.

Can you share package.json, command and exact error message? @BroJenuel

I believe there is a missing package in vue-3 cause I have to install some prosmirrorr packages to make it work...

The error was it can't resolve some prosmirror packages because it does not exist.

baloglu commented 1 year ago

I am having the same issue (Can't resolve 'prosemirror-XXX) following the vue js 3 installation guide. Vue version 3.2.13 and tiptap version 2.0.0-beta.209.

janthurau commented 1 year ago

@baloglu @BroJenuel if you followed the tiptap installation instructions (https://tiptap.dev/installation#1-install-the-dependencies) and still have issues, please share package.json, executed command and full error message.

JenuelDev commented 1 year ago

@baloglu @BroJenuel if you followed the tiptap installation instructions (https://tiptap.dev/installation#1-install-the-dependencies) and still have issues, please share package.json, executed command and full error message.

@janthurau yup, its working now,, This should be added on the (vue 3 + vite) installation guide. maybe add a note, that if a warning shows not found package, install the packges.

MaximeStl commented 1 year ago

For running TipTap with Vite + Vue3 + TypeScript, you must add this dependencies : npm install prosemirror-commands prosemirror-keymap prosemirror-model prosemirror-schema-list prosemirror-state prosemirror-transform prosemirror-view prosemirror-dropcursor prosemirror-gapcursor prosemirror-history

And it's will work like a charm !

JenuelDev commented 1 year ago

For running TipTap with Vite + Vue3 + TypeScript, you must add this dependencies : npm install prosemirror-commands prosemirror-keymap prosemirror-model prosemirror-schema-list prosemirror-state prosemirror-transform prosemirror-view prosemirror-dropcursor prosemirror-gapcursor prosemirror-history

And it's will work like a charm !

Yup, thats what I did.. Add this on the documentaion in vue 3 instalolation guide for vite,.. that way people using vue 3 vite typescript will easily find the solution.

CharlieBrownCharacter commented 1 year ago

@janthurau Im facing the same issue but for @tiptap/extension-code-block-lowlight extension and the error seems to be coming from lowlight library.

I'm using Vite + Vue 3 + Typescript + Quasar (although I don't think it matters here).

My package.json:

{
  ...
  "dependencies": {
    "@quasar/extras": "1.15.8",
    "@tiptap/extension-bullet-list": "^2.0.0-beta.209",
    "@tiptap/extension-code-block-lowlight": "^2.0.0-beta.209",
    "@tiptap/extension-heading": "^2.0.0-beta.209",
    "@tiptap/extension-link": "^2.0.0-beta.209",
    "@tiptap/extension-list-item": "^2.0.0-beta.209",
    "@tiptap/starter-kit": "2.0.0-beta.204",
    "@tiptap/vue-3": "2.0.0-beta.204",
    "@vueuse/core": "^9.1.1",
    "@vueuse/router": "^8.1.2",
    "lowlight": "^2.8.0",
    "prosemirror-commands": "^1.3.1",
    "prosemirror-dropcursor": "1.5.0",
    "prosemirror-gapcursor": "^1.3.1",
    "prosemirror-history": "^1.3.0",
    "prosemirror-keymap": "^1.2.0",
    "prosemirror-model": "^1.18.1",
    "prosemirror-schema-list": "^1.2.2",
    "prosemirror-state": "^1.4.1",
    "prosemirror-transform": "^1.7.0",
    "prosemirror-view": "^1.28.2",
  },
  "engines": {
    "node": "^18 || ^16 || ^14.19",
    "npm": ">= 6.13.4",
    "yarn": ">= 1.21.1"
  }
}

Building the project with ENV_FILE=test quasar build --mode ssr --port 3000 works fine but when I run node dist/ssr/index.js I get the following error:

Error [ERR_REQUIRE_ESM]: Must use import to load ES Module: /home/whatever/devotto/devotto.com/node_modules/lowlight/lib/common.js
require() of ES modules is not supported.
require() of /home/whatever/devotto/devotto.com/node_modules/lowlight/lib/common.js from /home/whatever/devotto/devotto.com/dist/ssr/server/server-entry.js is an ES module file as it is a .js file whose nearest parent package.json contains "type": "module" which defines all .js files in that package scope as ES modules.
Instead rename common.js to end in .cjs, change the requiring code to use import(), or remove "type": "module" from /home/whatever/devotto/devotto.com/node_modules/lowlight/package.json.

    at new NodeError (internal/errors.js:322:7)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1102:13)
    at Module.load (internal/modules/cjs/loader.js:950:32)
    at Function.Module._load (internal/modules/cjs/loader.js:790:12)
    at Module.require (internal/modules/cjs/loader.js:974:19)
    at require (internal/modules/cjs/helpers.js:101:18)
    at Module.<anonymous> (/home/whatever/devotto/devotto.com/dist/ssr/server/server-entry.js:1:1349)
    at Module._compile (internal/modules/cjs/loader.js:1085:14)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1114:10)
    at Module.load (internal/modules/cjs/loader.js:950:32) {
  code: 'ERR_REQUIRE_ESM'
}
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! devotto-com@0.0.1 start:test:webserver: `ENV_FILE=test quasar build --mode ssr --port 3000 && node dist/ssr/index.js`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the devotto-com@0.0.1 start:test:webserver script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/whatever/.npm/_logs/2022-12-21T12_59_23_713Z-debug.log
Error: server closed unexpectedly
    at ChildProcess.onClose (/home/whatever/devotto/devotto.com/node_modules/start-server-and-test/src/index.js:75:14)
    at ChildProcess.emit (events.js:400:28)
    at maybeClose (internal/child_process.js:1058:16)
    at Process.ChildProcess._handle.onexit (internal/child_process.js:293:5)
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

I have opened an issue here as well https://github.com/ueberdosis/tiptap/issues/3563. Depending if I can get an answer here I will update the issue on the other end

SalahAdDin commented 1 year ago

I spent over two hours trying to fix it, finally worked for me. I hope I have saved some time for someone. By the way. I did use it in Next.js version 13

"dependencies": {
        "@tiptap/core": "^2.0.0-beta.207",
        "@tiptap/react": "^2.0.0-beta.207",
        "@tiptap/starter-kit": "^2.0.0-beta.207",
        "prosemirror-commands": "^1.5.0",
        "prosemirror-dropcursor": "^1.6.1",
        "prosemirror-gapcursor": "^1.3.1",
        "prosemirror-history": "^1.3.0",
        "prosemirror-keymap": "^1.2.0",
        "prosemirror-schema-list": "^1.2.2",
    },

What I did step by step : 1.

yarn add prosemirror-commands prosemirror-keymap prosemirror-model prosemirror-schema-list prosemirror-state prosemirror-transform prosemirror-view

2.for starter-kit :

yarn add prosemirror-history prosemirror-dropcursor prosemirror-gapcursor
yarn add  @tiptap/core @tiptap/starter-kit
yarn add @tiptap/react

Have the same but it still does not work for Gapcursor extension.

svenadlung commented 1 year ago

Have the same but it still does not work for Gapcursor extension.

What exactly is not working? There is only one dependency to ProseMirror, which is a peer dependency: https://github.com/ueberdosis/tiptap/blob/main/packages/extension-gapcursor/package.json#L33

Did you add prosemirror-gapcursor?

SalahAdDin commented 1 year ago

Have the same but it still does not work for Gapcursor extension.

What exactly is not working? There is only one dependency to ProseMirror, which is a peer dependency: https://github.com/ueberdosis/tiptap/blob/main/packages/extension-gapcursor/package.json#L33

Did you add prosemirror-gapcursor?

  "dependencies": {
    "@strapi/icons": "1.4.1",
    "@tiptap/core": "2.0.0-beta.209",
    "@tiptap/extension-blockquote": "2.0.0-beta.209",
    "@tiptap/extension-bold": "2.0.0-beta.209",
    "@tiptap/extension-bullet-list": "2.0.0-beta.209",
    "@tiptap/extension-character-count": "2.0.0-beta.209",
    "@tiptap/extension-code": "2.0.0-beta.209",
    "@tiptap/extension-code-block": "2.0.0-beta.209",
    "@tiptap/extension-color": "2.0.0-beta.209",
    "@tiptap/extension-document": "2.0.0-beta.209",
    "@tiptap/extension-gapcursor": "2.0.0-beta.209",
    "@tiptap/extension-hard-break": "2.0.0-beta.209",
    "@tiptap/extension-heading": "2.0.0-beta.209",
    "@tiptap/extension-history": "2.0.0-beta.209",
    "@tiptap/extension-horizontal-rule": "2.0.0-beta.209",
    "@tiptap/extension-image": "2.0.0-beta.209",
    "@tiptap/extension-italic": "2.0.0-beta.209",
    "@tiptap/extension-link": "2.0.0-beta.209",
    "@tiptap/extension-list-item": "2.0.0-beta.209",
    "@tiptap/extension-ordered-list": "2.0.0-beta.209",
    "@tiptap/extension-paragraph": "2.0.0-beta.209",
    "@tiptap/extension-strike": "2.0.0-beta.209",
    "@tiptap/extension-table": "2.0.0-beta.209",
    "@tiptap/extension-table-cell": "2.0.0-beta.209",
    "@tiptap/extension-table-header": "2.0.0-beta.209",
    "@tiptap/extension-table-row": "2.0.0-beta.209",
    "@tiptap/extension-text": "2.0.0-beta.209",
    "@tiptap/extension-text-align": "2.0.0-beta.209",
    "@tiptap/extension-text-style": "2.0.0-beta.209",
    "@tiptap/extension-underline": "2.0.0-beta.209",
    "@tiptap/extension-youtube": "2.0.0-beta.209",
    "@tiptap/prosemirror-tables": "1.1.3",
    "@tiptap/react": "2.0.0-beta.209",
    "prosemirror-commands": "1.5.0",
    "prosemirror-gapcursor": "1.3.1",
    "prosemirror-history": "1.3.0",
    "prosemirror-keymap": "1.2.0",
    "prosemirror-model": "1.18.3",
    "prosemirror-schema-list": "1.2.2",
    "prosemirror-state": "1.4.2",
    "prosemirror-transform": "1.7.0",
    "prosemirror-view": "1.29.1",
    "react-icons": "4.7.1"
  },

Yeah, it is installed.

sahilpurav commented 1 year ago

I was using yarn. I switched to npm@8 which installs all peer dependancies by default. Before that I removed, package-lock.json and node_modules folder and reinstalled with npm install

SalahAdDin commented 1 year ago

I was using yarn. I switched to npm@8 which installs all peer dependencies by default. Before that, I removed, package-lock.json and node_modules folders and reinstalled them with npm install

Do we need still to install the prosemirror dependencies?

sahilpurav commented 1 year ago

I was using yarn. I switched to npm@8 which installs all peer dependencies by default. Before that, I removed, package-lock.json and node_modules folders and reinstalled them with npm install

Do we need still to install the prosemirror dependencies?

Not for me. It was automatically installed by "npm". Since npm@7, peerDependancies are automatically installed. So I did not have to install prosemirror dependancies manually.

SalahAdDin commented 1 year ago

I was using yarn. I switched to npm@8 which installs all peer dependencies by default. Before that, I removed, package-lock.json and node_modules folders and reinstalled them with npm install

Do we need still to install the prosemirror dependencies?

Not for me. It was automatically installed by "npm". Since npm@7, peerDependancies are automatically installed. So I did not have to install prosemirror dependancies manually.

Ok, it didn't give me any problem with npm, about prosemirror dependencies, but I still get Adding different instances of a keyed plugin (plugin$).

For yarn, installing the prosemirror dependencies is a must.

sahilpurav commented 1 year ago

I was using yarn. I switched to npm@8 which installs all peer dependencies by default. Before that, I removed, package-lock.json and node_modules folders and reinstalled them with npm install

Do we need still to install the prosemirror dependencies?

Not for me. It was automatically installed by "npm". Since npm@7, peerDependancies are automatically installed. So I did not have to install prosemirror dependancies manually.

Ok, it didn't give me any problem with npm, about prosemirror dependencies, but I still get Adding different instances of a keyed plugin (plugin$).

For yarn, installing the prosemirror dependencies is a must.

Yes there's a definite problem when I use yarn. I have not faced a problem you mentioned, perhaps it is specific to your project and plugins.

elzodxon commented 1 year ago

I am having the same issue in my project.

I am using, Vue 3 + Vite + TS

KrisCoulson commented 1 year ago

Just ran into this issue, manually adding all of the missing prose-mirror dependency solved this for me.

yarn add prosemirror-commands prosemirror-history prosemirror-keymap prosemirror-model prosemirror-schema-list prosemirror-state prosemirror-transform prosemirror-view

This should be a higher priority bug given that it broken so many project as indicated by how many people have come to this issue.

madeleineostoja commented 1 year ago

Tbh moving from deps to peer deps should have been a breaking semver change

EDIT: Totally forgot we’re dealing with a pre release version, ignore this

SalahAdDin commented 1 year ago

Tbh moving from deps to peer deps should have been a breaking semver change

Or at least, giving a warning recommendation in the CHANGELOG and documentation.

svenadlung commented 1 year ago

@KrisCoulson I don't think it's correct to call the changes a bug. We understand the displeasure, as some users need to adjust their setup. We are also working on a solution that will make the situation a bit more comfortable (a package for ProseMirror dependencies).

@madeleineostoja As far as I know the semver spec does not provide a solution for breaking changes in pre releases, does it? When Tiptap leaves beta state, such changes would of course be incremented to the major version.

@SalahAdDin I agree that we could have communicated the Breaking Change better in the changelogs.

However, in the docs, this has happened in many places through highlighted boxes (f.ex. https://tiptap.dev/installation/react#2-install-the-dependencies) and a dedicated page (https://tiptap.dev/installation/peer-dependencies) with an explanation. Did we possibly miss any places?

Naddiseo commented 1 year ago

@svenadlung, unfortunately the peer-dependencies documentation still gives warning on yarn (v3):

$ yarn add prosemirror-commands prosemirror-keymap prosemirror-model prosemirror-schema-list prosemirror-state prosemirror-transform prosemirror-view
$ yarn add prosemirror-history prosemirror-dropcursor prosemirror-gapcursor
$ yarn
➤ YN0000: ┌ Resolution step
➤ YN0002: │ @tiptap/react@npm:2.0.0-beta.209 [437d0] doesn't provide prosemirror-state (pcc6ea), requested by @tiptap/extension-floating-menu
➤ YN0002: │ @tiptap/starter-kit@npm:2.0.0-beta.209 doesn't provide prosemirror-commands (p451e8), requested by @tiptap/core
➤ YN0002: │ @tiptap/starter-kit@npm:2.0.0-beta.209 doesn't provide prosemirror-dropcursor (p2359c), requested by @tiptap/extension-dropcursor
➤ YN0002: │ @tiptap/starter-kit@npm:2.0.0-beta.209 doesn't provide prosemirror-gapcursor (pbb60d), requested by @tiptap/extension-gapcursor
➤ YN0002: │ @tiptap/starter-kit@npm:2.0.0-beta.209 doesn't provide prosemirror-history (p489c9), requested by @tiptap/extension-history
➤ YN0002: │ @tiptap/starter-kit@npm:2.0.0-beta.209 doesn't provide prosemirror-keymap (pff287), requested by @tiptap/core
➤ YN0002: │ @tiptap/starter-kit@npm:2.0.0-beta.209 doesn't provide prosemirror-model (p1c800), requested by @tiptap/core
➤ YN0002: │ @tiptap/starter-kit@npm:2.0.0-beta.209 doesn't provide prosemirror-schema-list (p788f6), requested by @tiptap/core
➤ YN0002: │ @tiptap/starter-kit@npm:2.0.0-beta.209 doesn't provide prosemirror-state (p3bc43), requested by @tiptap/core
➤ YN0002: │ @tiptap/starter-kit@npm:2.0.0-beta.209 doesn't provide prosemirror-state (pa8d12), requested by @tiptap/extension-code-block
➤ YN0002: │ @tiptap/starter-kit@npm:2.0.0-beta.209 doesn't provide prosemirror-state (p354c9), requested by @tiptap/extension-horizontal-rule
➤ YN0002: │ @tiptap/starter-kit@npm:2.0.0-beta.209 doesn't provide prosemirror-transform (pd0b52), requested by @tiptap/core
➤ YN0002: │ @tiptap/starter-kit@npm:2.0.0-beta.209 doesn't provide prosemirror-view (p35525), requested by @tiptap/core
➤ YN0000: │ Some peer dependencies are incorrectly met; run yarn explain peer-requirements <hash> for details, where <hash> is the six-letter p-prefixed code
➤ YN0000: └ Completed in 0s 317ms

package.json

{
"dependencies": {
    "//..others": "",
    "@tiptap/core": "2.0.0-beta.209",
    "@tiptap/extension-color": "^2.0.0-beta.209",
    "@tiptap/extension-text-style": "^2.0.0-beta.209",
    "@tiptap/react": "2.0.0-beta.209",
    "@tiptap/starter-kit": "2.0.0-beta.209",
    "next": "^12.3.4",
    "next-auth": "4.18.7",
    "prosemirror-commands": "^1.5.0",
    "prosemirror-dropcursor": "^1.6.1",
    "prosemirror-gapcursor": "^1.3.1",
    "prosemirror-history": "^1.3.0",
    "prosemirror-keymap": "^1.2.0",
    "prosemirror-model": "^1.18.3",
    "prosemirror-schema-list": "^1.2.2",
    "prosemirror-state": "^1.4.2",
    "prosemirror-transform": "^1.7.0",
    "prosemirror-view": "^1.29.1",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-hook-form": "^7.41.3",
    "//..others": ""
  },
}
madeleineostoja commented 1 year ago

Oop my bad I forgot tiptap v2 was still in beta! I just saw so many comments on this issue.

In that case yeah you use pre release you expect a rocky road 👍🏼