frontend用のライブラリを使用しようとしたときに、稀に Cannot use import statement outside a module が出ることがあります。
Cannot use import statement outside a module とは？
JavaScriptではモジュールを読み込むのにいくつかの方式があります。有名なのは require を使う方法と、 import を使う方法です。
このエラーは、 package.json を正しく設定していれば出ないはずのものです。しかし、当環境では、 mui-markdown や、 react-simplemde-editor を利用しようとしたときに発生していました。
原因
フロントエンド用のライブラリをSSRでレンダリングしようとした際に、モジュール読み込みでエラーが発生するようです。これはNext.jsでは意外とポピュラーな問題で、フロントエンドのみで利用するライブラリはフロントエンドでのみimportするように指示をする必要がある場合があります。
対処法
dynamic import を利用します。
before
import { MuiMarkdown } from "mui-markdown";
after
import dynamic from "next/dynamic";
const MuiMarkdown = dynamic(() => import("mui-markdown"), { ssr: false })
dynamic importは、本来は遅延読み込みなどを目的として動的にモジュールをimportする仕組みですが、Next.jsでは { ssr: false } というオプションを追加することによって、SSRでレンダリングさせないようにすることが出来ます。
まとめ
副作用もあまり無く、Next.jsのレンダリングで何か起こったら dynamic import を検討する、くらいカジュアルに使って支障無いものだと思いますので、困ったら一度試してみてもよいでしょう。