[🐞] How to create a Form in Qwik to be deployed in Vercel?

[Maikpwwq]

Which component is affected?

Qwik City (routing)

Describe the bug

I have created a minimal reproduction in a Qwik empty project, using the static adapter. Take a look first:

Github Project Repository Vercel Project

Get Code

git clone https://github.com/Maikpwwq/qwik-ssg-modular-forms.git
cd ./qwik-ssg-modular-forms
pnpm i
pnpm run start

Take into account I am trying to build just a simple Form in Qwik. I just need to sent it, that's because I am using my keys to access Mongo Or Supabase.

Reproduction

https://github.com/Maikpwwq/qwik-ssg-modular-forms

Steps to reproduce

Follow those steps to create Qwik empty project, then use pnpm run qwik add to add adapter to SSG this because Vercel use static content. Then create modular-forms: It works in local, when it is deployed to Vercel doesn't works.

System Info

System:
    OS: Linux 6.2 Ubuntu 22.04.3 LTS 22.04.3 LTS (Jammy Jellyfish)
    CPU: (16) x64 AMD Ryzen 7 5700G with Radeon Graphics
    Memory: 2.19 GB / 15.00 GB
    Container: Yes
    Shell: 5.1.16 - /bin/bash
  Binaries:
    Node: 20.1.0 - ~/.nvm/versions/node/v20.1.0/bin/node
    Yarn: 1.22.19 - /usr/bin/yarn
    npm: 9.6.4 - ~/.nvm/versions/node/v20.1.0/bin/npm
    pnpm: 8.6.12 - ~/.local/share/pnpm/pnpm
  npmPackages:
    @builder.io/qwik: ^1.2.6 => 1.2.6 
    @builder.io/qwik-city: ^1.2.6 => 1.2.6 
    @builder.io/qwik-react: 0.5.0 => 0.5.0 
    undici: 5.22.1 => 5.22.1 
    vite: 4.4.0 => 4.4.0

Additional Information

No response

[mhevery]

You can't use formAction$ with static content. There is no server, it is SSG. This can't work. You need to deploy to edge environment to use formAction$.

[Maikpwwq]

Ok, so I update my Form project to use Vercel Edge Adapter witch disable that SSG. I also have installed and implemented polyfills to vite.config.js using plugin import { nodePolyfills } from 'vite-plugin-node-polyfills'. Is important to notice that some packages needs to be pre-processed by Vite in production using noExternal. My file vite.config.ts:

import { defineConfig } from "vite";
import { qwikVite } from "@builder.io/qwik/optimizer";
import { qwikCity } from "@builder.io/qwik-city/vite";
import tsconfigPaths from "vite-tsconfig-paths";
import { qwikReact } from "@builder.io/qwik-react/vite";
import { nodePolyfills } from 'vite-plugin-node-polyfills'

const isProd = process.env.NODE_ENV === 'production'

const noExternal: string[] = []
if (isProd) {
    noExternal.push(
        ...[
            // Needs to be pre-processed by Vite in production
            '@mui/base',
            '@mui/icons-material',
            '@mui/material',
            '@mui/utils',
            '@mui/x-data-grid',
            '@emotion/react',
            '@emotion/styled',
            'mongodb',
            'mongoose',
            'uuid',
            'clsx',
            'undici',
            '@supabase*',
        ]
    )
}

export default defineConfig(() => {
  return {
    plugins: [
      nodePolyfills({
        // To exclude specific polyfills, add them to this list.
        exclude: [
          'fs', // Excludes the polyfill for `fs` and `node:fs`.
        ],
        // Whether to polyfill specific globals.
        globals: {
          Buffer: true, // can also be 'build', 'dev', or false
          global: true,
          process: true,
        },
        // Whether to polyfill `node:` protocol imports.
        // protocolImports: true,
      }), 
      qwikCity(), qwikVite(), tsconfigPaths(), qwikReact()
    ],
    preview: {
      headers: {
        "Cache-Control": "public, max-age=600",
      },
    },
    ssr: {
      noExternal
    },
  };
});

In my local the project works well, for both forms storing data with MongoDB and with Supabase. But In Vercel deployed version it not works yet.

[mhevery]

Can you send me a URL to the deplayed application so I can better understand what the browser is seeing?

[Maikpwwq]

@mhevery this is my vercel domain https://qwik-app-psi-sable.vercel.app/

[gioboa]

Here is a simple repo with routeAction$ and it's working like a charm. GH Repo Vercel deploy

[gioboa]

SSG this because Vercel use static content

This is not true, Vercel has SSR too. Please use the Vercel integration

[Maikpwwq]

Here is a simple repo with routeAction$ and it's working like a charm. GH Repo Vercel deploy

I watched your code example implementing routeAction$, but that async function you created doesn't make any await call, qwik render correctly the form and the client interaction, even though I am facing issues with the server when publishing my changes into DB.

[Maikpwwq]

SSG this because Vercel use static content

This is not true, Vercel has SSR too. Please use the Vercel integration

How I comment previously, currently my project was updated and now it uses Vercel Edge Adapter.

I was no clear about that, I first try to deploy in netlify, but have issues because there is no index.html file in Qwik projects required by the static host. That was why I tried with static generation in my Qwik project.

[gioboa]

routeAction$ is working. Let's continue this discussion in Qwik Discord, this is not the right place for this kind of assistance.