Support Waku? #208

dai-shi · 2023-07-12T02:03:40Z

Waku is an ongoing project to develop a React Server Component based framework. It would be super nice if we can support Waku+Kuma UI.

At a glance, there seems to be an issue with vite plugin which can't be resolvable on the Waku end. Though, Waku's support for CSS is still work in progress, so there might be potential challenges somewhere.

Just dropping a note to see if there could be a collaboration.

poteboy · 2023-07-12T03:28:06Z

Hi @dai-shi ,

I'm extremely thrilled to receive this offer. The opportunity of bringing together Waku and Kuma UI is indeed exciting and I sincerely appreciate your interest!

Regarding the vite plugin issue, I'm certainly willing to explore potential solutions and assist in any way possible. I'm absolutely open to collaboration and exploring how we can make this integration happen!

Waku-waku 🙌🙌

dai-shi · 2023-07-12T05:41:23Z

Waku-waku! 🤩

Here's what I tried:

yarn create waku
cd waku-example
yarn add @kuma-ui/core @kuma-ui/vite
echo 'import { defineConfig } from "vite"; import KumaUI from "@kuma-ui/vite"; export default defineConfig({ plugins: [KumaUI()] });' > vite.config.js
yarn dev

The error is TypeError [Error]: import_react.default.createContext is not a function which probably means, we try to use KumaUI plugin in RSC and failed. But, I'm not very confident how it happens. Waku uses Vite in a weird way as Vite doesn't know anything about RSC.

kotarella1110 · 2023-07-12T18:25:07Z

@dai-shi

I resolved the issue on the Kuma side. For more details, please refer to the following comment:

#211 (comment)

Afterwards, we tested the dev server and discovered that the @kuma-ui/vite injects the style tags at runtime specifically for the dev server.

https://github.com/poteboy/kuma-ui/blob/b001a00219142f93cdfd1e497d5ad1b2e3b6a78d/packages/vite/src/index.ts#L114

Therefore, we decided to investigate by switching to the usage of virtual modules to import CSS. However, while it works in Kuma's Vite example, it doesn't work in Waku.

fda7639

The error message is as follows:

[vite] Error when evaluating SSR module /src/components/App.tsx: failed to import "virtual:kuma-ui/Users/kotarella1110/Develop/sandbox/waku-example/src/components/App.css"
|- TypeError: Cannot read properties of undefined (reading 'get')                                  
    at TransformContext.transform (file:///Users/kotarella1110/Develop/sandbox/waku-example/node_modules/vite/dist/node/chunks/dep-210e5610.js:38307:56)
    at Object.transform (file:///Users/kotarella1110/Develop/sandbox/waku-example/node_modules/vite/dist/node/chunks/dep-210e5610.js:44199:62)
    at async loadAndTransform (file:///Users/kotarella1110/Develop/sandbox/waku-example/node_modules/vite/dist/node/chunks/dep-210e5610.js:54834:29)
    at async instantiateModule (file:///Users/kotarella1110/Develop/sandbox/waku-example/node_modules/vite/dist/node/chunks/dep-210e5610.js:55759:10)

I believe that if virtual module support can be added on the Waku side, Kuma should work without any issues. Is it possible to add support for virtual modules?

dai-shi · 2023-07-13T01:37:05Z

dai-shi/waku#103 may (or may not) help for virtual modules.
You can install codesandbox-ci build.

btw, would you be interested in adding CodeSandbox CI in this project? It would make it easy to try a PR.

dai-shi · 2023-07-13T02:23:22Z

It seems to be working with dai-shi/waku#103 and #211.

kotarella1110 · 2023-07-13T03:50:17Z

btw, would you be interested in adding CodeSandbox CI in this project? It would make it easy to try a PR.

I just learned about CodeSandbox CI, a useful GitHub app. I'll give it a try!

It seems to be working with dai-shi/waku#103 and #211.

That's wonderful! Thank you for your efforts 💚
I'll also check the functionality tonight. I'm feeling "Waku Waku" about doing that work 🤩

kotarella1110 · 2023-07-13T14:52:48Z

@dai-shi

btw, would you be interested in adding CodeSandbox CI in this project? It would make it easy to try a PR.

I have just installed the CodeSandbox CI App. It seems to be working well. Thanks 👍

It seems to be working with dai-shi/waku#103 and #211.

Unfortunately, Kuma UI does not seem to work. It looks like the virtual module is not loading properly.

In the Kuma's example, the virtual module is correctly imported as shown below.

In Waku's example, the virtual module is not imported as shown below.

Also, it appears that an error occurs when trying to generate dynamic styles.

Even stranger, an error seems to occur if the string "@kuma-ui/core" exists in the Client Component. Therefore, the Kuma UI cannot be used in the Client Component 🙏

"use client";

import { useState } from "react";
+ // @kuma-ui/core

export const Counter = () => {
  const [count, setCount] = useState(0);
  return (
    <div style={{ border: "3px blue dashed", margin: "1em", padding: "1em" }}>
      <p>Count: {count}</p>
      <button onClick={() => setCount((c) => c + 1)}>Increment</button>
      <h3>This is a client component.</h3>
    </div>
  );
};

I checked them with this example: https://github.com/kotarella1110-sandbox/waku-kuma-ui-example

dai-shi · 2023-07-14T07:01:31Z

Thanks for trying. Should the virtual module be imported on client bundle, or server bundle? It's tricky because Waku uses Vite twice (or more) for RSC and for dev server. I will try your reproduction.

Current status

vite plugin error
static prop
dynamic prop
client components

dai-shi · 2023-07-14T07:41:24Z

So, the first problem is even if we have "@kuma-ui/core" in App.tsx and add import "virtual:kuma-ui/components/App.css";, it's a server component and the import statement doesn't go to the browser.

Even if I manually add the import statement in main.tsx, it causes an error: [vite] Internal server error: Failed to resolve import "virtual:kuma-ui/...

I think this is also the problem with CSS Modules: Use css in a server component, and add the css file on client files.

dai-shi · 2023-07-15T08:40:58Z

dai-shi/waku#103 is merged and dai-shi/waku#106 is opened.
It's for CSS Modules, but the hope is to support virtual modules too.
So far, it doesn't work... 😢

Edit 1: Fixed something but the virtual module is 404. Can you investigate it please? @kotarella1110

kotarella1110 · 2023-07-16T03:33:40Z

Thanks. I wil investigate it 👍

kotarella1110 · 2023-07-16T03:45:09Z

@dai-shi
I tried with the example below, but the 404 error was not reproduced...
https://github.com/kotarella1110-sandbox/waku-kuma-ui-example
Can you tell me how to reproduce the 404 error?

dai-shi · 2023-07-16T04:08:01Z

There seems to be an issue in Waku's ssr middleware. Please try this:

diff --git a/package.json b/package.json
index e99e0e1..820d083 100644
--- a/package.json
+++ b/package.json
@@ -4,7 +4,7 @@
   "type": "module",
   "private": true,
   "scripts": {
-    "dev": "waku dev --with-ssr",
+    "dev": "waku dev",
     "build": "waku build",
     "start": "waku start --with-ssr"
   },

dai-shi · 2023-12-20T14:13:16Z

Waku has been improved quite a lot since then.
It might be worth trying it again.

kotarella1110 · 2023-12-20T14:40:45Z

Thanks for the update!
I'll give Waku another shot!!!!

kotarella1110 · 2023-12-20T16:27:46Z

@dai-shi

I attempted to launch the waku project before confirming integration with Kuma UI by executing the following commands:

pnpm create waku
cd waku-project
pnpm install
pnpm dev

However, it seems that the following error occurred:

> [email protected] dev /Users/kotarella1110/Develop/sandbox/waku-project
> waku dev --with-ssr

file:///Users/kotarella1110/Develop/sandbox/waku-project/node_modules/.pnpm/@[email protected]/node_modules/@hono/node-server/dist/index.mjs:123
Object.setPrototypeOf(Response2, GlobalResponse);
       ^

TypeError: Object prototype may only be an Object or null: undefined
    at Function.setPrototypeOf (<anonymous>)
    at file:///Users/kotarella1110/Develop/sandbox/waku-project/node_modules/.pnpm/@[email protected]/node_modules/@hono/node-server/dist/index.mjs:123:8
    at ModuleJob.run (node:internal/modules/esm/module_job:193:25)
    at async Promise.all (index 0)
    at async ESMLoader.import (node:internal/modules/esm/loader:526:24)
    at async loadESM (node:internal/process/esm_loader:91:5)
    at async handleMainPromise (node:internal/modules/run_main:65:12)
 ELIFECYCLE  Command failed with exit code 1.

Do you know what might be causing this issue?

dai-shi · 2023-12-20T23:45:42Z

I've never seen it. What's your Node.js version?

kotarella1110 · 2023-12-21T02:01:44Z

Oops, I apologize 🙏
I forgot to switch the Node version and was using v16.
After switching to v18, the dev server started without any issues.
Thanks!

kotarella1110 · 2023-12-21T12:50:53Z

@dai-shi

I have installed the latest Waku and Kuma UI: kuma-ui/waku-kuma-ui-example#1
But it seems that when I launch the dev server, the following error occurs:

Error: [vite] Named export 'useState' not found. The requested module 'react' is a CommonJS module, which may not support all module.exports as named exports.
CommonJS modules can always be imported via the default export, for example using:

import pkg from 'react';
const {useState} = pkg;

When you remove the line importing the virtual CSS module in node_modules/@kuma-ui/vite/dist/index.mjs and launch the dev server, it starts up without any issues.

-       return `import "${url}";
- ` + result.code;
+ return result.code;

Is there a good way to resolve this?

dai-shi · 2023-12-21T13:27:13Z

Is the line importing 'react'?

dai-shi/waku#215 this might help.
Can you try this codesandbox build?
https://ci.codesandbox.io/status/dai-shi/waku/pr/215/builds/451677
Otherwise, I'm not sure...

dai-shi · 2024-03-28T23:13:50Z

There have been multiple improvements in the Waku side.
Can anyone try the latest version?

kotarella1110 mentioned this issue Jul 13, 2023

chore: add codesandbox ci #212

Merged

poteboy added the help wanted Extra attention is needed label Aug 5, 2023

dai-shi mentioned this issue Mar 28, 2024

[Umbrella] Third-party library compatibility issues dai-shi/waku#423

Open

9 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Support Waku? #208

Support Waku? #208

dai-shi commented Jul 12, 2023

poteboy commented Jul 12, 2023

dai-shi commented Jul 12, 2023

kotarella1110 commented Jul 12, 2023 •

edited by poteboy

Loading

dai-shi commented Jul 13, 2023

dai-shi commented Jul 13, 2023

kotarella1110 commented Jul 13, 2023

kotarella1110 commented Jul 13, 2023 •

edited

Loading

dai-shi commented Jul 14, 2023 •

edited

Loading

dai-shi commented Jul 14, 2023

dai-shi commented Jul 15, 2023 •

edited

Loading

kotarella1110 commented Jul 16, 2023

kotarella1110 commented Jul 16, 2023 •

edited

Loading

dai-shi commented Jul 16, 2023

dai-shi commented Dec 20, 2023

kotarella1110 commented Dec 20, 2023

kotarella1110 commented Dec 20, 2023 •

edited

Loading

dai-shi commented Dec 20, 2023

kotarella1110 commented Dec 21, 2023

kotarella1110 commented Dec 21, 2023 •

edited

Loading

dai-shi commented Dec 21, 2023

dai-shi commented Mar 28, 2024

Support Waku? #208

Support Waku? #208

Comments

dai-shi commented Jul 12, 2023

poteboy commented Jul 12, 2023

dai-shi commented Jul 12, 2023

kotarella1110 commented Jul 12, 2023 • edited by poteboy Loading

dai-shi commented Jul 13, 2023

dai-shi commented Jul 13, 2023

kotarella1110 commented Jul 13, 2023

kotarella1110 commented Jul 13, 2023 • edited Loading

dai-shi commented Jul 14, 2023 • edited Loading

dai-shi commented Jul 14, 2023

dai-shi commented Jul 15, 2023 • edited Loading

kotarella1110 commented Jul 16, 2023

kotarella1110 commented Jul 16, 2023 • edited Loading

dai-shi commented Jul 16, 2023

dai-shi commented Dec 20, 2023

kotarella1110 commented Dec 20, 2023

kotarella1110 commented Dec 20, 2023 • edited Loading

dai-shi commented Dec 20, 2023

kotarella1110 commented Dec 21, 2023

kotarella1110 commented Dec 21, 2023 • edited Loading

dai-shi commented Dec 21, 2023

dai-shi commented Mar 28, 2024

kotarella1110 commented Jul 12, 2023 •

edited by poteboy

Loading

kotarella1110 commented Jul 13, 2023 •

edited

Loading

dai-shi commented Jul 14, 2023 •

edited

Loading

dai-shi commented Jul 15, 2023 •

edited

Loading

kotarella1110 commented Jul 16, 2023 •

edited

Loading

kotarella1110 commented Dec 20, 2023 •

edited

Loading

kotarella1110 commented Dec 21, 2023 •

edited

Loading