admin管理员组文章数量:1388160
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>
本文标签： javascriptAgGrid VUE without NodejsStack Overflow
版权声明：本文标题：javascript - AgGrid VUE without Node.js - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1744544993a2611842.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论