Tiptap: These dependencies were not found: asyncToGenerator & 9 others.

[Mertakus]

I've been trying to implement TipTap in one of my projects. I installed both tiptap & tiptap extensions:

"tiptap": "^1.29.4",
"tiptap-extensions": "^1.32.1",

I just used the example on the Github page, i.e. https://github.com/ueberdosis/tiptap#extensions

For some reason, that gives me the following errors:

Any idea how to solve this? Maybe I am missing something?

EDIT: If I try to reproduce it in something like a codesandbox, I can't. In codesandbox, it just works out of the box.

EDIT 2: If I downgrade to "tiptap-extensions": 1.28.6 it does work (that's a version I used in an older project).

[hanspagel]

Probably introduced with #757. @Chrissi2812 any idea how to solve this?

[Chrissi2812]

Seems that @babel/runtime needs to be a dependency instead of a devDependency (https://babeljs.io/docs/en/babel-plugin-transform-runtime).
Installing @babel/runtime: "^7.7.4" in one of my projects solved the issue.

I had enabled the transform-runtime-plugin because the async / await needs to be converted to es2015 according to this issue https://github.com/babel/babel/issues/9849 (commit: https://github.com/ueberdosis/tiptap/pull/757/commits/cc87197c0a45a31ec8dcba39306ad14d913cc042)

Sorry for any trouble that the PR made..

[Chrissi2812]

@hanspagel One alternative is to drop IE 11 Support from the browserslist config.
The current config Includes IE 11 and IE 10, which both don't support async / await.

If we drop both we don't need the regeneratorRuntime and also not the transform-runtime-plugin.

{
  ...
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not IE <= 11",
    "not IE_Mob <= 11"
  ],
  ...
}

So what would you prefer? Dropping IE support or adding the @babel/runtime as dependency?

[hanspagel]

We use proxies anyway and dropped support for IE 11 a while ago. The current config looks like that:

  "browserslist": [
    "> 1%",
    "last 2 versions"
  ],

So I think we should remove the regeneratorRuntime and the transform-runtime-plugin. What do you think?

[hanspagel]

Okay, Babel somehow wants to transform async/await but fails without those dependencies. We found a different solution though:
https://github.com/rollup/rollup-plugin-babel/issues/209#issuecomment-399260174

The Suggestions plugin has an import 'regenerator-runtime/runtime' now, that seems to fix that too.

@Mertakus Could you try 1.32.2 and confirm that it’s fixed?

[Chrissi2812]

@hanspagel Babel wants to transpile the async / await because browserslist with last 2 versions includes both IE 10 and 11 and IE Mobile 10 and 11.

With that setting mentioned above we won't need the regenerator-runtime/runtime anymore.

Current Browserlist Output

$ npx browserslist
and_chr 81
and_ff 68
and_qq 10.4
and_uc 12.12
android 81
baidu 7.12
bb 10
bb 7
chrome 83
chrome 81
edge 83
edge 81
edge 18
firefox 78
firefox 77
ie 11
ie 10
ie_mob 11
ie_mob 10
ios_saf 13.4-13.5
ios_saf 13.3
ios_saf 12.2-12.4
kaios 2.5
op_mini all
op_mob 46
op_mob 12.1
opera 69
opera 68
safari 13.1
safari 13
samsung 12.0
samsung 11.1-11.2

[hanspagel]

Oh, I misread your comment. 🤦 That makes sense. I’ll change that. Thanks for clarification!

[Chrissi2812]

No problem, I was also a bit confused why babel tried to transpile it.

IE, Edge and Edge Chromium is confusing with browserslist (Edge 18 still receives security updates but is not included in last 2 versions, but IE 11and even 10 is)

[hanspagel]

Tagged as 1.32.3. Hope that works! 👍 Thanks for reporting, and thanks for the help!

[Mertakus]

@hanspagel @Chrissi2812 Yes, I've updated this morning and it works fine now. Thanks for looking into this :-).