formAction$ appears not to bundle correctly

[imMadsen]

Found this issue when trying to integrate drizzle using the following guide.

The problem is when using the database connection within a formAction$ like in the following example

formAction$<LoginForm>(() => {
  const sql = postgres("postgresql://postgres:[email protected]:5432/cupon");
  const db = drizzle(sql);
}, valiForm$(LoginSchema));

One will get this error (Full log can be found here). It is my understanding from the documentation that formAction$ is executed on the server. Note that executing the same function within a server$, for an example will not lead to any issues. The error will also only occur when building the qwik app.

file: C:/Users/root/Documents/GitHub/cupon-app/node_modules/postgres/src/connection.js:5:9
 
3: import crypto from 'crypto'
4: import Stream from 'stream'
5: import { performance } from 'perf_hooks'
            ^
6:
7: import { stringify, handleValue, arrayParser, arraySerializer } from './types.js'
 
    at getRollupError (file:///C:/Users/root/Documents/GitHub/cupon-app/node_modules/rollup/dist/es/shared/parseAst.js:392:41)
    at error (file:///C:/Users/root/Documents/GitHub/cupon-app/node_modules/rollup/dist/es/shared/parseAst.js:388:42)
    at Module.error (file:///C:/Users/root/Documents/GitHub/cupon-app/node_modules/rollup/dist/es/shared/node-entry.js:14844:16)
    at Module.traceVariable (file:///C:/Users/root/Documents/GitHub/cupon-app/node_modules/rollup/dist/es/shared/node-entry.js:15291:29)
    at ModuleScope.findVariable (file:///C:/Users/root/Documents/GitHub/cupon-app/node_modules/rollup/dist/es/shared/node-entry.js:13192:39)
    at FunctionScope.findVariable (file:///C:/Users/root/Documents/GitHub/cupon-app/node_modules/rollup/dist/es/shared/node-entry.js:5221:38)
    at FunctionBodyScope.findVariable (file:///C:/Users/root/Documents/GitHub/cupon-app/node_modules/rollup/dist/es/shared/node-entry.js:5221:38)
    at FunctionScope.findVariable (file:///C:/Users/root/Documents/GitHub/cupon-app/node_modules/rollup/dist/es/shared/node-entry.js:5221:38)
    at FunctionBodyScope.findVariable (file:///C:/Users/root/Documents/GitHub/cupon-app/node_modules/rollup/dist/es/shared/node-entry.js:5221:38)
    at MemberExpression.bind (file:///C:/Users/root/Documents/GitHub/cupon-app/node_modules/rollup/dist/es/shared/node-entry.js:6860:49)

A temporary solution I've found is simply using the server$, and passing it as the function for the formAction$, but this will make TypeScript pretty mad.

export const myFunction = server$(async (args: any) => {
  const sql = postgres("postgresql://postgres:[email protected]:5432/cupon");
  const db = drizzle(sql);
})

// @ts-ignore typescript get very mad 😢
export const useFormAction = formAction$<LoginForm>(myFunction, valiForm$(LoginSchema));

[fabian-hiller]

This is a known issue that I plan to address in the coming months. See this issue. As a workaround, I recommend wrapping all of your formAction$ code in isServer:

formAction$<LoginForm>(() => {
  if (isServer) {
    const sql = postgres("postgresql://postgres:[email protected]:5432/cupon");
    const db = drizzle(sql);
  }
}, valiForm$(LoginSchema));