<storybook>ReferenceError: process is not defined

storybook v7.4.6(vite)
next.js v13.4
pnpm v8

storybook に aliasを追加した時に出たエラー。

main.ts

// ...
async viteFinal(config) {
    config.resolve = {
      // alias 追加
      alias: [
        {
          find: '@/components',
          replacement: path.resolve(__dirname, '../components'),
        },
        {
          find: '@/lib',
          replacement: path.resolve(__dirname, '../lib'),
        },
        {
          find: '@',
          replacement: path.resolve(__dirname, '../app'),
        },
      ],
    }
    return config
}

ReferenceError: process is not defined
    at node_modules/.pnpm/util@0.12.5/node_modules/util/util.js (http://localhost:6006/node_modules/.cache/sb-vite/deps/chunk-VYSMOPAB.js?v=c5b7c852:3666:5)
    at __require2 (http://localhost:6006/node_modules/.cache/sb-vite/deps/chunk-AUZ3RYOM.js?v=c5b7c852:18:50)
    at node_modules/.pnpm/assert@2.1.0/node_modules/assert/build/internal/assert/assertion_error.js (http://localhost:6006/node_modules/.cache/sb-vite/deps/chunk-VYSMOPAB.js?v=c5b7c852:4593:20)
    at __require2 (http://localhost:6006/node_modules/.cache/sb-vite/deps/chunk-AUZ3RYOM.js?v=c5b7c852:18:50)
    at node_modules/.pnpm/assert@2.1.0/node_modules/assert/build/assert.js (http://localhost:6006/node_modules/.cache/sb-vite/deps/chunk-VYSMOPAB.js?v=c5b7c852:6054:26)
    at __require2 (http://localhost:6006/node_modules/.cache/sb-vite/deps/chunk-AUZ3RYOM.js?v=c5b7c852:18:50)
    at http://localhost:6006/node_modules/.cache/sb-vite/deps/chunk-VYSMOPAB.js?v=c5b7c852:6567:24
    at node_modules/.pnpm/doctrine@3.0.0/node_modules/doctrine/lib/utility.js (http://localhost:6006/node_modules/.cache/sb-vite/deps/chunk-VYSMOPAB.js?v=c5b7c852:6568:7)
    at __require2 (http://localhost:6006/node_modules/.cache/sb-vite/deps/chunk-AUZ3RYOM.js?v=c5b7c852:18:50)
    at http://localhost:6006/node_modules/.cache/sb-vite/deps/chunk-VYSMOPAB.js?v=c5b7c852:6579:17

解決策

vite が process をサポートしていないため Next.js の環境変数の解決周りの噛み合わせで起きているらしい。
process.env を適当に定義してあげると解消。

main.ts

// ...
async viteFinal(config) {
    config.define = { 'process.env': {} }, // 追加
    config.resolve = {
      // ...
}

一時的な対応なのであまり良くないかも。
Next.js が webpack なら storybookも webpack の方が良い気がする。。

参考