Uncaught TypeErrors when using the editor and editor unresponsive

[fabianmu]

Strapi 4.6.1, tested also with 4.6.2 strapi-tiptap-editor": "0.9.10"

I can't add line breaks (return or shift + return) and the console shows errors on keydown.

main.ae291fb5.js:864 Uncaught TypeError: n2 is not a function
    at Xm.createTooltip (main.ae291fb5.js:864:13651)
    at Xm.updateHandler (main.ae291fb5.js:864:12621)
    at Xm.update (main.ae291fb5.js:864:14063)
    at main.ae291fb5.js:864:12186
createTooltip @ main.ae291fb5.js:864
Xm.updateHandler @ main.ae291fb5.js:864
update @ main.ae291fb5.js:864
(anonymous) @ main.ae291fb5.js:864
setTimeout (async)
Xm.focusHandler @ main.ae291fb5.js:864
(anonymous) @ main.ae291fb5.js:783
emit @ main.ae291fb5.js:783
dispatchTransaction @ main.ae291fb5.js:862
dispatch @ main.ae291fb5.js:776
focus @ main.ae291fb5.js:788
(anonymous) @ main.ae291fb5.js:776
someProp @ main.ae291fb5.js:776
Z3 @ main.ae291fb5.js:776
D6.u.dom.addEventListener.u.input.eventHandlers.<computed> @ main.ae291fb5.js:776
3main.ae291fb5.js:864 Uncaught TypeError: n2 is not a function
    at Xm.createTooltip (main.ae291fb5.js:864:13651)
    at Xm.updateHandler (main.ae291fb5.js:864:12621)
    at Xm.update (main.ae291fb5.js:864:14063)
    at Xa.updatePluginViews (main.ae291fb5.js:776:42988)
    at Xa.updateStateInner (main.ae291fb5.js:776:41960)
    at Xa.updateState (main.ae291fb5.js:776:40649)
    at tM.dispatchTransaction (main.ae291fb5.js:862:3843)
    at Xa.dispatch (main.ae291fb5.js:776:44695)
    at F2 (main.ae291fb5.js:776:37779)
    at ue.handleDOMChange (main.ae291fb5.js:776:40025)

main.ae291fb5.js:776 Uncaught RangeError: Can not convert <> to a Fragment (looks like multiple versions of prosemirror-model were loaded)
    at A0.from (main.ae291fb5.js:776:54736)
    at xa.create (main.ae291fb5.js:777:4947)
    at Vt (main.ae291fb5.js:772:23965)
    at Ae.split (main.ae291fb5.js:772:35809)
    at main.ae291fb5.js:788:6577
    at Object.splitBlock (main.ae291fb5.js:783:13361)
    at Array.<anonymous> (main.ae291fb5.js:788:12713)
    at main.ae291fb5.js:786:4519
    at Object.first (main.ae291fb5.js:783:12264)
    at Enter (main.ae291fb5.js:788:12611)

See video

https://user-images.githubusercontent.com/89517/220761915-a5833afd-b9fc-4c82-a577-ec5232c9092e.mp4

[fabianmu]

In watchmode I get when clicking into the editor to focus on it

TypeError
tippy_js__WEBPACK_IMPORTED_MODULE_2__ is not a function
Call Stack
 BubbleMenuView.createTooltip
  webpack-internal:///9353:661:22
 BubbleMenuView.updateHandler
  webpack-internal:///9353:608:18
 BubbleMenuView.update
  webpack-internal:///9353:683:18
 eval
  webpack-internal:///9353:584:35

[giu1io]

The issue seems to be with the way Tippy.js is bundled (Tippy is a dependecy of "@tiptap/extension-bubble-menu") Strapi uses esbuild as a bundler, and it seems to think Tippy is an es6 compliant module (it is not).

For the moment i'm using this "fix" in the webpack config file for strapi:

  config.plugins.push(new webpack.NormalModuleReplacementPlugin(
    /^tippy\.js$/,
    'tippy.js/dist/tippy-bundle.umd.min.js'
  ))

However this is not the ideal solution which I think should be:

• make Tippy.js esModule compliant
• update the entire dependency tree

I haven't opened an issue on Tippy.js or @tiptap/extension-bubble-menu though.

[VercammenJens]

Same issue as #61 I think. @giu1io, how did you debug it to find out that it is Tippy.js? (wondering out of curiousity as I tried to debug it myself aswell)

[giu1io]

Same issue as #61 I think. @giu1io, how did you debug it to find out that it is Tippy.js? (wondering out of curiousity as I tried to debug it myself aswell)

I've launched Strapi in --watch-admin mode, that way you can debug the exact point in the code where the crash happens.

[Sajsaaa]

@giu1io is there any solution to this editor problem at this moment?

[giu1io]

@giu1io is there any solution to this editor problem at this moment?

I'm using the solution that I detailed in my previous comment

[dasmikko]

The issue seems to be with the way Tippy.js is bundled (Tippy is a dependecy of "@tiptap/extension-bubble-menu") Strapi uses esbuild as a bundler, and it seems to think Tippy is an es6 compliant module (it is not).

For the moment i'm using this "fix" in the webpack config file for strapi:

  config.plugins.push(new webpack.NormalModuleReplacementPlugin(
    /^tippy\.js$/,
    'tippy.js/dist/tippy-bundle.umd.min.js'
  ))

However this is not the ideal solution which I think should be:

• make Tippy.js esModule compliant
• update the entire dependency tree

I haven't opened an issue on Tippy.js or @tiptap/extension-bubble-menu though.

I can also confirm that this completely fixes the issue!

I will update the readme to reflect this.