Kekule.js: Using Kekule npm module with Webpack does not load Kekule properly.

References: #32 Steps to duplicate:

Begin any project with webpack base.

yarn add kekule

In a js file you import from index.html:

import {Kekule} from 'kekule'
or 
const {Kekule} = require('kekule')

console.log(Kekule)

Now run webpack to minify your project and open the output file and receive:

kekule.js:504 Uncaught TypeError: Cannot read property 'getElementsByTagName' of undefined
    at analysisEntranceScriptSrc (kekule.js:504)
    at init (kekule.js:631)
    at kekule.js:671
    at Object.<anonymous> (kekule.js:673)
    at Object.defineProperty.value (page.js:128749)
    at __webpack_require__ (bootstrap 2cce55343c358056e4dd:19)
    at Object.Array.indexOf.i (kekule.composer.component.js:4)
    at __webpack_require__ (bootstrap 2cce55343c358056e4dd:19)
    at Object.<anonymous> (moldraw.js:6)
    at __webpack_require__ (bootstrap 2cce55343c358056e4dd:19)
    at webpackContext (.*\.js$:111)
    at sl.module.factory.js:11

In this particular case, we see that document is undefined. In #32 we see that passing the window object works for the webpack compiler but when the script is trying to load in the browser we get errors that it cannot find the proper files. This is because webpack did not see explicit requires of those files and loses them in the build process.

Potential Fixes:

1. Instead of appending to a script tag to them DOM, check if webpack was used and instead require the scripts.

• Cons:
  • Each file must now officially export the class it’s building since webpack compilation for the browser does not have access to vm.runInThisContext.
  • Each file imported to kekule.js must now be imported and exported appropriately for webpack and node

1. Somehow figure out how to import a context of a module. Basically to do for webpack what vm.runInThisContext does for node.

• Cons:
  • It doesn’t exist (to my knowledge)