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

user_1108891 0
Viewed 50

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!

enter image description here

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

enter image description here

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?

vite vue.js
1 Answers

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>
user_11088910
Related