tiptap: TipTap is not working on react with vite project.
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?
- create a vite project.
- yarn add @tiptap/react @tiptap/starter-kit
- Import these
import { useEditor, EditorContent } from '@tiptap/react';
import StarterKit from '@tiptap/starter-kit';
const Tiptap = () => {
const editor = useEditor({
extensions: [StarterKit],
content: '<p>Hello World!</p>',
});
return <EditorContent editor={editor} />;
};
export default Tiptap;
- 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?
- Yes, I’ve updated my dependencies to use the latest version of all packages.
Are you sponsoring us?
- Yes, I’m a sponsor. 💖
About this issue
- Original URL
- State: closed
- Created 2 years ago
- Reactions: 37
- Comments: 56 (3 by maintainers)
Commits related to this issue
- chore: install prosemirror- packages https://github.com/ueberdosis/tiptap/issues/3492 — committed to proke03/starsound by proke03 a year ago
- fix: lighthouse performance issues (#223) * chore: install cssnano and setup * chore: install prosemirror- packages https://github.com/ueberdosis/tiptap/issues/3492 * Lazyload toaster, dialogs... — committed to proke03/starsound by proke03 a year ago
- npm i tiptap/pm https://github.com/ueberdosis/tiptap/issues/3492 — committed to ECMaker/blog by u-ecmaker a year ago
- 一個前でoKだった！整理。npm i tiptap/pm だけに戻す。 https://github.com/ueberdosis/tiptap/issues/3492 — committed to ECMaker/blog by u-ecmaker a year ago
- npm i @tiptap/pm だけではだめだった。依存関係をすべて追加。 npm add prosemirror-commands prosemirror-history prosemirror-keymap prosemirror-model prosemirror-schema-list prosemirror-state prosemirror-transform pr... — committed to ECMaker/blog by u-ecmaker a 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
What I did step by step : 1.
2.for starter-kit :
Same here, had to add them temporarily to my dependencies:
@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-204still has carets in its deps, fromyarn.lock:…and so those deps resolves to
@tiptap/...@...-beta-205which do not includeprosemirror-...in their deps.We had success with locking down our direct
@tiptap/...deps to exactly2.0.0-beta-204(notice no semver prefix character) in ourpackage.jsonand then manually installing all the missingprosemirror-...deps, for us it was:Hope this helps someone.
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 ):
Imho these should be deps of tiptap if it doesn’t work without those.
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.
@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?
This issue should be locked as it has now a proper fix.
Install
@tiptap/pmand you are done.📚 https://github.com/ueberdosis/tiptap/releases/tag/v2.0.0-beta.210
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 !
@Naddiseo
As said, install
@tiptap/pm.@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-proextensions (I’m using bothemojiandunique-id), and that somehow those aren’t updated in the same way as the public ones? If so, please advice.I’m having the same issue, switching back to
2.0.0-beta.204doesn’t solve the issue, I had to add all theprosemirror-*packages to the dependenciesWe 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
dependenciesintodevDependencies+peerDependencies(which is not equivalent)Is this change intended?
The issues mentioned above should have been fixed with the last releases. Please leave a message, if not, I will open again.
@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.
It seems that
prosemirror-stateloads with multiple versions, adding the following resolutions to the package.json works for me: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 installin your project, npm should complain aboutUNMET PEER DEPENDENCY, so just require them yourself and the error should be gone.We’re having the same issue in our monorepo with pnpm on
2.0.0-beta.202.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
@RomainLanz I did, it’s the second entry in the yarn add command
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 👍🏼
Tbh moving from deps to peer deps should have been a breaking semver changeEDIT: Totally forgot we’re dealing with a pre release version, ignore this
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.
Have the same but it still does not work for
Gapcursorextension.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?