bug: Imports broken in v2

[elie222]

Provide environment information

System: OS: macOS 14.0 Shell: 5.9 - /bin/zsh Binaries: Node: 18.19.0 - ~/.nvm/versions/node/v18.19.0/bin/node Yarn: 1.22.19 - /usr/local/bin/yarn npm: 10.2.3 - ~/.nvm/versions/node/v18.19.0/bin/npm pnpm: 8.15.3 - ~/Library/pnpm/pnpm bun: 1.0.0 - ~/.bun/bin/bun Watchman: 2022.06.06.00 - /usr/local/bin/watchman

Describe the bug

When importing any packages we get a typescript error:

import { UploadImagesPlugin } from "novel/plugins";

This works however:

import { UploadImagesPlugin } from "novel/dist/plugins";

I assume it has to do with our TS Config that needs updating.

Link to reproduction

https://github.com/elie222/inbox-zero

To reproduce

Upgrade to Novel v2 in https://github.com/elie222/inbox-zero. Then import any of the new components as above.

Additional information

No response

[elie222]

Bumping. Still an issue

[elie222]

In the example project you use "moduleResolution": "Bundler",. I was using node before. And switching to this makes the error go away in my editor but the project still doesn't load in the browser.

I get the error:

RangeError: Schema is missing its top node type ('doc')

[aligajani]

@elie222 Where do I fix this in here

import { EditorContent, EditorRoot } from "novel";
import { useState } from "react";

const Editor = () => {
  const [content, setContent] = useState(null);
  return (
    <EditorRoot>
      <EditorContent
        initialContent={content}
        onUpdate={({ editor }) => {
          const json = editor.getJSON();
          setContent(json);
        }}
      />
    </EditorRoot>
  );
};
export default Editor;

[elie222]

@elie222 Where do I fix this in here

import { EditorContent, EditorRoot } from "novel";
import { useState } from "react";

const Editor = () => {
  const [content, setContent] = useState(null);
  return (
    <EditorRoot>
      <EditorContent
        initialContent={content}
        onUpdate={({ editor }) => {
          const json = editor.getJSON();
          setContent(json);
        }}
      />
    </EditorRoot>
  );
};
export default Editor;

Take a look here: https://github.com/elie222/inbox-zero/pull/145

[andrewdoro]

In the example project you use "moduleResolution": "Bundler",. I was using node before. And switching to this makes the error go away in my editor but the project still doesn't load in the browser.

I get the error:

RangeError: Schema is missing its top node type ('doc')

The reason you see this error is because of missing extensions. https://novel.sh/docs/guides/tailwind/setup#configure-extensions

[andrewdoro]

In the example project you use "moduleResolution": "Bundler",. I was using node before. And switching to this makes the error go away in my editor but the project still doesn't load in the browser.

I get the error:

RangeError: Schema is missing its top node type ('doc')

Adding moduleResolution:"Bundler" is the right fix here. This is because Novel uses "exports" field in package.json. I don't think I'll add any compatibility fix for node because it's being deprecated and would require changing the code stucture again.

[mikealche]

Hey @andrewdoro, just wanted to comment that moduleResolution: "Bundler" is not really an option if you're using Next.js (v13) because next.js at build time forces you to use moduleResolution: "node" and thus throws errors at build time. :( (

I really want to use this project (seems beautiful!) but this issue is blocking me unfortunately.

I'm not really a savant on commonjs, imports, and resolutions (more quite the opposite 🥲) so not sure what exactly should be done here. But if someone explains I'll be glad to do it

[andrewdoro]

@mikealche I already have a few projects that use the same tsconfig and I don't have any build errors. Also this open-source project uses the same approach. https://github.com/elie222/inbox-zero/pull/145/files#diff-ea95dfc0e56382e18e70d4f5a82a990eb8926405e9696b80240cb88623669415R12

Could you open another issue for your problem?

[elie222]

Hey @andrewdoro, just wanted to comment that moduleResolution: "Bundler" is not really an option if you're using Next.js (v13) because next.js at build time forces you to use moduleResolution: "node" and thus throws errors at build time. :( (

I really want to use this project (seems beautiful!) but this issue is blocking me unfortunately.

I'm not really a savant on commonjs, imports, and resolutions (more quite the opposite 🥲) so not sure what exactly should be done here. But if someone explains I'll be glad to do it

I'm on Next.js and it works. Is upgrading Next.js an option for you?

[mikealche]

Upgrading to Next.js 14 fixed my issue (Next.js now doesn't force me to change the module resolution at build time) Thanks!!