Storybookを入れたときに発生した謎のModule parse failed: Unexpected tokenエラー

frontend

npx storybook@latest initを実行したところ、次のようなエラーが出ました。

storybookでModule parse failed: Unexpected tokenエラーが出ている様子

全文は長いので一部だけ抜粋

ERROR in ./node_modules/.pnpm/@storybook+components@7.5.1_@types+react-dom@18.2.14_@types+react@18.2.33_react-dom@18.2.0_react@18.2.0/node_modules/@storybook/components/dist/chunk-MUPK3MH6.mjs 3:2128
Module parse failed: Unexpected token (3:2128)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| import { __commonJS } from './chunk-JRLSWQMA.mjs';
|
> var require_markdown=__commonJS({"../../node_modules/refractor/lang/markdown.js"

ぱっと見で何が起きてるか全くわかりませんね。
node_modulesを消したりはしてみたんですが効果はなし。
似たようなプロジェクトを作り直してやってみたんですが、全く再現しませんでした。

ダメ元で `pnpm-lock.yaml` と `node_modules` を削除してlockファイルを作り直したら直りました。

一応何が原因だったかを探りたいので、作り直して再生成された `pnpm-lock.yaml` と作り直す前のものを比較してみます。
大きく分けて3つの違いがありました。

/@storybook/react@7.5.1(react-dom@18.2.0)(react@18.2.0)(typescript@5.2.2)の依存であるacornのバージョンが異なる
-  /acorn-import-assertions@1.9.0(acorn@8.11.1):
+   /acorn-import-assertions@1.9.0(acorn@8.11.2):
    resolution: {integrity: sha512-cmMwop9x+8KFhxvKrKfPYmN6/pKTYYHBqLa0DfvVZcKMJWNyWLnaqND7dx/qn66R7ewM1UX5XMaDVP5wlVTaVA==}
    peerDependencies:
      acorn: ^8
    dependencies:
-      acorn: 8.11.1
+      acorn: 8.11.2
    dev: true

  /acorn-jsx@5.3.2(acorn@7.4.1):
    resolution: {integrity: sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==}
    peerDependencies:
      acorn: ^6.0.0 || ^7.0.0 || ^8.0.0
    dependencies:
      acorn: 7.4.1
    dev: true

-   /acorn-jsx@5.3.2(acorn@8.11.1):
+  /acorn-jsx@5.3.2(acorn@8.11.2):
    resolution: {integrity: sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==}
    peerDependencies:
      acorn: ^6.0.0 || ^7.0.0 || ^8.0.0
    dependencies:
-      acorn: 8.11.1
+      acorn: 8.11.2
    dev: true

  /acorn-walk@7.2.0:
    resolution: {integrity: sha512-OPdCF6GsMIP+Az+aWfAAOEt2/+iVDKE7oy6lJ098aoe59oAmK76qV6Gw60SbZ8jHuG2wH058GF4pLFbYamYrVA==}
    engines: {node: '>=0.4.0'}
    dev: true

  /acorn@7.4.1:
    resolution: {integrity: sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A==}
    engines: {node: '>=0.4.0'}
    hasBin: true
    dev: true

-   /acorn@8.11.1:
+  /acorn@8.11.2:
-    resolution: {integrity: sha512-IJTNCJMRHfRfb8un89z1QtS0x890C2QUrUxFMK8zy+RizcId6mfnqOf68Bu9YkDgpLYuvCm6aYbwDatXVZPjMQ==}
+    resolution: {integrity: sha512-nc0Axzp/0FILLEVsm4fNwLCwMttvhEI263QtVPQcbpfZZ3ts0hLsZGOpE6czNlid7CJ9MlyH8reXkpsf3YUY4w==}
    engines: {node: '>=0.4.0'}
    hasBin: true
    dev: true
/next@13.5.6(@babel/core@7.23.2)(react-dom@18.2.0)(react@18.2.0)の依存であるcaniuse-liteのバージョンが異なる
-  /caniuse-lite@1.0.30001554:
-    resolution: {integrity: sha512-A2E3U//MBwbJVzebddm1YfNp7Nud5Ip+IPn4BozBmn4KqVX7AvluoIDFWjsv5OkGnKUXQVmMSoMKLa3ScCblcQ==}
+  /caniuse-lite@1.0.30001555:
+    resolution: {integrity: sha512-NzbUFKUnJ3DTcq6YyZB6+qqhfD112uR3uoEnkmfzm2wVzUNsFkU7AwBjKQ654Sp5cau0JxhFyRSn/tQZ+XfygA==}
next-authのバージョンが異なる
-  /next-auth@4.24.3(next@13.5.6)(react-dom@18.2.0)(react@18.2.0):
-    resolution: {integrity: sha512-n1EvmY7MwQMSOkCh6jhI6uBneB6VVtkYELVMEwVaCLD1mBD3IAAucwk+90kgxramW09nSp5drvynwfNCi1JjaQ==}
+  /next-auth@4.24.4(next@13.5.6)(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-5DGffi+OpkbU62vPQIJ1z+hFnmow+ec5Qrn9m6eoglIO51m0DlrmLxBduZEwKAYDEg9k2joi1yelgmq1vqK3aQ==}
    peerDependencies:
-      next: ^12.2.5 || ^13
+      next: ^12.2.5 || ^13 || ^14
      nodemailer: ^6.6.5
      react: ^17.0.2 || ^18
      react-dom: ^17.0.2 || ^18

最も怪しいのはacronですね。ということでacronの直近のコミット履歴からissueをたどるとこんなものを発見しました。
github.com
github.com
まさに今回発生した現象という感じですね。
というわけでインストールタイミングが悪くて、たまたま依存モジュールの不具合を踏んでしまったというのが事の顛末でした。