Slick.Resizable is undefined (CDN-5.9.1)

Open starzar opened this issue 1 year ago • 1 comments

Describe the bug

Afer import:

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/styles/css/slick-alpine-theme.min.css">
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/browser/slick.core.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/browser/slick.grid.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/browser/slick.interactions.min.js"></script>

Error:

Slick.Resizable is undefined, make sure to import "slick.interactions.js"
    at Grid.setupColumnResize (slick.grid.ts:1902:13)
    at Grid.createColumnHeaders (slick.grid.ts:1711:10)
    at Grid.finishInitialization (slick.grid.ts:875:12)
    at Grid.initialize (slick.grid.ts:835:12)
    at new Grid (slick.grid.ts:583:10)
    at (index):43:12

Reproduction

using Tornado server(python) to pass data to index.html

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>SlickGrid with Tornado</title>

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/styles/css/slick-alpine-theme.min.css">
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/browser/slick.core.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/browser/slick.grid.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/browser/slick.interactions.min.js"></script>
    <style>
        #myGrid {
            width: 600px;
            height: 500px;
        }
    </style>
</head>


<body>
    <h2>Data Table with SlickGrid</h2>
    <div id="myGrid"></div>
</body>
    
<script>
    // SlickGrid column definitions
    var columns = [
        {id: "id", name: "ID", field: "id"},
        {id: "name", name: "Name", field: "name"},
        {id: "age", name: "Age", field: "age"}
    ];

    var options = {
        enableCellNavigation: true,
        enableColumnReorder: false
    };

    // Fetch data from Tornado backend
    fetch('/data')
        .then(response => {
            if (!response.ok) {
                throw new Error('Network response Error ' + response.statusText);
            }
            return response.json();
        })
        .then(data => {
            console.log('data');
            console.log(data);
            var grid = new Slick.Grid("#myGrid", data, columns, options);
        })
        .catch(error => {
            console.error('Error in  fetch operation:', error);
        });
</script>
</script>

</html>

Which Framework are you using?

Vanilla / Plain JS

Environment Info

| Executable          | Version |
| ------------------- | ------- |
| (framework used)    | VERSION |
| SlickGrid | 5.9.1|
| TypeScript          | VERSION |
| Browser(s)          | VERSION |
| System OS           | VERSION |

Validations

[X] Follow our Code of Conduct
[X] Read the Wikis.
[X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
[X] Check that this is a concrete bug. For Q&A open a GitHub Discussion.
[X] The provided reproduction is a minimal reproducible example of the bug.

Sep 10 '24 14:09 starzar

The import order is important when you use legacy scripts, slick.core and slick.interaction should be first since they are required by the grid and then import slick.grid as the 3rd import

this should work

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/browser/slick.core.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/browser/slick.interactions.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/browser/slick.grid.min.js"></script>

Sep 10 '24 14:09 ghiscoding