はじめに

React学習の一環として作成中のメモアプリにて、NotionライクなUIにしたくBlockNoteを使って見た所、以下のビルドエラーに遭遇しました。

モジュール '"@blocknote/core"' にエクスポートされたメンバー 'locales' がありません

目次

Block Noteとは？
事象
原因
まとめ
参考文献

🧷 Block Noteとは？

BlockNote は React で Notion のようなブロックベースのテキストエディタを実装できるライブラリです。

デフォルトの状態でほぼ Notion といっても過言でないぐらい美しく、使いやすく、その上とても簡単に高クオリティなテキストエディタを実装できます。

カスタムブロックやAIツールなど、独自の機能でカスタマイズすることも可能です。

🧷 事象

テキストエディタのインスタンス：editor の設定にて、日本語化を行うためにlocalesをインポートすると、以下ビルドエラーに...

ビルドエラー

モジュール '"@blocknote/core"' にエクスポートされたメンバー 'locales' がありません

修正前のソースコード

package.json

  "dependencies": {
    "@blocknote/core": "^0.29.1",
    "@blocknote/mantine": "^0.29.1",
    "@blocknote/react": "^0.29.1",

// BlockNote 本体のエディタ型、部分ブロック型、日本語ローカライズ辞書（locales）をインポート
import { BlockNoteEditor, PartialBlock, locales } from '@blocknote/core';

// BlockNote の React 用フック（エディタ生成用）をインポート
import { useCreateBlockNote } from '@blocknote/react';

// Mantine 用 BlockNote スタイルを読み込み（UIに必要）
import '@blocknote/mantine/style.css';

// Mantine 版の BlockNote エディタビューをインポート
import { BlockNoteView } from '@blocknote/mantine';

// 親コンポーネントから props として受け取る型定義
interface EditorProps {
  onChange: (value: string) => void;       // ドキュメントが変更されたときに呼ばれるコールバック
  initialContent?: string | null;          // 初期表示するコンテンツ（JSON 文字列形式）
}

// Editor コンポーネント定義
function Editor({ onChange, initialContent }: EditorProps) {
  // BlockNote のエディタインスタンスを作成
  const editor: BlockNoteEditor = useCreateBlockNote({
    dictionary: locales.ja, // 日本語ローカライズを適用（ただし locales が存在しない可能性がある点に注意）
    initialContent: initialContent
      ? (JSON.parse(initialContent) as PartialBlock[]) // JSON 文字列をパースして初期ブロックとして使う
      : undefined, // コンテンツがなければ空の状態で開始
  });

  return (
    <div>
      {/* エディタ本体を表示。内容が変更されるたびに onChange を呼び出す */}
      <BlockNoteView
        editor={editor}
        onChange={() => onChange(JSON.stringify(editor.document, null, 2))} // ドキュメントを JSON 形式で親に渡す
      />
    </div>
  );
}

export default Editor;

🧷 原因

以下インポート方法に誤りがありました。

localesを別インポートすることで無事エラーが解消！

import { BlockNoteEditor, PartialBlock, locales } from '@blocknote/core';

　👇👇👇

import * as locales from '@blocknote/core/locales';

修正後のソースコード(import箇所のみ)

import { BlockNoteEditor, PartialBlock } from '@blocknote/core';
import * as locales from '@blocknote/core/locales'; // locales だけ別でインポート
import { useCreateBlockNote } from '@blocknote/react';
import '@blocknote/mantine/style.css';
import { BlockNoteView } from '@blocknote/mantine';

  // 略

🎉 まとめ

BlockNote かなり手軽にNotion風のテキストエディタが実装できちゃいます。
UI/UX でお悩みの方、宜しければご活用ください😆

💫 参考文献