compiling the ouput from debundle.md

compiling the ouput from debundle

check

at sometimes, the varible with the same name as the variable r representing require, maybe be treated wrongly as require. like this

const r = require;

 const i = ({
    container: e,
    input: t,
    listbox: r,
    onActiveDescendantChange: n,
    onClear: a,
    onOptionSelect: i,
  }) => {

      // this is maybe transformed wrongly into require.addEventListener("click", c);
      r.addEventListener("click", c);

  };

this snippet is from another example in check-require.js

function(e, t, r) {

    const a = ({initialOpen: e=!1}={})=>{
        const [t,r] = Object(n.useState)(e)

    }

webpack config

    //  eval map is handy for later use on Chrome, I think
    devtool: 'eval-cheap-module-source-map',

some change required for the new bundle file from webpack

ensure to change anything seemly like r.t.bind(null, 'empty', 7); to require.t.bind(null, 'empty', 7);

anything seemly like __webpack_require__("./src-v-1-5cad77d-replaceRequires-inline sync recursive").d to __webpack_require__.d

search for sync recursive and ensure nothing unusual like // corrent code may be r.addEventListener, but debunble thought 'r' as 'requrie' wrongly. __webpack_require__(\"./new-bundle/ sync recursive\").addEventListener

anything like var r = undefined; to var r = __webpack_require__;

delete var __webpack_require__=undefined;

how to use the new bundle file

1. use Chrome to open official web site
2. F12
3. Overrides
4. save the official js file for Overrides
5. replace the saved js file with the new bundle file

error fixing when

1. __webpack_require__.r is not a function copy the missing part from the original bundle file to the new bundle file

2. errors like "ReferenceError: a is not defined" or called on null or undefined, which stemed from to_replace_pairs not set properly. To find which module, try to change code as following

// modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
try {modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);} catch (e) {console.log(`cloned by scil: module ${moduleId} not found`)}

1. comment content of the js mudule if it .cause error like Module not found: Error: Can't resolve 'electron'

2. if found errer like ERROR in ./debundle_output/387.js 228:12-25 Cannot statically analyse 'require(…, …)' in line 228 open file 387.js, then change this require to the n or similar name.

3. invalid assignment to const . maybe because sth like const t = exports;t = e.exports = ...
   "variableType": "var", should be added in debundle.config.json.

4. bootstrap:19 Uncaught (in promise) TypeError: Cannot read property 'call' of undefined
   if occurs at modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
   set a conditional breakpoint in chrome dev tool
   or changed this line to
   try{modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);}catch(){ console.log(moduleId)}

5. webpack WARNING 'Critical dependency: require function is used in a way in which dependencies cannot be statically extracted'

like this:

const t = exports;
const e = module;
const r = require;
var moduleFilePaths = {
  "./banner/js/index.js": 411,
  "./cart/js/index.js": 413,
};
function a(e) {
  var filePath = resolveFilePath(e);
  return require(filePath);
}
function resolveFilePath(e) {
  if (!require.o(moduleFilePaths, e)) {
    var t = new Error("Cannot find module '" + e + "'");
    throw ((t.code = "MODULE_NOT_FOUND"), t);
  }
  return moduleFilePaths[e];
}
e.exports = a;
...

in this js module, require is not used as normal, causing the re-compiled new bundle file may report error Uncaught Error: Cannot find module '411' in browsers.

simple solution is add the following code somewhere to make sure the webpack including there modules

require("./411");
require("./413");

if this error Uncaught Error: Cannot find module '411' still exists, maybe change the var moduleFilePaths in previous module with specific location

var moduleFilePaths = {
  "./banner/js/index.js": "./js_from_official/411.js",
  "./cart/js/index.js": "./js_from_official/413.js",,
};