Resize Bar issue when loading JS file dynamically

[wonsuc]

We are currently migrating source code to reactjs.

While migrating, we removed jQuery related resources(js, css, library files) from index.html and moved to js file(view component).

And we had to import those files dynamically, at this time we use code like below.

const linkTag = document.createElement('link');
linkTag.href = 'http://localhost:8888/ips-eng/lib/jQuery-UI-Layout/layout-default.min.css';
linkTag.rel = 'stylesheet';
linkTag.type = 'text/css';
document.head.appendChild(linkTag);

const scriptTag = document.createElement('script');
scriptTag.src = 'http://localhost:8888/ips-eng/lib/jQuery-UI-Layout/jquery.layout_and_plugins.min.js';
document.head.appendChild(scriptTag);

Everything works fine, except Resize Bar cursor is not showing if you hover on the element, and if you drag the bar it won't resize the panels.

I tried to install this library from npm, but I don't know how to(couldn't find the package from npm).

I even tried to import directly from the js file, but webpack shows errors while compiling. (see below)

// index.tsx
import './resources/lib/jQuery-UI-Layout/layout-default.min.css'
import './resources/lib/jQuery-UI-Layout/jquery.layout_and_plugins.min.js'

Compiling...
Failed to compile.

src\resources\lib\jQuery-UI-Layout\jquery.layout_and_plugins.min.js
  Line 1:45:     'define' is not defined                                                no-undef
  Line 1:57:     'define' is not defined                                                no-undef
  Line 1:85:     'jQuery' is not defined                                                no-undef
  Line 1:7696:   'debugData' is not defined                                             no-undef
  Line 1:7752:   'debugData' is not defined                                             no-undef
  Line 1:17589:  Expected an assignment or function call and instead saw an expression  no-unused-expressions
  Line 1:17920:  'string' is not defined                                                no-undef
  Line 1:25056:  Unexpected use of 'self'                                               no-restricted-globals
  Line 1:81727:  's' is not defined                                                     no-undef
  Line 1:81766:  'ar' is not defined                                                    no-undef
  Line 1:81829:  'ar' is not defined                                                    no-undef
  Line 1:81850:  'ar' is not defined                                                    no-undef
  Line 1:81883:  's' is not defined                                                     no-undef
  Line 1:82128:  's' is not defined                                                     no-undef
  Line 1:83915:  'parse' is not defined                                                 no-undef
  Line 1:88224:  'state' is not defined                                                 no-undef
  Line 1:89861:  Unexpected use of 'screen'                                             no-restricted-globals

The only way I can make it work is to put jQuery, jQuery UI, jQuery UI Layout to index.html.

I hope it works with dynamic loading.

[GedMarc]

It is AMD compatible, but it is a JQuery library, not going to get away from that sorry bud

[wonsuc]

Okay, I actually found https://www.npmjs.com/package/layout-jquery3 and there will be no problem if I can import this library from node.js.

It would be better if it is written in REAME.md like getting started with npm.

Anyway thanks for supporting :)