Gridstack.js: Problem with npm install and jquery-ui

[Kinnza]

Im using the latest version 2.6, with the required jquery-ui (1.12)

if i use require/import for gridstack i get errors loading jquery-ui components. for example:
Module not found: Error: Cannot resolve module 'jquery-ui/version' in /develop/gigaspaces/cloudify-ui-new/node_modules/gridstack/dist

I see in jquery-ui documentation that in 1.12 they moved the files to a nested ui directory, so the require should be like so: jquery-ui/ui/version.

I also see in gridstack code the loading of the wrong modules:
define(['jquery', 'lodash', 'jquery-ui/data', 'jquery-ui/disable-selection', 'jquery-ui/focusable',
'jquery-ui/form', 'jquery-ui/ie', 'jquery-ui/keycode', 'jquery-ui/labels', 'jquery-ui/jquery-1-7',
'jquery-ui/plugin', 'jquery-ui/safe-active-element', 'jquery-ui/safe-blur', 'jquery-ui/scroll-parent',
'jquery-ui/tabbable', 'jquery-ui/unique-id', 'jquery-ui/version', 'jquery-ui/widget',
'jquery-ui/widgets/mouse', 'jquery-ui/widgets/draggable', 'jquery-ui/widgets/droppable',
'jquery-ui/widgets/resizable'], factory);

[radiolips]

https://github.com/troolee/gridstack.js/issues/513

[Kinnza]

Thanks!
Found the webpack solution:

resolve: {
    alias: {
        'jquery-ui': 'jquery-ui/ui'
    }
},

[jeffochoa]

@Kinnza nice, I was having the same issue.

[nerdess]

@Kinnza i've added your snippet to node_modules/react-gridstack/webpack.config.js but it does not fix the same issue i have. is this the wrong place?

(edit: i fixed the issue by changing the paths inside gridstack.js to e.g. '../../jquery-ui/ui/data.js' but your solution would be cleaner)

[sambegin]

@nerdess

It's not in react-gridstack's webpack.config.js you need to add this config but in your own webpack.config.js file.

Example, we're taking gridstacks AND jquery-ui from node_modules.

So in our webpack.config.js file we have :

resolve: {
        alias: {
            'jquery-ui': path.resolve(__dirname, 'node_modules/jquery-ui/ui')
        }
    },

Then "import "gridstack/dist/gridstack";" (from node_module) should find jquery-ui.

Note: we're using webpack v.2 and you should never edit node_modules files ;)

[vgupta91]

i don't manage webpack in my project but i got this error

[adumesny]

@vgupta91 what version of gridstack are you using ? in 1.x we bundle jquery-ui as part of gridstack.all.js so you don't want to include it yourself. See the readme about it.

[vgupta91]

"react-gridstack": "^0.1.4",
"jquery-ui": "^1.12.1"

[vgupta91]

"gridstack": "^1.1.0"

[adumesny]

@vgupta91 this is a separate issue - react-gridstack hasn't been updated in a long time and list
"dependencies": { "gridstack": "^0.2.5", "jquery": "^2.2.1", "lodash": "^4.11.1" }
so you might be able to use an older gridstack version like 0.5.5, but you will have to ping them about updating to a later/latest. Right now it list 0.2.5

[Bennajachin-Hexaware]

I am getting this error. Can't resolve 'jquery-ui/data And i am using react i tried adding webpack.js. Still i am getting same error.

[adumesny]

@Bennajachin-Hexaware are you using the no longer maintained react-gridstack or gridstack directly ? as I mentioned above jquery-ui (minimal version) is now bundled in 1.x gridstack-all.js and there is a readme section about it.
You didn't say what you're using... hard to help.