Search code examples
webpackgridstack

How to correctly import Gridstack using npm/webpack?


I used npm to install gridstack library.

I was previously using gridstack as a standard js library but I want to include it now using npm/webpack instead of directly including it by myself. I don't understand what I need to include to make it working.

I was also using the release v1.1, what are the needed dependencies ? only gridstack or you also need jquery-ui ?

Main.js

import Gridstack from 'gridstack' //what I need to put here ?

var grid = Gridstack.init();
console.log(grid);

Package.json

"dependencies": {
    "@babel/polyfill": "^7.8.3",
    "@babel/runtime": "^7.8.7",
    "gridstack": "^1.1.0",
 },
"devDependencies": {
    "@babel/core": "^7.8.4",
    "@babel/plugin-syntax-dynamic-import": "^7.8.3",
    "@babel/plugin-transform-runtime": "^7.8.3",
    "@babel/preset-env": "^7.8.4",
    "autoprefixer": "^8.6.4",
    "babel-loader": "^8.0.6",
    "cross-env": "^7.0.0",
    "webpack": "^4.41.6",
    "webpack-cli": "^3.3.11"
  },

For the moment I have the following error :

TypeError: gridstack__WEBPACK_IMPORTED_MODULE_7___default.a.init is not a function

Solution

  • this now works in just released 1.2.1 (see release notes)

    import 'jquery';
    import 'jquery-ui';
    
    import 'gridstack/dist/gridstack-poly'; // optional IE support
    import GridStack from 'gridstack';
    import 'gridstack/dist/gridstack.jQueryUI';
    import 'gridstack/dist/gridstack.css';
    

    but recommend you just use 2.x (native typescript re-write) which only needs this:

    import { GridStack, $ } from 'gridstack'; // $ optional if you depend on it, to be removed in 3.x
    import 'gridstack/dist/gridstack.css';
    

    might want to also see https://github.com/gridstack/gridstack.js#jquery-application