Tiptap: Doesn't work with nuxt, w3c-keyname error

[acelinsek]

Describe the bug
Added tiptap to existing project via npm, when trying to call a component that holds the editor, I get "No valid exports main found for '[project-path]\node_modules\w3c-keyname'"

Created fresh nuxt project, added tiptap again, same error.

Created fresh vue-cli project, added tiptap, works fine.

Tried this solution with nuxt, didn't help either.

At this point can't seem to get tiptap working with nuxt at all.

Screenshots

Environment

• OS: Win10
• Browser Chrome
• Version 1.27.0
• Mobile / Desktop: Desktop

[xuannghia]

I am having the same issue 😢

[OrkhanAlikhanov]

If you are not doing server-side rendering of prosemirror document do not import 'tiptap' at serverside. Do following instead (not tested):

- import { EditorContent } from 'tiptap'
+ let EditorContent;
+ if (process.browser) EditorContent = require('tiptap')

Or the easiest fix is to stick to version 2.2.2:

npm i [email protected] 

---

FYI @marijnh, @philippkuehn

This addition broke it, removing it fixes the issue:
https://github.com/marijnh/w3c-keyname/blob/e9fe840569bd2e090a4686436b918aa30ac49d51/package.json#L7-L10

w3c-keyname is imported by prosemirror-keymap

[marijnh]

Which loader/bundler is producing this error? (I know very little about Vue and have no idea what nuxt is.)

[OrkhanAlikhanov]

It happens in nodejs. It's not possible to import that module at all.

I was wrong about node 13 in my previous comment (removed part). I already have node 13. Even node 12 has that feature.

---

After adding "default": "./index.cjs" it worked.

  "exports": {
    "import": "./index.es.js",
    "require": "./index.cjs",
+    "default": "./index.cjs"
  },

Doc says about it:

"default" - the generic fallback that will always match. Can be a CommonJS or ES module file. _This condition should always come last._

[marijnh]

Strange. Here's what I get:

Welcome to Node.js v13.11.0.
Type ".help" for more information.
> require("w3c-keyname")
{
  base: {
    '8': 'Backspace',
    '9': 'Tab',
    '10': 'Enter',
    '12': 'NumLock',
   ....

That's with version 2.2.4 of w3c-keyname.

[OrkhanAlikhanov]

Node versions are different. I am at v13.6. I think that's the reason. non-LTS version of node is developed faster adding new features. Servers usually have LTS versions which are even numbered like node 12. Can you try at a lower version? If it fails adding "default" entry should fix fix it.

[xuannghia]

I am using v13.5 and also get the same error

Welcome to Node.js v13.5.0.
Type ".help" for more information.
> require("w3c-keyname")
Uncaught:
Error: No valid exports main found for '/Users/xxx/test/node_modules/w3c-keyname'
    at resolveExportsTarget (internal/modules/cjs/loader.js:622:9)
    at applyExports (internal/modules/cjs/loader.js:499:14)
    at resolveExports (internal/modules/cjs/loader.js:548:12)
    at Function.Module._findPath (internal/modules/cjs/loader.js:654:22)
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:953:27)
    at Function.Module._load (internal/modules/cjs/loader.js:859:27)
    at Module.require (internal/modules/cjs/loader.js:1028:19)
    at require (internal/modules/cjs/helpers.js:72:18) {
  code: 'MODULE_NOT_FOUND'
}

[marijnh]

Servers usually have LTS versions which are even numbered like node 12.

Right. Node 12, in default mode, will ignore the exports stuff and can require the module just fine. It's kind of disappointing that earlier Node 13 versions do fail, but I guess if you're on the bleeding edge already, upgrading to the current 13.x shouldn't be much of an issue, no?

[OrkhanAlikhanov]

I thought it will not work on v12 either. Tested and it worked. Thanks for the help!

[hktr92]

so, is planned a fix for node 13 in w3c-keyname package or not? I am having the same issue and I'm using node 13 and it's frustrating that neither no-ssr nor yarn add w3c-keyname@latest works. using latest nuxt in universal mode.

[OrkhanAlikhanov]

Upgrade your node to latest 13.xx. It will work

[philippkuehn]

Closing because it’s not a bug with tiptap itself.