Kuma UI が Windows 環境で動作しない件について

Kuma UI を Windows で利用した場合にエラーとなる件についての調査メモです。

事象

Windows 環境で Kuma UI を実行したところ、次のエラーが発生します。

調査結果 ※WIP

現在の example を Windows 環境で実行すると、3/4 エラーとなります。

報告のあったエラーは、Next App Router 固有の自動だと思われます。現在、ビルドエラーが Windows 固有のものかが判断付いていないため、引き続き調査中です。

対象	結果	メモ
example/next	OK
example/next-app-router	NG	報告の合った事象が発生することを確認。
example/vite	NG	ビルドエラー。調査中。
example/webpack	NG	ビルドエラー。調査中。

確認方法

pnpm build --filter=<target> で、対象別にビルドができるか確認
pnpm -C ./example/<target> dev で、対象別に開発モードで動作するか確認

(1/4) example/next : OK

確認コマンド pnpm -C ./example/next dev

ビルドエラーが発生せず、Kuma UI が動作することを確認しました。

(2/4) example/next-app-router : NG

確認コマンド pnpm -C ./example/next-app-router dev

現リポジトリーの状態で実行すると、次のエラーで開発サーバーが起動しないことを確認しました。

> pnpm -C .\example\next-app-router dev

> [email protected] dev C:\Users\asamizu\Documents\Workspace\kuma-ui\example\next-app-router
> next dev

- ready started server on 0.0.0.0:3000, url: http://localhost:3000
ReferenceError: process is not defined
    at ../../node_modules/.pnpm/[email protected]/node_modules/react/index.js (kuma.config.ts:2430:5)
    at __require (kuma.config.ts:38:50)
    at ../../packages/core/dist/components/Box/react/index.js (kuma.config.ts:5282:33)
    at __require (kuma.config.ts:38:50)
    at ../../packages/core/dist/components/Box/index.js (kuma.config.ts:5316:30)
    at __require (kuma.config.ts:38:50)
    at ../../packages/core/dist/components/index.js (kuma.config.ts:6429:37)
    at __require (kuma.config.ts:38:50)
    at kuma.config.ts:6495:34
    at Script.runInContext (node:vm:141:12) {
  type: 'ReferenceError'
}
 ELIFECYCLE  Command failed with exit code 1.

一旦 Next App Router のプロジェクトを作成し直したところ、いただいたエラーが再現できました。

(プロジェクト再作成)
> pnpm create next-app@latest
√ What is your project named? ... next-app-router2
√ Would you like to use TypeScript? ... No / *Yes*
√ Would you like to use ESLint? ... No / *Yes*
√ Would you like to use Tailwind CSS? ... *No* / Yes
√ Would you like to use `src/` directory? ... No / *Yes*
√ Would you like to use App Router? (recommended) ... No / *Yes*
√ Would you like to customize the default import alias? ... *No* / Yes
Creating a new Next.js app in C:\Users\rabitarochan\Documents\Workspace\kuma-ui\example\next-app-router2.

(package.json に、@kuma-ui/core と @kuma-ui/next-plugin をそれぞれ追加)
...省略...

(インストール)
> pnpm install

エラー出力

- error C:UsersasamizuDocumentsWorkspacekuma-uiexample
ext-app-router2/.next/cache/kuma/1598ee2760c5daf7661b1dbc244fdff0.css
Module build failed: UnhandledSchemeError: Reading from "C:UsersasamizuDocumentsWorkspacekuma-uiexample
ext-app-router2/.next/cache/kuma/1598ee2760c5daf7661b1dbc244fdff0.css" is not handled by plugins (Unhandled scheme).
Webpack supports "data:" and "file:" URIs by default.
You may need an additional plugin to handle "c:" URIs.
Import trace for requested module:
C:UsersasamizuDocumentsWorkspacekuma-uiexample
ext-app-router2/.next/cache/kuma/1598ee2760c5daf7661b1dbc244fdff0.css
./src/app/dynamic.tsx

なお、どの API (styled, css, k) でもスタイルなしではエラーが発生せず、スタイルがつくとエラーとなりました。

styled

import { styled } from "@kuma-ui/core";

// OK
const Component = styled("div")``;

// NG
const Component = styled("div")`
  color: red;
`;

css

import { css } from "@kuma-ui/core";

// OK ※ 'Using the "css" in runtime is not supported.' が表示される。
const Component = <div className={css``}>Hello Kuma UI !</div>;

// NG
const Component = (
  <div
    className={css`
      color: red;
    `}
  >
    Hello Kuma UI !
  </div>
);

k

import { k } from "@kuma-ui/core";

// OK
const Component = <k.div>Hello Kuma UI !</k.div>;

// NG
const Component = <k.div color="red">Hello Kuma UI !</k.div>;

(3/4) Vite : NG ※調査中

確認コマンド pnpm -C ./example/vite dev

次のエラーが発生し、開発サーバーが起動しませんでした。

> pnpm -C .\example\vite dev                  

> [email protected] dev C:\Users\asamizu\Documents\Workspace\kuma-ui\example\vite     
> vite

failed to load config from C:\Users\asamizu\Documents\Workspace\kuma-ui\example\vite\vite.config.ts
error when starting dev server:
Error [ERR_MODULE_NOT_FOUND]: Cannot find module 'C:\Users\asamizu\Documents\Workspace\kuma-ui\packages\core\dist\components\index' imported from C:\Users\asamizu\Documents\Workspace\kuma-ui\packages\core\dist\components\componentList.mjs
    at new NodeError (node:internal/errors:399:5)
    at finalizeResolution (node:internal/modules/esm/resolve:326:11)
    at moduleResolve (node:internal/modules/esm/resolve:945:10)
    at defaultResolve (node:internal/modules/esm/resolve:1153:11)
    at nextResolve (node:internal/modules/esm/loader:163:28)
    at ESMLoader.resolve (node:internal/modules/esm/loader:838:30)
    at ESMLoader.getModuleJob (node:internal/modules/esm/loader:424:18)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/module_job:77:40)
    at link (node:internal/modules/esm/module_job:76:36)
 ELIFECYCLE  Command failed with exit code 1.

Vite プロジェクトを 1 から作成して動くことは確認済みなので、こちらも example を再作成して再調査します。

(4/4) Webpack ※調査中