VueJs Vite build for production undefined properties

Using Vue 3 to build a form input page. Exporting default props in the <script setup> block with reference to the docs as follows:

<script setup>
...
const props = defineProps({
  orgName: String,
  contactName: String,
  contactEmail: String,
  addressLine1: String,
  addressLine2: String,
  city: String,
  stateAbbrev: String,
  zip: String
})

const emit = defineEmits([
  'update:orgName',
  'update:contactName',
  'update:contactEmail',
  'update:addressLine1',
  'update:addressLine2',
  'update:city',
  'update:stateAbbrev',
  'update:zip'
])
...

Using the props in the <template> block as follows:

<template>
  ....
  <form @submit.prevent="onSubmit" class="add-form">
    <input
      class="form_input"
      type="text"
      id="OrgName"
      v-model="orgName"
      @input="$emit('update:orgName', $event.target.value)"
      required
      placeholder="Organization Name"
    />
    <input .....
    />
    .....
  </form>
  ....
</template>

I'm using Vite to build the distributable. Running in development mode locally, page renders and responds to input fields and submits data to the API request just fine. Using Vue Developer tools, I can see the following responses from the props variable.

I'm deploying the distributable in a container running in an nginx server in a container behind a load balancer. App builds and deploys without issue and is accessible as desired. However, when I start to hit the form input fields, I receive the following errors in the console:

Uncaught ReferenceError: orgName is not defined
    at a.onUpdate:modelValue.t.<computed>.t.<computed> [as _assign] (organization-add-page.98800913.js:1:2044)
    at HTMLInputElement.<anonymous> (index.0b002e58.js:1:58059)
a.onUpdate:modelValue.t.<computed>.t.<computed> @ organization-add-page.98800913.js:1
(anonymous) @ index.0b002e58.js:1

This same message, but with respective property names, occur on each field in the form.

I'm having a hard time trying to figure out if this is a Vite build setting/issue, nginx setting/issue, or something else. I haven't found the magical SO or Google search as most results come back regarding environment variable deployment issues which I have working successfully.

My nginx config is fairly straightforward, and works across all pages in the app.

server {
    listen       80;
    listen  [::]:80;
    server_name  localhost;

    #access_log  /var/log/nginx/host.access.log  main;

    location / {
        root   /usr/share/nginx/html;
        index  index.html index.htm;
        include /etc/nginx/mime.types;
        try_files $uri $uri/ /index.html;
    }

    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   /usr/share/nginx/html;
    }
}

I'm trying to figure out next steps in troubleshooting the production version of the app deployed when it works as expected locally running in dev mode.

VueJs Vite build for production undefined properties

0 Answers