allow import server action in client side

[himself65]

See https://github.com/himself65/waku-openai/tree/issue-2

cp .env.template .env
pnpm run dev

Error:

TypeError: Cannot read properties of undefined (reading 'A')

"use client"
import { useFormState } from "react-dom"
import { generateResponse } from '../actions/chat.js'

export function Client () {
  const [state, dispatch] = useFormState(
    generateResponse,
    null
  )
  return (
    <div>
      {state}
      <button
        onClick={() => {
          dispatch()
        }}
      >
        Generate Response
      </button>
    </div>
  )
}

chat.tsx:

'use server'
import { getEnv } from 'waku'

const apiKey = getEnv('A')!

export async function generateResponse () {
  return `apiKey: ${apiKey}`
}

.env.local:

A=Hello

[dai-shi]

This is simply not supported. You need to pass the server reference from a server component to a client component. "use server" in a function isn't supported either.

To support it, we would need to write a custom client bundler. (We don't have one, and use Vite as is.)

[himself65]

I just saw the similar code from
https://github.com/rauchg/react-postgres-components/blob/0cdf49a8faf0cb8a79cdc0d2702d8d91749db27b/app/demos.tsx#L1-L15

[himself65]

OK, my mistake, they have prebuild script for such feature. Let me try if we can do the same thing in waku https://github.com/rauchg/react-postgres-components/tree/main/build

[himself65]

Closing as this not waku issue

[himself65]

Reopen this, as this is like what we will support

[dai-shi]

we may try it for v0.21.0, but no guarantee.