`Cannot find module '@blocknote/react'` warning is VS Code

[Crayon-ShinChan]

Describe the bug <what's going wrong!?>

Therefore, I can't use VS Code to quickly jump to the corresponding code snippets. I want to contribute to the BlockNote codebase, and I believe it can greatly enhance my efficiency if I can quickly navigate between sections of code.

I tried to add the following tsconfig.json to the root, but didn't work.

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@blocknote/core": ["packages/core/src"],
      "@blocknote/react": ["packages/react/src"],
      "@blocknote/ariakit": ["packages/ariakit/src"],
      "@blocknote/mantine": ["packages/mantine/src"],
      "@blocknote/shadcn": ["packages/shadcn/src"]
    }
  },
  "include": ["packages/**/*", "playground/**/*"]
}

To Reproduce <clear steps to reproduce are super helpful! Best is to provide an online sandbox, click to create one>

clone the repo and open it in VS Code. npm install

Misc

• Node version: 20.9.0
• Package manager: npm
• Browser: Chrome
• [ ] I'm a sponsor and would appreciate if you could look into this sooner than later 💖

[YousefED]

Make sure you also run npm run build

I think to solve your issue, also change __ADD_FOR_LOCAL_DEV_references into references in the example's tsconfig. Let me know if it works after that

[Crayon-ShinChan]

Make sure you also run npm run build

I think to solve your issue, also change __ADD_FOR_LOCAL_DEV_references into references in the example's tsconfig. Let me know if it works after that

This exactly solved the problem.

After running npm run build, the ES Lint warnings disappeared in VS Code. However, when I press ALT + Click to jump to the corresponding code, it takes me to the type definition. Then when I change the __ADD_FOR_LOCAL_DEV_references to reference, pressing ALT + Click can lead me to the real code part in packages folder.

Thank you!

I'm new to Frontend. Can I ask why the ES Lint warning will disappear after I run npm run build?

[Crayon-ShinChan]

Btw, do you think it's good to add these instructions to CONTRIBUTION.md for developers? I can help to update that document.

[YousefED]

Btw, do you think it's good to add these instructions to CONTRIBUTION.md for developers? I can help to update that document.

As this is specific to the examples, maybe add this info about __ADD_FOR_LOCAL_DEV_references to https://github.com/TypeCellOS/BlockNote/blob/main/examples/README.md

I'm new to Frontend. Can I ask why the ES Lint warning will disappear after I run npm run build?

It could be (a) that it wasn't 100% necessary and it was resolved with the tsconfig fix. it could (b) also be because the build command ran a first compilation step necessary for the lint errors to resolve