Circular dependencies between "src/util/input/Base.js" <=> "src/util/element.js" <=> "src/util/input/(Checkbox|Radio|Switch).js"

[sanak]

About /examples/misc/map.input.html example, it works without problem on ol-ext examples (https://viglino.github.io/ol-ext/examples/misc/map.input.html), but on types-ol-ext porting (Siedlerchr/types-ol-ext#61), I encountered the following error.

Base.js:101 Uncaught ReferenceError: Cannot access '__WEBPACK_DEFAULT_EXPORT__' before initialization
    at Module.default (Base.js:101)
    at Module../node_modules/ol-ext/util/input/Radio.js (Radio.js:20)
    at __webpack_require__ (bootstrap:19)
    at Module../node_modules/ol-ext/util/element.js (color.js:169)
    at __webpack_require__ (bootstrap:19)
    at Module../node_modules/ol-ext/util/input/Checkbox.js (Base.js:101)
    at __webpack_require__ (bootstrap:19)
    at Module../node_modules/ol-ext/util/input/Switch.js (Slider.js:104)
    at __webpack_require__ (bootstrap:19)
    at Object../examples/misc/map.input.ts (map.input.ts:1)

From googling the error message, the cause seems to be circular dependencies,
https://stackoverflow.com/questions/65038253/uncaught-referenceerror-cannot-access-webpack-default-export-before-initi

and I actually found that the following circular dependencies.

1. src/util/input/Base.js requires src/util/element.js:
   • https://github.com/Viglino/ol-ext/blob/master/src/util/input/Base.js#L6

     import ol_ext_element from '../element';

2. src/util/element.js requires src/util/input/(Checkbox|Radio|Switch).js:
   • https://github.com/Viglino/ol-ext/blob/master/src/util/element.js#L6-L8

     import ol_ext_input_Checkbox from './input/Checkbox'
     import ol_ext_input_Switch from './input/Switch'
     import ol_ext_input_Radio from './input/Radio'

3. But, src/util/input/(Checkbox|Radio|Switch).js requires src/util/element.js and src/util/input/Base.js:
   • https://github.com/Viglino/ol-ext/blob/master/src/util/input/Checkbox.js#L2-L3
   • https://github.com/Viglino/ol-ext/blob/master/src/util/input/Radio.js#L1-L2
   • https://github.com/Viglino/ol-ext/blob/master/src/util/input/Switch.js#L2 (via Checkbox)

     import ol_ext_element from '../element';
     import ol_ext_input_Base from './Base'

I confirmed that the following temporal dependencies deletion (just comment out) solved types-ol-ext side's above Uncaught ReferenceError, so I think that this circular dependencies issue needs to be solved at ol-ext side.

--- a/src/util/element.js
+++ b/src/util/element.js
@@ -3,9 +3,9 @@
  * @see https://plainjs.com/javascript/
  * @see http://youmightnotneedjquery.com/
  */
-import ol_ext_input_Checkbox from './input/Checkbox'
-import ol_ext_input_Switch from './input/Switch'
-import ol_ext_input_Radio from './input/Radio'
+// import ol_ext_input_Checkbox from './input/Checkbox'
+// import ol_ext_input_Switch from './input/Switch'
+// import ol_ext_input_Radio from './input/Radio'
 
 /** @namespace ol.ext.element */
 var ol_ext_element = {};
@@ -105,7 +105,7 @@ ol_ext_element.createSwitch = function (options) {
     parent: options.parent
   });
   var opt = Object.assign ({ input: input }, options || {});
-  new ol_ext_input_Switch(opt);
+  // new ol_ext_input_Switch(opt);
   return input;
 };
 
@@ -130,11 +130,11 @@ ol_ext_element.createCheck = function (options) {
   });
   console.log(input)
   var opt = Object.assign ({ input: input }, options || {});
-  if (options.type === 'radio') {
-    new ol_ext_input_Radio(opt);
-  } else {
-    new ol_ext_input_Checkbox(opt);
-  }
+  // if (options.type === 'radio') {
+  //   new ol_ext_input_Radio(opt);
+  // } else {
+  //   new ol_ext_input_Checkbox(opt);
+  // }
   return input;
 };

[Viglino]

I've removed references to element in input class files.
👍 BTW thank-you for your job on typescript definitions! 🥇

[sanak]

Okay, I confirmed that commit:8277cf3 solves above Uncaught ReferenceError issue.

Thanks for quick fix!