npx storybook@latest init
を実行したところ、次のようなエラーが出ました。
全文は長いので一部だけ抜粋
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
まさに今回発生した現象という感じですね。
というわけでインストールタイミングが悪くて、たまたま依存モジュールの不具合を踏んでしまったというのが事の顛末でした。