javascript - AgGrid VUE without Node.js

im trying to bundle aggrid-vue locally and use it in some of my pages where i require tables. I am not running a node.js server - My application is a python back-end with fastapi serving the endpoints and pages.
I have the following package.json and vite configurations that i use to bundle and try bundle aggrid for use in my pages.

package.json:

{
  "name": "frontend",
  "version": "1.0.0",
  "main": "main.js",
  "scripts": {
    "build": "vite build"
  },
  "dependencies": {
    "ag-grid-vue3": "^33.1.1"
  },
  "devDependencies": {
    "vite": "^6.2.2"
  }
}

vite.config.js

import { defineConfig } from 'vite';
import { resolve } from 'path';

export default defineConfig({
  build: {
    outDir: 'dist',
    lib: {
      entry: resolve(__dirname, 'dependencies/vite-entries/aggrid.js'),
      name: 'AgGrid',
      fileName: 'aggrid-bundle',
      formats: ['umd']
    },
    rollupOptions: {
      // Instead of making Vue external, we'll handle it differently
      output: {
        // Provide globals for UMD build
        globals: {
          vue: 'Vue'
        }
      }
    }
  },
  resolve: {
    // Ensure Vue is resolved correctly
    alias: {
      'vue': 'Vue'
    }
  },
  define: {
    'process.env': {
      NODE_ENV: JSON.stringify(process.env.NODE_ENV || 'production')
    }
  }
});

aggrid.js

import { AgGridVue } from 'ag-grid-vue3';
import { AllCommunityModule, ModuleRegistry } from 'ag-grid-community'; 
import 'ag-grid-community/styles/ag-grid.css';
import 'ag-grid-community/styles/ag-theme-alpine.css';

ModuleRegistry.registerModules([AllCommunityModule]);
window.AgGrid = {
    AgGridVue
};

export { 
  AgGridVue
};

SIMPLE TEST

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Simple AG Grid Test</title>

    <!-- Vue 3 -->
    <script src="@3/dist/vue.global.js"></script>
    
    <!-- AG Grid -->
    <link rel="stylesheet" href="/libs/aggrid-bundle.css">
    <script src="/libs/aggrid-bundle.umd.js"></script>
</head>

<body>
    <div id="app">
        <h1>Test AGGRID</h1>
        <data-table></data-table>
    </div>

    <script type="module">
        import { DataTable } from '/static/components/DataTable.js';
        
        const app = Vue.createApp({
            components: {
                'data-table': DataTable
            },
            setup() {
                console.log("Main app setup");
                return {};
            }
        });
        app.mount('#app');
        console.log("Vue app mounted");
    </script>
</body>
</html>

COMPONENT:

export const DataTable = {
    name: 'DataTable',
    components: {
        'ag-grid-vue': window.AgGrid.AgGridVue
    },
    setup() {
        const { ref, onMounted } = Vue;
        
        //TEST data
        const rowData = ref([
            { make: "Tesla", model: "Model Y", price: 64950 },
            { make: "Ford", model: "F-Series", price: 33850 },
            { make: "Toyota", model: "Corolla", price: 29600 }
        ]);

        const colDefs = ref([
            { field: "make", headerName: "Make" },
            { field: "model", headerName: "Model" },
            { field: "price", headerName: "Price" }
        ]);
        
        const gridOptions = ref({
            defaultColDef: {
                sortable: true,
                filter: true,
                resizable: true
            }
        });
        
        onMounted(() => {
            console.log("AG Grid Vue component available:", !!window.AgGrid.AgGridVue;
        });

        return {
            rowData,
            colDefs,
        };
    },
    template: `
        <div style="height: 500px; width: 100%;" class="ag-theme-alpine">
            <ag-grid-vue
                style="height: 100%; width: 100%;"
                :column-defs="colDefs"
                :row-data="rowData">
            </ag-grid-vue>
        </div>
    `
};

I am noticing that the console is logging 'True' for the logging in the OnMounted, but nothing is rendered regardless. I do see that the umd file is being loaded correctly based on chrome/edge's dev tools -> sources. I also see these warnings in the console - not sure if they are indicative of the issue or not:

aggrid-bundle.umd.js:7  [Vue warn]: useTemplateRef() is called when there is no active component instance to be associated with.
L @ aggrid-bundle.umd.js:7
Mf @ aggrid-bundle.umd.js:8
setup @ aggrid-bundle.umd.js:233
callWithErrorHandling @ vue.global.js:2410
setupStatefulComponent @ vue.global.js:10009
setupComponent @ vue.global.js:9970
mountComponent @ vue.global.js:7360
processComponent @ vue.global.js:7326
patch @ vue.global.js:6855
mountChildren @ vue.global.js:7087
mountElement @ vue.global.js:7010
processElement @ vue.global.js:6975
patch @ vue.global.js:6843
componentUpdateFn @ vue.global.js:7470
run @ vue.global.js:591
setupRenderEffect @ vue.global.js:7598
mountComponent @ vue.global.js:7373
processComponent @ vue.global.js:7326
patch @ vue.global.js:6855
mountChildren @ vue.global.js:7087
processFragment @ vue.global.js:7269
patch @ vue.global.js:6829
componentUpdateFn @ vue.global.js:7470
run @ vue.global.js:591
setupRenderEffect @ vue.global.js:7598
mountComponent @ vue.global.js:7373
processComponent @ vue.global.js:7326
patch @ vue.global.js:6855
render @ vue.global.js:8123
mount @ vue.global.js:6123
app.mount @ vue.global.js:12199
(anonymous) @ test:34
aggrid-bundle.umd.js:7  [Vue warn]: useModel() called without active instance.
L @ aggrid-bundle.umd.js:7
Pm @ aggrid-bundle.umd.js:10
setup @ aggrid-bundle.umd.js:233
callWithErrorHandling @ vue.global.js:2410
setupStatefulComponent @ vue.global.js:10009
setupComponent @ vue.global.js:9970
mountComponent @ vue.global.js:7360
processComponent @ vue.global.js:7326
patch @ vue.global.js:6855
mountChildren @ vue.global.js:7087
mountElement @ vue.global.js:7010
processElement @ vue.global.js:6975
patch @ vue.global.js:6843
componentUpdateFn @ vue.global.js:7470
run @ vue.global.js:591
setupRenderEffect @ vue.global.js:7598
mountComponent @ vue.global.js:7373
processComponent @ vue.global.js:7326
patch @ vue.global.js:6855
mountChildren @ vue.global.js:7087
processFragment @ vue.global.js:7269
patch @ vue.global.js:6829
componentUpdateFn @ vue.global.js:7470
run @ vue.global.js:591
setupRenderEffect @ vue.global.js:7598
mountComponent @ vue.global.js:7373
processComponent @ vue.global.js:7326
patch @ vue.global.js:6855
render @ vue.global.js:8123
mount @ vue.global.js:6123
app.mount @ vue.global.js:12199
(anonymous) @ test:34
aggrid-bundle.umd.js:7  [Vue warn]: onMounted is called when there is no active component instance to be associated with. Lifecycle injection APIs can only be used during execution of setup(). If you are using async setup(), make sure to register lifecycle hooks before the first await statement.
L @ aggrid-bundle.umd.js:7
nn @ aggrid-bundle.umd.js:8
(anonymous) @ aggrid-bundle.umd.js:8
setup @ aggrid-bundle.umd.js:233
callWithErrorHandling @ vue.global.js:2410
setupStatefulComponent @ vue.global.js:10009
setupComponent @ vue.global.js:9970
mountComponent @ vue.global.js:7360
processComponent @ vue.global.js:7326
patch @ vue.global.js:6855
mountChildren @ vue.global.js:7087
mountElement @ vue.global.js:7010
processElement @ vue.global.js:6975
patch @ vue.global.js:6843
componentUpdateFn @ vue.global.js:7470
run @ vue.global.js:591
setupRenderEffect @ vue.global.js:7598
mountComponent @ vue.global.js:7373
processComponent @ vue.global.js:7326
patch @ vue.global.js:6855
mountChildren @ vue.global.js:7087
processFragment @ vue.global.js:7269
patch @ vue.global.js:6829
componentUpdateFn @ vue.global.js:7470
run @ vue.global.js:591
setupRenderEffect @ vue.global.js:7598
mountComponent @ vue.global.js:7373
processComponent @ vue.global.js:7326
patch @ vue.global.js:6855
render @ vue.global.js:8123
mount @ vue.global.js:6123
app.mount @ vue.global.js:12199
(anonymous) @ test:34
aggrid-bundle.umd.js:7  [Vue warn]: onUnmounted is called when there is no active component instance to be associated with. Lifecycle injection APIs can only be used during execution of setup(). If you are using async setup(), make sure to register lifecycle hooks before the first await statement.
L @ aggrid-bundle.umd.js:7
nn @ aggrid-bundle.umd.js:8
(anonymous) @ aggrid-bundle.umd.js:8
setup @ aggrid-bundle.umd.js:233
callWithErrorHandling @ vue.global.js:2410
setupStatefulComponent @ vue.global.js:10009
setupComponent @ vue.global.js:9970
mountComponent @ vue.global.js:7360
processComponent @ vue.global.js:7326
patch @ vue.global.js:6855
mountChildren @ vue.global.js:7087
mountElement @ vue.global.js:7010
processElement @ vue.global.js:6975
patch @ vue.global.js:6843
componentUpdateFn @ vue.global.js:7470
run @ vue.global.js:591
setupRenderEffect @ vue.global.js:7598
mountComponent @ vue.global.js:7373
processComponent @ vue.global.js:7326
patch @ vue.global.js:6855
mountChildren @ vue.global.js:7087
processFragment @ vue.global.js:7269
patch @ vue.global.js:6829
componentUpdateFn @ vue.global.js:7470
run @ vue.global.js:591
setupRenderEffect @ vue.global.js:7598
mountComponent @ vue.global.js:7373
processComponent @ vue.global.js:7326
patch @ vue.global.js:6855
render @ vue.global.js:8123
mount @ vue.global.js:6123
app.mount @ vue.global.js:12199
(anonymous) @ test:34
vue.global.js:2263  [Vue warn]: Missing ref owner context. ref cannot be used on hoisted vnodes. A vnode with ref must be created inside the render function. 
  at <AgGridVue style= {height: '100%', width: '100%'} column-defs= (3) [{…}, {…}, {…}] row-data= (3) [{…}, {…}, {…}] > 
  at <DataTable> 
  at <App>

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - AgGrid VUE without Node.js - Stack Overflow

与本文相关的文章

评论列表(0)