tiptap: beta-210 release broke builds on Next.js (and possibly others)

What’s the bug you are facing?

When using latest Tiptap version (beta-210 or 211) with extension-collaboration, it breaks on Next.js 13.

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

Firefox

How can we reproduce the bug on our side?

npx create-next-app tiptap-test
npm install @tiptap/core @tiptap/pm @tiptap/starter-kit
npm install @tiptap/extension-collaboration yjs

Create a Tiptap component that just sets up StarterKit and Collaboration

You will face the issue - Module not found - Can’t resolve perf_hooks.

Can you provide a CodeSandbox?

No response

What did you expect to happen?

Should’ve worked.

Anything to add? (optional)

I tried using Next dynamic imports as well, to no avail.

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 a year ago
  • Reactions: 9
  • Comments: 41 (11 by maintainers)

Most upvoted comments

The getting started guide for Next.js is now also broken. Resulting in a wrong Lodash import originating from the bubble-menu extension.

Did you mean to import lodash/debounce.js?

The getting started guide for Next.js is now also broken. Resulting in a wrong Lodash import originating from the bubble-menu extension.

Did you mean to import lodash/debounce.js?

I started getting this error too.

Experiencing the same with lodash. We will have a look – thanks for reporting!

@acirinelli could you try @stepanjakl 's fix while I work on this issue? https://github.com/ueberdosis/tiptap/issues/3689#issuecomment-1414492414

I’ll keep you updated.

+1 Same issue as a dependency to the @tiptap/vue-2 package. Downgrading to version 2.0.0-beta.209 helped. I just overode the peer dependency in the package.json file, like so:

"overrides": {
    "@tiptap/vue-2": {
      "@tiptap/extension-bubble-menu": "2.0.0-beta.209"
    }
  }

@bdbch I’m having the same issue as @harryyaprakov

@tiptap/pm is not present in the node_modules.

Manually adding seemed to fix my build.

@Bessonov thank you, that solved the @tiptap/pm/state issue, but now I have the issue with the ESM build and lodash

Error [ERR_REQUIRE_ESM]: require() of ES Module <folder>/node_modules/.pnpm/lodash-es@4.17.21/node_modules/lodash-es/lodash.js from <folder>/node_modules/.pnpm/@tiptap+extension-bubble-menu@2.0.0-beta.213_7rz66h33fpkvqmmazdnqczeig4/node_modules/@tiptap/extension-bubble-menu/dist/index.cjs not supported.
Instead change the require of lodash.js in <folder>/node_modules/.pnpm/@tiptap+extension-bubble-menu@2.0.0-beta.213_7rz66h33fpkvqmmazdnqczeig4/node_modules/@tiptap/extension-bubble-menu/dist/index.cjs to a dynamic import() which is available in all CommonJS modules.

You’re not alone: https://github.com/ueberdosis/tiptap/pull/3699#issuecomment-1420562078

I got this output in Vitest using beta.215 (beta.213 works ok). The output is related to node_modules/@tiptap/extension-bubble-menu/dist/index.js:3

import { debounce } from 'lodash';
         ^^^^^^^^
SyntaxError: Named export 'debounce' not found. The requested module 'lodash' is a CommonJS module, which may not support all module.exports as named exports.
CommonJS modules can always be imported via the default export, for example using:

import pkg from 'lodash';
const { debounce } = pkg;

I still have an issue with @tiptap/pm/state:

error - ../node_modules/.pnpm/@tiptap+core@2.0.0-beta.213/node_modules/@tiptap/core/dist/index.js:150:0
Module not found: Can't resolve '@tiptap/pm/state'

Did you saw https://github.com/ueberdosis/tiptap/issues/3701#issuecomment-1416503614 ?

this seems to fix it 🎉

That fixed it for me! Thanks 😃

Could you update to beta.217 and try again?

I released a quick fix for this with version beta.213 - could you guys test this again?

I just updated my libraries (updated to beta.211) and now I get the following error:

ERROR in ./node_modules/@tiptap/extension-bubble-menu/dist/index.js 11:0-39
Module not found: Error: Can't resolve 'lodash/debounce' in '/Users/Bob.Roth/projects/svmx-dg-template-editor/node_modules/@tiptap/extension-bubble-menu/dist'
Did you mean 'debounce.js'?
BREAKING CHANGE: The request 'lodash/debounce' failed to resolve only because it was resolved as fully specified
(probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, a '*.mjs' file, or a '*.js' file where the package.json contains '"type": "module"').
The extension in the request is mandatory for it to be fully specified.
Add the extension to the request.

It seems to be a bug within tiptap that started with: https://github.com/ueberdosis/tiptap/pull/3501/files

I’m using @tiptap/react