Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Support Waku? #208

Open
Tracked by #423
dai-shi opened this issue Jul 12, 2023 · 21 comments
Open
Tracked by #423

Support Waku? #208

dai-shi opened this issue Jul 12, 2023 · 21 comments
Labels
help wanted Extra attention is needed

Comments

@dai-shi
Copy link

dai-shi commented Jul 12, 2023

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
Copy link
Member

poteboy commented Jul 12, 2023

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
Copy link
Author

dai-shi commented Jul 12, 2023

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
Copy link
Member

kotarella1110 commented Jul 12, 2023

@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
Copy link
Author

dai-shi commented Jul 13, 2023

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
Copy link
Author

dai-shi commented Jul 13, 2023

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

image

@kotarella1110
Copy link
Member

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
Copy link
Member

kotarella1110 commented Jul 13, 2023

@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.

スクリーンショット 2023-07-13 19 03 46

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

スクリーンショット 2023-07-13 23 40 02

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
Copy link
Author

dai-shi commented Jul 14, 2023

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
Copy link
Author

dai-shi commented Jul 14, 2023

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
Copy link
Author

dai-shi commented Jul 15, 2023

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
Copy link
Member

Thanks. I wil investigate it 👍

@kotarella1110
Copy link
Member

kotarella1110 commented Jul 16, 2023

@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
Copy link
Author

dai-shi commented Jul 16, 2023

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"
   },

@poteboy poteboy added the help wanted Extra attention is needed label Aug 5, 2023
@dai-shi
Copy link
Author

dai-shi commented Dec 20, 2023

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

@kotarella1110
Copy link
Member

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

@kotarella1110
Copy link
Member

kotarella1110 commented Dec 20, 2023

@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
Copy link
Author

dai-shi commented Dec 20, 2023

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

@kotarella1110
Copy link
Member

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
Copy link
Member

kotarella1110 commented Dec 21, 2023

@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
Copy link
Author

dai-shi commented Dec 21, 2023

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
Copy link
Author

dai-shi commented Mar 28, 2024

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
help wanted Extra attention is needed
Projects
None yet
Development

No branches or pull requests

3 participants