Blocknote Not Compatible With Vite

by ADMIN 35 views

Introduction

Blocknote is a popular React-based editor that provides a rich text editing experience. However, when trying to use it with Vite, a popular build tool for modern web applications, users encounter a compatibility issue. In this article, we will delve into the issue, explore the possible causes, and provide a solution to ensure seamless integration between Blocknote and Vite.

The Issue

When using Vite, the DefaultReactSuggestionItem export from @blocknote/react is not recognized, resulting in a SyntaxError. The same code works perfectly with Create React App (CRA), suggesting a potential compatibility issue between @blocknote/react and Vite's ESM bundling.

Steps to Reproduce

To reproduce the issue, follow these steps:

  1. Clone the Vite-based repro: blocknote-react-vite.
  2. Run npm install followed by npm run dev.
  3. Open the browser and check the console.

Expected Behavior

The BlockNote editor loads, and the custom slash menu (including DefaultReactSuggestionItem) works as shown in the CRA repro: blocknote-react-cra.

Actual Behavior

The app fails to load with the following error:

App.jsx:8 Uncaught SyntaxError: The requested module '/node_modules/.vite/deps/@blocknote_react.js?v=4c0743d0' does not provide an export named 'DefaultReactSuggestionItem' (at App.jsx:8:3)

Environment

  • BlockNote Version: @blocknote/react@0.25.1, @blocknote/core@0.25.1, @blocknote/mantine@0.25.1
  • Vite Version: 5.4.1
  • React Version: 18.3.1
  • Node.js Version: [e.g., 20.11.0]
  • OS: [e.g., macOS 14.5]

Code Snippet

Here's the relevant code from App.jsx where the error occurs:

import {
  DefaultReactSuggestionItem,
  getDefaultReactSlashMenuItems,
  SuggestionMenuController,
  useCreateBlockNote,
} from "@blocknote/react";
// ... rest of the code

And the vite.config.js:

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import commonjs from "@originjs/vite-plugin-commonjs";

export default defineConfig({
  plugins: [react(), commonjs.viteCommonjs()],
  optimizeDeps: {
    include: ["@blocknote/react", "@blocknote/core", "@blocknote/mantine"],
  },
});

Additional Details

Works in CRA: The same code runs without issues in a CRA setup (see blocknote-react-cra), suggesting Vite's ESM pre-bundling (via esbuild) might not be resolving exports correctly.

Troubleshooting Attempted

  • Added optimizeDeps.include to force Vite to pre-bundle @blocknote/react.
  • Used @originjs/vite-plugin-commonjs to handle potential CommonJS/ESM mismatches.
  • Tried default import workaround (import { default as BlockNoteReact } from "@blocknote/react), but the issue persists.
  • Inspected /node_modules/.vite/deps/@blocknote_react.js—DefaultReactSuggestionItem is not listed as an export.

Hypothesis

The @blocknote/react package might not define DefaultReactSuggestionItem as a named export in its ESM build, or Vite's bundling process is dropping it.

Request

Could you confirm:

  • Whether DefaultReactSuggestionItem is intended to be a named export in @blocknote/react@0.25.1?
  • If there's a recommended Vite configuration to resolve this?
  • Any plans to ensure full ESM compatibility with Vite?

A workaround or fix would be greatly appreciated, as Vite is a popular build tool, and this issue prevents its use with BlockNote.

Screenshots/Logs

Vite Error:

App.jsx:8 Uncaught SyntaxError: The requested module '/node_modules/.vite/deps/@blocknote_react.js?v=4c0743d0' does not provide an export named 'DefaultReactSuggestionItem' (at App.jsx:8:3)

Q: What is the issue with Blocknote and Vite?

A: The issue is that the DefaultReactSuggestionItem export from @blocknote/react is not recognized when using Vite, resulting in a SyntaxError. This suggests a potential compatibility issue between @blocknote/react and Vite's ESM bundling.

Q: Why does the same code work in Create React App (CRA)?

A: The same code works in CRA because CRA uses a different bundling process that resolves exports correctly. Vite's ESM pre-bundling (via esbuild) might not be resolving exports correctly, leading to the compatibility issue.

Q: What are the possible causes of this issue?

A: The possible causes of this issue are:

  • @blocknote/react package not defining DefaultReactSuggestionItem as a named export in its ESM build.
  • Vite's bundling process dropping the export.
  • CommonJS/ESM mismatch.

Q: What troubleshooting attempts have been made?

A: The following troubleshooting attempts have been made:

  • Added optimizeDeps.include to force Vite to pre-bundle @blocknote/react.
  • Used @originjs/vite-plugin-commonjs to handle potential CommonJS/ESM mismatches.
  • Tried default import workaround (import { default as BlockNoteReact } from "@blocknote/react), but the issue persists.
  • Inspected /node_modules/.vite/deps/@blocknote_react.js—DefaultReactSuggestionItem is not listed as an export.

Q: What is the hypothesis behind this issue?

A: The hypothesis is that the @blocknote/react package might not define DefaultReactSuggestionItem as a named export in its ESM build, or Vite's bundling process is dropping it.

Q: What is the request to the Blocknote team?

A: The request to the Blocknote team is to:

  • Confirm whether DefaultReactSuggestionItem is intended to be a named export in @blocknote/react@0.25.1.
  • Provide a recommended Vite configuration to resolve this issue.
  • Ensure full ESM compatibility with Vite.

Q: What is the impact of this issue?

A: The impact of this issue is that it prevents the use of Vite with BlockNote, which is a popular build tool for modern web applications.

Q: What is the solution to this issue?

A: The solution to this issue is to:

  • Update @blocknote/react to define DefaultReactSuggestionItem as a named export in its ESM build.
  • Update Vite's configuration to handle potential CommonJS/ESM mismatches.
  • Use a workaround or fix provided by the Blocknote team.

Q: What is the next step?

A: The next step is to wait for the Blocknote team to respond to the request and provide a solution to this issue. In the meantime, users can try using a workaround or fix provided by the Blocknote team.