Data binding does't work when deploying to CloudFlare (NX)

[dalenguyen]

Please provide the environment you discovered this bug in.

Repo: https://github.com/dalenguyen/cloudflare-challenge/pull/6 Link: https://add-whisper.cloudflare-challange.pages.dev/ (try to click on the the recording, the log shows the result, but the form field is not updated) Host: Cloudflare Pages

Which area/package is the issue in?

Don't know / other

Description

I'm trying to adding a simple form and use data binding for updating the value. However, the form field is not updated properly even though the data is present. Here what I tried:

• Use simple ngModel
• Use Reactive Forms
• Add extra detectChanges

Please provide the exception or error you saw

No response

Other information

No response

I would be willing to submit a PR to fix this issue

• [ ] Yes
• [ ] No

[dalenguyen]

Updated: the binding works when using viewChild to manually set the value of the input.

[dalenguyen]

Hi @brandonroberts, I don't think this is fixed yet. The data binding (ngModel) or change detection doesn't really work when deploying to Cloudflare.

[dalenguyen]

I think the vite.config.ts for NX has an issue. I was trying to mimic the vite.config from non NX app. It does work, so I think these two are the cause: reportCompressedSize & commonjsOptions.

   build: {
      reportCompressedSize: true, <-- remove
      commonjsOptions: { transformMixedEsModules: true }, <-- remove
      target: ["es2020"],
    },

[brandonroberts]

Oh, interesting. I could why maybe the commonjsoptions could, but the other is just reporting

[dalenguyen]

Probably, it's not present in the normal create command. I can create a PR for this after some testings if you want :D

[brandonroberts]

Sounds good 👍

[brandonroberts]

Closed by https://github.com/analogjs/analog/pull/1052