TipTap is not working on react with vite project. #3492
Comments
TroublesomeSaramsh789
added
the
Type: Bug
|
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 Is this change intended? |
|
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 |
|
Same for a Remix site. Moving required dependencies into |
|
I'm having the same issue, switching back to |
|
We're having the same issue in our monorepo with pnpm on |
|
Same here, had to add them temporarily to my dependencies: |
|
Same here. I had to roll back and lock the version to |
|
Same issue here at |
|
Same Error here at |
|
I’m not sure how the sub-versioning of the |
|
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, ueberdosis/hocuspocus#445, #577, #3209). Im not aware of another solution to this, if there is one, let me know! 🙏 What you have to do now: When running |
|
I’m getting no such warning from yarn, @janthurau. |
|
hmm, I just ran a test - with npm, I cannot reproduce any issue at all (tried the instructions from the initial post here). |
|
I’ve now tried some different things to get the editor up and running again;
The runtime error I’m getting:
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. |
|
Same issue here vue3 app + vite. Works fine on my machine but gives these errors when using inside a docker. Imho these should be deps of tiptap if it doesn't work without those. |
|
My project doesn't use vite and it also broke. It's weird because we are using |
|
@Haraldson and anyone else who stumps upon this: Even if you lock down all ...and so those deps resolves to We had success with locking down our direct Hope this helps someone. |
|
We are having the same issue on ^2.0.0-beta.84 |
|
@nikolakanacki Thanks for the help, but for me this doesn’t change anything, I still get the There’s a possibility I’m the only one in this thread using any of the |
|
Have the same issue @Haraldson describes (VueJS 2.7 + Vite), also added the prosemirror deps to our package.json |
|
It seems that "resolutions": {
"prosemirror-model": "1.18.1",
"prosemirror-state": "1.4.1",
"prosemirror-transform": "1.7.0",
"prosemirror-view": "1.28.2"
} |
|
I spent over two hours trying to fix it, finally worked for me. I hope I have saved some time for someone. What I did step by step : 2.for starter-kit : |
|
@PatrykKeska, did that get rid of the "XXXX doesn't provide YYY, requested by ZZZZ" message that yarn emits for you? |
Right now, I did create a new project in Next.js, and I got only one warning : Did you try to use it after that? is it work? Update: I did try to install steps: 3,4,1,2, and only then I got those warnings as well. |
|
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. You got warnings but is it working or not? |
|
Any update on this? I am having issues... It would be awesome if this will be fixed early. |
Have the same but it still does not work for |
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 |
"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. |
|
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 |
Do we need still to install the |
Not for me. It was automatically installed by "npm". Since npm@7, peerDependancies are automatically installed. So I did not have to install |
Ok, it didn't give me any problem with For |
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. |
|
I am having the same issue in my project. I am using, Vue 3 + Vite + TS |
|
Just ran into this issue, manually adding all of the missing prose-mirror dependency solved this for me. 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. |
|
EDIT: Totally forgot we’re dealing with a pre release version, ignore this |
Or at least, giving a warning recommendation in the |
|
@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? |
|
@svenadlung, unfortunately the peer-dependencies documentation still gives warning on yarn (v3): 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": ""
},
} |
|
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 👍🏼 |
* chore: install cssnano and setup * chore: install prosemirror- packages ueberdosis/tiptap#3492 * Lazyload toaster, dialogs * Remove "import *"
|
|
|
This issue should be locked as it has now a proper fix. Install 📚 https://github.com/ueberdosis/tiptap/releases/tag/v2.0.0-beta.210 |
|
@RomainLanz, still an issue when using yarn: |
|
As said, install |
|
@RomainLanz I did, it's the second entry in the yarn add command |
|
The issues mentioned above should have been fixed with the last releases. Please leave a message, if not, I will open again. |
npm add prosemirror-commands prosemirror-history prosemirror-keymap prosemirror-model prosemirror-schema-list prosemirror-state prosemirror-transform prosemirror-view ueberdosis/tiptap#3492
and others
What’s the bug you are facing?
X [ERROR] Could not resolve "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"
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"
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"
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"
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"
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?
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?
Are you sponsoring us?
The text was updated successfully, but these errors were encountered: