Array insert/remove helpers break in production builds

[cwoolum]

I have the following code

<FieldArray name="hours">
          {(fieldArray) => (
            <>
              {fieldArray.items.map((item: any, index: any) => {
                return (
                  <div key={item} class="flex flex-wrap -mx-3 mb-6">
                    <div class="w-full md:w-1/4 px-3 mb-6 md:mb-0">
                      <Field name={`${fieldArray.name}.${index}.day`}>
                        {(field: { error: any; value: any }, props) => (
                          <>
                            <Select
                              {...props}
                              value={field.value}
                              options={[
                                { label: "Sunday", value: "0" },
                                { label: "Monday", value: "1" },
                                { label: "Tuesday", value: "2" },
                                { label: "Wednesday", value: "3" },
                                { label: "Thursday", value: "4" },
                                { label: "Friday", value: "5" },
                                { label: "Saturday", value: "6" },
                              ]}
                              error={field.error}
                              label="Day of week"
                            />
                          </>
                        )}
                      </Field>
                    </div>

                    <div class="w-full md:w-1/4 px-3 mb-6 md:mb-0">
                      <Field name={`${fieldArray.name}.${index}.open`}>
                        {(field: { error: any; value: any }, props) => (
                          <TextInput
                            {...props}
                            label="Open "
                            wrapperClass="col-md-4"
                            required="true"
                            error={field.error}
                            type="time"
                            value={field.value}
                          />
                        )}
                      </Field>
                    </div>

                    <div class="w-full md:w-1/4 px-3 mb-6 md:mb-0">
                      <Field name={`${fieldArray.name}.${index}.close`}>
                        {(field: { error: any; value: any }, props) => (
                          <TextInput
                            {...props}
                            label="Close"
                            required="true"
                            error={field.error}
                            wrapperClass="col-md-4"
                            type="time"
                            value={field.value}
                          />
                        )}
                      </Field>
                    </div>
                    <div class="w-full md:w-1/4 px-3 mb-6 md:mb-0">
                      <Button
                        type="button"
                        onClick$={() =>
                          remove(barForm, "hours", {
                            at: index,
                          }
                        )}
                      >
                        Delete
                      </Button>
                    </div>
                  </div>
                );
              })}

              <Button
                type="button"
                onClick$={() =>
                  insert(barForm, "hours", {
                    value: { day: "Monday", open: "", close: "" },
                  })
                }
              >
                Add row
              </Button>
            </>
          )}
        </FieldArray>

The code works fine when I'm developing but when deployed, it starts breaking with the error TypeError: p is not a function. I haven't figured out a way to get sourcemaps in production builds.

if (t.isConnected)
  try {
    e[n] = [t, s, r],
    d("qsymbol", {
      symbol: c,
      element: t,
      reqTime: f
    }),
    await p(s, t)
  finally {
    e[n] = u
  }
}

[fabian-hiller]

What framework and versions are you using?

[cwoolum]

System:
    OS: Windows 10 10.0.22631
    CPU: (16) x64 Intel(R) Core(TM) i9-9980HK CPU @ 2.40GHz
    Memory: 16.59 GB / 31.70 GB
Binaries:
  Node: 18.17.1 - C:\Program Files\nodejs\node.EXE
  Yarn: 1.22.19 - ~\AppData\Roaming\npm\yarn.CMD
  npm: 9.6.6 - C:\Program Files\nodejs\npm.CMD
  pnpm: 8.6.7 - ~\AppData\Roaming\npm\pnpm.CMD
Browsers:
  Chrome: 116.0.5845.180
  Edge: Spartan (44.22621.2271.0), Chromium (116.0.1938.69)
  Internet Explorer: 11.0.22621.1
npmPackages:
  @builder.io/partytown: ^0.8.0 => 0.8.1
  @builder.io/qwik: ^1.2.10 => 1.2.10
  @builder.io/qwik-city: ^1.2.10 => 1.2.10
  @modular-forms/qwik: ^0.20.2 => 0.20.2

[fabian-hiller]

I am not sure if this is a problem with Modular Forms. The code that the error is due to does not come from Modular Forms. Can you try to break down the problem with a minimal reproduction?

[fabian-hiller]

Could you fix the problem?

[cwoolum]

I think it's a problem with the Qwik compiler. I had built a form into a component and reused it across create/update routes. When it's in a component, it throws an error in preview or prod. If I put it back directly into a page, it works.

[fabian-hiller]

Ok. If you think that this is an bug in Qwik, feel free to create an issues at Qwik's repo.