Custom mark causing error with Vite

[yayvery]

What happens?
I have a custom mark defined to create spoiler text that appears on hover. The mark is causing the following error with Vite:

 > node_modules/@tiptap/extension-hard-break/dist/tiptap-extension-hard-break.esm.js:1:38: error: [vite:dep-pre-bundle] Cannot find module '@tiptap_core'
Require stack:
- C:\Users\Dan\CometDev\vite-project\node_modules\vite\dist\node\chunks\dep-8baf35b6.js
- C:\Users\Dan\CometDev\vite-project\node_modules\vite\dist\node\cli.js
- C:\Users\Dan\CometDev\vite-project\node_modules\vite\bin\vite.js
        1 │ import { Node, mergeAttributes } from '@tiptap/core';
          ╵                                       ~~~~~~~~~~~~~~
   node_modules/vite/dist/node/chunks/dep-8baf35b6.js:65417:18: note: This error came from the "onResolve" callback registered here
    65417 │             build.onResolve({ filter: /^[\w@][^:]/ }, async ({ path: id, importer, kind, resolveDir }) => {
          ╵                   ~~~~~~~~~
    at setup (C:\Users\Dan\CometDev\vite-project\node_modules\vite\dist\node\chunks\dep-8baf35b6.js:65417:19)
    at handlePlugins (C:\Users\Dan\CometDev\vite-project\node_modules\esbuild\lib\main.js:686:7)
    at Object.buildOrServe (C:\Users\Dan\CometDev\vite-project\node_modules\esbuild\lib\main.js:903:44)
    at C:\Users\Dan\CometDev\vite-project\node_modules\esbuild\lib\main.js:1444:17
    at new Promise (<anonymous>)
    at Object.build (C:\Users\Dan\CometDev\vite-project\node_modules\esbuild\lib\main.js:1443:14)
    at Object.build (C:\Users\Dan\CometDev\vite-project\node_modules\esbuild\lib\main.js:1334:51)
    at optimizeDeps (C:\Users\Dan\CometDev\vite-project\node_modules\vite\dist\node\chunks\dep-8baf35b6.js:65643:34)
    at processTicksAndRejections (node:internal/process/task_queues:94:5)

error when starting dev server:
Error: Build failed with 23 errors:
node_modules/@tiptap/extension-blockquote/dist/tiptap-extension-blockquote.esm.js:1:38: error: [vite:dep-pre-bundle] Cannot find module '@tiptap_core'
Require stack:
- C:\Users\Dan\CometDev\vite-project\node_modules\vite\dist\node\chunks\dep-8baf35b6.js
- C:\Users\Dan\CometDev\vite-project\node_modules\vite\dist\node\cli.js
- C:\Users\Dan\CometDev\vite-project\node_modules\vite\bin\vite.js
node_modules/@tiptap/extension-bold/dist/tiptap-extension-bold.esm.js:1:68: error: [vite:dep-pre-bundle] Cannot find module '@tiptap_core'
Require stack:
- C:\Users\Dan\CometDev\vite-project\node_modules\vite\dist\node\chunks\dep-8baf35b6.js
- C:\Users\Dan\CometDev\vite-project\node_modules\vite\dist\node\cli.js
- C:\Users\Dan\CometDev\vite-project\node_modules\vite\bin\vite.js
node_modules/@tiptap/extension-bubble-menu/dist/tiptap-extension-bubble-menu.esm.js:1:40: error: [vite:dep-pre-bundle] Cannot find module '@tiptap_core'
Require stack:
- C:\Users\Dan\CometDev\vite-project\node_modules\vite\dist\node\chunks\dep-8baf35b6.js
- C:\Users\Dan\CometDev\vite-project\node_modules\vite\dist\node\cli.js
- C:\Users\Dan\CometDev\vite-project\node_modules\vite\bin\vite.js
node_modules/@tiptap/extension-bullet-list/dist/tiptap-extension-bullet-list.esm.js:1:38: error: [vite:dep-pre-bundle] Cannot find module '@tiptap_core'
Require stack:
- C:\Users\Dan\CometDev\vite-project\node_modules\vite\dist\node\chunks\dep-8baf35b6.js
- C:\Users\Dan\CometDev\vite-project\node_modules\vite\dist\node\cli.js
- C:\Users\Dan\CometDev\vite-project\node_modules\vite\bin\vite.js
node_modules/@tiptap/extension-code-block/dist/tiptap-extension-code-block.esm.js:1:21: error: [vite:dep-pre-bundle] Cannot find module '@tiptap_core'
Require stack:
- C:\Users\Dan\CometDev\vite-project\node_modules\vite\dist\node\chunks\dep-8baf35b6.js
- C:\Users\Dan\CometDev\vite-project\node_modules\vite\dist\node\cli.js
- C:\Users\Dan\CometDev\vite-project\node_modules\vite\bin\vite.js
...
    at failureErrorWithLog (C:\Users\Dan\CometDev\vite-project\node_modules\esbuild\lib\main.js:1224:15)
    at buildResponseToResult (C:\Users\Dan\CometDev\vite-project\node_modules\esbuild\lib\main.js:936:32)
    at C:\Users\Dan\CometDev\vite-project\node_modules\esbuild\lib\main.js:1035:20
    at C:\Users\Dan\CometDev\vite-project\node_modules\esbuild\lib\main.js:568:9
    at handleIncomingPacket (C:\Users\Dan\CometDev\vite-project\node_modules\esbuild\lib\main.js:657:9)
    at Socket.readFromStdout (C:\Users\Dan\CometDev\vite-project\node_modules\esbuild\lib\main.js:535:7)
    at Socket.emit (node:events:378:20)
    at addChunk (node:internal/streams/readable:313:12)
    at readableAddChunk (node:internal/streams/readable:288:9)
    at Socket.Readable.push (node:internal/streams/readable:227:10)

How can others reproduce the issue?
Reproduction: https://github.com/danbeneventano/vite-tiptap-bug

The custom mark in question is in Spoiler.js. When I remove Spoiler from the extensions array, the error does not occur.

What behavior did you expect?
Custom mark should not cause an error with Vite

What’s your environment?

• Yarn 2
• Vite

[philippkuehn]

I have no idea what is happening here but for me this looks like a bug in vite.js.

Workaround: It works for me if you change the import in Spoiler.js to import { Mark, mergeAttributes } from '@tiptap/react'.

[yayvery]

I have no idea what is happening here but for me this looks like a bug in vite.js.

Workaround: It works for me if you change the import in Spoiler.js to import { Mark, mergeAttributes } from '@tiptap/react'.

Thanks! Didn't realize that those were exported by @tiptap/react as well. I will create an issue in the Vite repo.

[yayvery]

Issue was fixed in Vite 2.2.1