@theme-ui/mdx/dist/theme-ui-mdx.cjs.dev.js to a dynamic import() which is available in all CommonJS modules.

next.js 12 のチュートリアル進めている。
theme-ui を追加したところで、下記のエラーが発生してビルドできなくなった。

Error: require() of ES Module /Users/h.hashimoto/Documents/src/projects/nextjs/next-blog/node_modules/@mdx-js/react/index.js from /Users/h.hashimoto/Documents/src/projects/nextjs/next-blog/node_modules/@theme-ui/mdx/dist/theme-ui-mdx.cjs.dev.js not supported.
Instead change the require of index.js in /Users/h.hashimoto/Documents/src/projects/nextjs/next-blog/node_modules/@theme-ui/mdx/dist/theme-ui-mdx.cjs.dev.js to a dynamic import() which is available in all CommonJS modules.

theme-uiが依存している mds-js というライブラリのバージョンの問題のようだ。
現時点(2022年6月11日)で yarn add すると、 mds-s の2系がインストールされるが、1系しか動かない。

次のようにバージョンを指定してインストールする。

yarn add -D  @mdx-js/react@1