Next.js

TipTapで『Can not convert <> to a Fragment』というエラーが出た場合

2024/08/05

解決策

僕の場合はNext.jsを使っていたので、 next.config.js に ailias を貼ってあげることでうまく動作するようになりました。

const nextConfig = {
  webpack(config) {
    config.resolve.alias['prosemirror-model'] = require.resolve('prosemirror-model')
    return config
  },
}

エラー内容

TipTapを使っている部分でEnterなどで改行をすると以下のようなエラーが発生しました。

9995-10e0f94e48ea25d9.js:6 Uncaught RangeError: Can not convert <> to a Fragment (looks like multiple versions of prosemirror-model were loaded)
    at Function.value (9995-10e0f94e48ea25d9.js:6:176020)
    at t.value (9995-10e0f94e48ea25d9.js:6:201292)
    at 9995-10e0f94e48ea25d9.js:6:332422
    at n.value (9995-10e0f94e48ea25d9.js:6:332504)
    at 54a60aa6-e048f2d7127d25b0.js:1:42770
    at Object.splitBlock (54a60aa6-e048f2d7127d25b0.js:1:3995)
    at Array.<anonymous> (54a60aa6-e048f2d7127d25b0.js:1:50509)
    at 54a60aa6-e048f2d7127d25b0.js:1:32958
    at Object.first (54a60aa6-e048f2d7127d25b0.js:1:2373)
    at Enter (54a60aa6-e048f2d7127d25b0.js:1:50329)

原因

原因としては、複数のバージョンの prosemirror-model がロードされたため、発生しているようです。
TipTapはいろんなモジュールを組み合わせて利用するためよく起こりやすいのか、これ関連のIssueがかなりありました。

issueではpackage.jsonでライブラリのバージョンを固定するというものが多かったですが、僕の場合はそれでは解決することはできませんでした。

{
  "overrides": {
    "prosemirror-model": "1.22.2"
  }
}

今回はWebpackのalias設定を利用して同じバージョンを使用するようにすることで解決できました。
これによりプロジェクト内のどこでprosemirror-modalをインポートしても、常に同じ場所からインポートされるようになり、違うバージョンがバンドルさせることを防ぎます。

const nextConfig = {
  webpack(config) {
    config.resolve.alias['prosemirror-model'] = require.resolve('prosemirror-model')
    return config
  },
}
Next.jsTipTap

Twitterフォロー待ってます！