AG Grid: Framework component is missing the method getValue() in production build but not development

Question

We have defined a checkbox editor for ag-grid like this:

<template>
  <input type="checkbox" v-model="checked" />
</template>
<script setup lang="ts">
import type { ICellEditorParams } from "ag-grid-community";
import { ref } from "vue";
type Props = {
  params: ICellEditorParams;
};

const props = defineProps<Props>();
const checked = ref(props.params.value);
const getValue = () => checked.value;

defineExpose({
  getValue,
});
</script>

When running npm run dev we see the following build output. The ag-grid works. No problems. Good!

When running npm run build && npm run preview we see the following build output. The ag-grid complains about a missing getValue().

A previous question established a probably root cause:

ag-grid properly works with functions directly returned from setup() function and haven't access to functions returned via exposed context properties

So, how can we make our vite production build return the getValue in the same what that the development build does?

Answer 1

Until either Vite or ag-grid support using defineExpose(), this workaround returns getValue() to ag-grid by using <script> instead of <script setup>.

<template>
  <input type="checkbox" v-model="checked" />
</template>
<script lang="ts">
import type { ICellEditorParams } from "ag-grid-community";
import { ref } from "vue";
type Props = {
  params: ICellEditorParams;
};

export default {
  setup(props: Props) {
    const checked = ref(props.params.value?.valueOf());
    console.log("wat", checked.value);
    return {
      checked,
      getValue: () => checked.value,
    };
  },
};
</script>