AG-Grid Enterprise - SyntaxError: Cannot use import statement outside a module / agSetColumnFilter

[jorgelaranjo]

The goal is to use agSetColumnFilter but cannot get ag-grid-enterprise to load regardless of being on <script> or <script context=module>

Error is 23:13:58 [vite] Error when evaluating SSR module /src/routes/aggrid/+page.svelte: failed to import "ag-grid-enterprise"

SyntaxError: Cannot use import statement outside a module

Code based on

https://github.com/MichaelKim/ag-grid-svelte/issues/7#issuecomment-1455015701

<script>
    import AgGridSvelte from 'ag-grid-svelte';
    import 'ag-grid-community/styles/ag-grid.css';
    import 'ag-grid-community/styles/ag-theme-alpine.css';
    import 'ag-grid-enterprise';
    import { children } from 'svelte/internal';

    const columnDefs = [
        {
            headerName: 'Athlete Details',
            children: [
                { field: 'athlete', filter: true },
                { field: 'age', filter: 'agNumberColumnFilter' },
                {
                    field: 'country',
                    // filter: 'agSetColumnFilter',
                    filterParams: {
                        applyMiniFilterWhileTyping: true
                    }
                }
            ]
        },
        {
            headerName: 'Sports Results',
            children: [
                { field: 'sport' },
                { field: 'total', columnGroupShow: 'closed' },
                { field: 'gold', columnGroupShow: 'open' },
                { field: 'silver', columnGroupShow: 'open' },
                { field: 'bronze', columnGroupShow: 'open' }
            ]
        }
    ];

    let rowData = [];
    function onGridReady() {
        fetch('/data/olympic-winners.json')
            .then((resp) => resp.json())
            .then((data) => (rowData = data));
    }
</script>

<div style:height="90vh" class="ag-theme-alpine">
    <AgGridSvelte {rowData} {columnDefs} {onGridReady} />
</div>

<style>
    .ag-theme-alpine {
        --ag-background-color: #ddd;
    }
</style>

[MichaelKim]

I've tried your code example and the mini filter seems to work for me. Which version of AG Grid are you using?

If I had to guess, there might be something going on with Vite. Could you try the suggestions here? https://github.com/MichaelKim/ag-grid-svelte/issues/2#issuecomment-1334808155

Edit: it's not supported yet, but if you happen to be using AG Grid v30, could you try adding this to your Vite config:

const config = {
  ...,
  ssr: {
    noExternal: ['ag-grid-community', 'ag-grid-enterprise']
  }
};

[jorgelaranjo]

Using version 29.3.5 solved the issue without the need to configure vite.config.js