steven-tey / novel

Notion-style WYSIWYG editor with AI-powered autocompletion.
https://novel.sh
Apache License 2.0
13.22k stars 1.08k forks source link

bug: how to use with `"moduleResolution": "node"`? #447

Open hammer-ai opened 2 months ago

hammer-ai commented 2 months ago

Provide environment information

System:
    OS: macOS 14.4.1
    CPU: (12) arm64 Apple M2 Pro
    Memory: 4.33 GB / 32.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 18.16.0 - ~/.nvm/versions/node/v18.16.0/bin/node
    npm: 9.5.1 - ~/.nvm/versions/node/v18.16.0/bin/npm
    pnpm: 8.6.10 - ~/.nvm/versions/node/v18.16.0/bin/pnpm
    Watchman: 2024.01.22.00 - /opt/homebrew/bin/watchman

Describe the bug

I am trying to use this package with:

import {EditorContent, EditorRoot} from 'novel'

...

return (
    <EditorRoot>
      <EditorContent
        initialContent={content}
        onUpdate={({editor}) => {
          const json = editor.getJSON()
          setContent(json)
        }}
        extensions={defaultExtensions}
      />
    </EditorRoot>
  )

but get:

Uncaught TypeError: Cannot read properties of undefined (reading 'Extension')
    at eval (tiptap-markdown.umd.js:11:1)
    at eval (tiptap-markdown.umd.js:2:1)
    at eval (tiptap-markdown.umd.js:3:2)
    at ../../node_modules/tiptap-markdown/dist/tiptap-markdown.umd.js (index.js:58159:1)
    at __webpack_require__ (index.js:58419:33)
    at fn (index.js:58671:21)
    at eval (extensions.cjs:2:1844)
    at ../../node_modules/novel/dist/extensions.cjs (index.js:55674:1)
    at __webpack_require__ (index.js:58419:33)
    at fn (index.js:58671:21)

If I then change to:

import {EditorContent, EditorRoot} from 'novel'

...

return (
    <EditorRoot>
      <EditorContent
        initialContent={content}
        onUpdate={({editor}) => {
          const json = editor.getJSON()
          setContent(json)
        }}
        extensions={[]}
      />
    </EditorRoot>
  )

I get:

Uncaught TypeError: (0 , k.default) is not a function
    at W (index.cjs:2:1638)
    at renderWithHooks (react-dom.development.js:16305:1)
    at mountIndeterminateComponent (react-dom.development.js:20074:1)
    at beginWork (react-dom.development.js:21587:1)
    at HTMLUnknownElement.callCallback (react-dom.development.js:4164:1)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:4213:1)
    at invokeGuardedCallback (react-dom.development.js:4277:1)
    at beginWork$1 (react-dom.development.js:27451:1)
    at performUnitOfWork (react-dom.development.js:26560:1)
    at workLoopSync (react-dom.development.js:26466:1)

From other bugs it seems that "moduleResolution": "Bundler", is required, but I don't want to switch from my current setup:

{
  "compilerOptions": {
    "target": "ES6",
    "allowJs": true,
    "module": "commonjs",
    "skipLibCheck": true,
    "esModuleInterop": true,
    "noImplicitAny": true,
    "sourceMap": true,
    "baseUrl": ".",
    "outDir": "dist",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "jsx": "react-jsx",
    "paths": {
      "*": ["node_modules/*"]
    }
  },
  "include": ["src/**/*", "images.d.ts"]
}

Could we add an example of how to use this library if you have "moduleResolution": "node",?

Link to reproduction

N/A

To reproduce

See above.

Additional information

Thank you!