Using jqGrid with ES6 import syntax

[stagemteam]

I installed jqGrid with next command npm install --save tonytomov/jqGrid#master. After that, I was trying to import jqGrid import jqGrid from 'jqGrid'; but it thrown an error Module not found: Can't resolve 'jqGrid'. This problem partially was fixed with add next import code

import '../../../../node_modules/jqGrid/css/ui.jqgrid.css';
import '../../../../node_modules/jqGrid/js/jquery.jqGrid.js';
import '../../../../node_modules/jqGrid/js/i18n/grid.locale-en.js';

This imported jqGrid to my module but remove navGrid, navSeparatorAdd, navButtonAdd and etc. declared in jquery.jqGrid.js such as grid.locale-en.js use AMD

if ( typeof define === "function" && define.amd ) {
    // AMD. Register as an anonymous module.
    define([
        "jquery",
        "../grid.base"
    ], factory );
} else {
    // Browser globals
    factory( jQuery );
}

When ../grid.base calling it override all with $.fn.jqGrid = function() { /* ... */} Change order of jquery.jqGrid.js and grid.locale-en.js has no an effect.

Is there a possibility to use jqGrid with ES6 syntax?

[tonytomov]

Hello,

This is a demo using AMD: http://guriddo.net/demo/guriddojs/integrations/amdsupport/index.html

In the main directory there is a file called jqGrid.js: https://github.com/tonytomov/jqGrid/blob/master/jqGrid.js

you may need to use them.

[stagemteam]

I've changed

//import '../../../../node_modules/jqGrid/js/jquery.jqGrid.js';
import '../../../../node_modules/jqGrid/jqGrid.js';

but got next error in browser console

22:45:54.204
Error: "Cannot find module 'jqgrid/grid.base'"
    webpackMissingModule http://localhost:3000/static/js/38.chunk.js:105:45
    js http://localhost:3000/static/js/38.chunk.js:105:12
index.js:1452
22:45:54.381
./node_modules/jqGrid/jqGrid.js
Module not found: Can't resolve 'jqgrid/addons/ui.multiselect' in 'D:\WebServer\git\amaz\public\react\node_modules\jqGrid' index.js:1452
22:45:54.382
./node_modules/jqGrid/jqGrid.js
Module not found: Can't resolve 'jqgrid/grid.base' in 'D:\WebServer\git\amaz\public\react\node_modules\jqGrid' index.js:1452
22:45:54.382
./node_modules/jqGrid/jqGrid.js
Module not found: Can't resolve 'jqgrid/grid.celledit' in 'D:\WebServer\git\amaz\public\react\node_modules\jqGrid' index.js:1452
22:45:54.383
./node_modules/jqGrid/jqGrid.js
Module not found: Can't resolve 'jqgrid/grid.common' in 'D:\WebServer\git\amaz\public\react\node_modules\jqGrid' index.js:1452
22:45:54.383
./node_modules/jqGrid/jqGrid.js
Module not found: Can't resolve 'jqgrid/grid.filter' in 'D:\WebServer\git\amaz\public\react\node_modules\jqGrid' index.js:1452
22:45:54.383
./node_modules/jqGrid/jqGrid.js
Module not found: Can't resolve 'jqgrid/grid.formedit' in 'D:\WebServer\git\amaz\public\react\node_modules\jqGrid' index.js:1452
22:45:54.384
./node_modules/jqGrid/jqGrid.js
Module not found: Can't resolve 'jqgrid/grid.grouping' in 'D:\WebServer\git\amaz\public\react\node_modules\jqGrid' index.js:1452
22:45:54.384
./node_modules/jqGrid/jqGrid.js
Module not found: Can't resolve 'jqgrid/grid.import' in 'D:\WebServer\git\amaz\public\react\node_modules\jqGrid' index.js:1452
22:45:54.385
./node_modules/jqGrid/jqGrid.js
Module not found: Can't resolve 'jqgrid/grid.inlinedit' in 'D:\WebServer\git\amaz\public\react\node_modules\jqGrid' index.js:1452
22:45:54.386
./node_modules/jqGrid/jqGrid.js
Module not found: Can't resolve 'jqgrid/grid.jqueryui' in 'D:\WebServer\git\amaz\public\react\node_modules\jqGrid' index.js:1452
22:45:54.386
./node_modules/jqGrid/jqGrid.js
Module not found: Can't resolve 'jqgrid/grid.pivot' in 'D:\WebServer\git\amaz\public\react\node_modules\jqGrid' index.js:1452
22:45:54.386
./node_modules/jqGrid/jqGrid.js
Module not found: Can't resolve 'jqgrid/grid.subgrid' in 'D:\WebServer\git\amaz\public\react\node_modules\jqGrid' index.js:1452
22:45:54.387
./node_modules/jqGrid/jqGrid.js
Module not found: Can't resolve 'jqgrid/grid.treegrid' in 'D:\WebServer\git\amaz\public\react\node_modules\jqGrid' index.js:1452
22:45:54.387
./node_modules/jqGrid/jqGrid.js
Module not found: Can't resolve 'jqgrid/grid.utils' in 'D:\WebServer\git\amaz\public\react\node_modules\jqGrid' index.js:1452
22:45:54.387
./node_modules/jqGrid/jqGrid.js
Module not found: Can't resolve 'jqgrid/jqDnR' in 'D:\WebServer\git\amaz\public\react\node_modules\jqGrid' index.js:1452
22:45:54.388
./node_modules/jqGrid/jqGrid.js
Module not found: Can't resolve 'jqgrid/jqModal' in 'D:\WebServer\git\amaz\public\react\node_modules\jqGrid' index.js:1452
22:45:54.388
./node_modules/jqGrid/jqGrid.js
Module not found: Can't resolve 'jqgrid/jquery.fmatter' in 'D:\WebServer\git\amaz\public\react\node_modules\jqGrid' index.js:1452

[stagemteam]

It would be great if anybody could simply use import jqGrid from 'jqGrid'; after npm install jqGrid.

[tonytomov]

Do you have correct config file : https://github.com/tonytomov/jqGrid/blob/master/config.js

[stagemteam]

Yes, it is correct. I've run jqGrid in pair with React but my solution is very bad. jqGrid isn't absolutely adapted to ES6 syntax and it causing many problems. For example, now I'm getting an error '$' is not defined no-undef when import jQuery UI Multiselect, though before that all worked correctly.