"It seems that your web browser is not modern enough to support the drawing function. Please update it."

[richardoptibrium]

I'm running the same piece of code, in isolation and in a larger application. I run both in the same browser (Chrome Version 80.0.3987.132 (Official Build) (64-bit)). The small sample app runs fine, but the larger app shows the following in the console:

push../node_modules/kekule/dist/kekule.min.js.Kekule.Exception {message: "It seems that your web browser is not modern enoug…o support the drawing function. Please update it.", name: undefined}
message: "It seems that your web browser is not modern enough to support the drawing function. Please update it."
name: undefined
__proto__: Error at Object.<anonymous> (http://localhost:3000/static/js/0.chunk.js:9167:33) at Object../node_modules/kekule/dist/kekule.min.js (http://localhost:3000/static/js/0.chunk.js:68442:30) at __webpack_require__ (http://localhost:3000/static/js/bundle.js:786:30) at fn (http://localhost:3000/static/js/bundle.js:151:20) at Object../node_modules/kekule/dist/kekule.webpack.prod.js (http://localhost:3000/static/js/0.chunk.js:68455:18) at __webpack_require__ (http://localhost:3000/static/js/bundle.js:786:30) at fn (http://localhost:3000/static/js/bundle.js:151:20) at http://localhost:3000/static/js/0.chunk.js:4450:22 at Object.<anonymous> (http://localhost:3000/static/js/0.chunk.js:4452:3) at Object../node_modules/kekule/dist/kekule.js (http://localhost:3000/static/js/0.chunk.js:4453:30) at __webpack_require__ (http://localhost:3000/static/js/bundle.js:786:30) at fn (http://localhost:3000/static/js/bundle.js:151:20) at Module../src/Components/Card/MoleculeCard/MoleculeCard.js (http://localhost:3000/static/js/main.chunk.js:1572:64) at __webpack_require__ (http://localhost:3000/static/js/bundle.js:786:30) at fn (http://localhost:3000/static/js/bundle.js:151:20) at Module../src/Components/Card/index.js (http://localhost:3000/static/js/main.chunk.js:2071:84) at __webpack_require__ (http://localhost:3000/static/js/bundle.js:786:30) at fn (http://localhost:3000/static/js/bundle.js:151:20) at Module../src/Components/index.js (http://localhost:3000/static/js/main.chunk.js:4152:63) at __webpack_require__ (http://localhost:3000/static/js/bundle.js:786:30) at fn (http://localhost:3000/static/js/bundle.js:151:20) at Module../src/App.js (http://localhost:3000/static/js/main.chunk.js:250:69) at __webpack_require__ (http://localhost:3000/static/js/bundle.js:786:30) at fn (http://localhost:3000/static/js/bundle.js:151:20) at Module../src/index.js (http://localhost:3000/static/js/main.chunk.js:4350:62) at __webpack_require__ (http://localhost:3000/static/js/bundle.js:786:30) at fn (http://localhost:3000/static/js/bundle.js:151:20) at Object.1 (http://localhost:3000/static/js/main.chunk.js:4915:18) at __webpack_require__ (http://localhost:3000/static/js/bundle.js:786:30) at checkDeferredModules (http://localhost:3000/static/js/bundle.js:46:23) at Array.webpackJsonpCallback [as push] (http://localhost:3000/static/js/bundle.js:33:19) at http://localhost:3000/static/js/main.chunk.js:1:69
constructor: ƒ (e, t)
getMessage: ƒ ()
stack: "Error↵    at Object.<anonymous> (http://localhost:3000/static/js/0.chunk.js:9167:33)↵    at Object../node_modules/kekule/dist/kekule.min.js (http://localhost:3000/static/js/0.chunk.js:68442:30)↵    at __webpack_require__ (http://localhost:3000/static/js/bundle.js:786:30)↵    at fn (http://localhost:3000/static/js/bundle.js:151:20)↵    at Object../node_modules/kekule/dist/kekule.webpack.prod.js (http://localhost:3000/static/js/0.chunk.js:68455:18)↵    at __webpack_require__ (http://localhost:3000/static/js/bundle.js:786:30)↵    at fn (http://localhost:3000/static/js/bundle.js:151:20)↵    at http://localhost:3000/static/js/0.chunk.js:4450:22↵    at Object.<anonymous> (http://localhost:3000/static/js/0.chunk.js:4452:3)↵    at Object../node_modules/kekule/dist/kekule.js (http://localhost:3000/static/js/0.chunk.js:4453:30)↵    at __webpack_require__ (http://localhost:3000/static/js/bundle.js:786:30)↵    at fn (http://localhost:3000/static/js/bundle.js:151:20)↵    at Module../src/Components/Card/MoleculeCard/MoleculeCard.js (http://localhost:3000/static/js/main.chunk.js:1572:64)↵    at __webpack_require__ (http://localhost:3000/static/js/bundle.js:786:30)↵    at fn (http://localhost:3000/static/js/bundle.js:151:20)↵    at Module../src/Components/Card/index.js (http://localhost:3000/static/js/main.chunk.js:2071:84)↵    at __webpack_require__ (http://localhost:3000/static/js/bundle.js:786:30)↵    at fn (http://localhost:3000/static/js/bundle.js:151:20)↵    at Module../src/Components/index.js (http://localhost:3000/static/js/main.chunk.js:4152:63)↵    at __webpack_require__ (http://localhost:3000/static/js/bundle.js:786:30)↵    at fn (http://localhost:3000/static/js/bundle.js:151:20)↵    at Module../src/App.js (http://localhost:3000/static/js/main.chunk.js:250:69)↵    at __webpack_require__ (http://localhost:3000/static/js/bundle.js:786:30)↵    at fn (http://localhost:3000/static/js/bundle.js:151:20)↵    at Module../src/index.js (http://localhost:3000/static/js/main.chunk.js:4350:62)↵    at __webpack_require__ (http://localhost:3000/static/js/bundle.js:786:30)↵    at fn (http://localhost:3000/static/js/bundle.js:151:20)↵    at Object.1 (http://localhost:3000/static/js/main.chunk.js:4915:18)↵    at __webpack_require__ (http://localhost:3000/static/js/bundle.js:786:30)↵    at checkDeferredModules (http://localhost:3000/static/js/bundle.js:46:23)↵    at Array.webpackJsonpCallback [as push] (http://localhost:3000/static/js/bundle.js:33:19)↵    at http://localhost:3000/static/js/main.chunk.js:1:69"
__proto__: Object

The kekule code is the same, the browser is the same, Just the app at fault is larger than the sample. I'm afraid I cannot provide the large app but here is the sample: sample.zip

Molecule displays in the sample (but caption doesn't), no molecule in the large app.

[partridgejiang]

Please check the attachment App.js, a modification from your sample.zip. With the latest dist files in this repository (not published to npm yet), you can use Kekule.Render.registerExternalModule to explicit notify the existence of Three.js to Kekule. Perhaps it may resolve your issues. btw., to display the caption of a viewer, you need to set property showCaption to true:

chemViewer.setCaption('Hooray!').setShowCaption(true);

App.js.zip

[richardoptibrium]

Please check the attachment App.js, a modification from your sample.zip. With the latest dist files in this repository (not published to npm yet), you can use Kekule.Render.registerExternalModule to explicit notify the existence of Three.js to Kekule. Perhaps it may resolve your issues. btw., to display the caption of a viewer, you need to set property showCaption to true:

chemViewer.setCaption('Hooray!').setShowCaption(true);

App.js.zip

Thank you. When will they be published to npm?

[partridgejiang]

@richardoptibrium, the next release published on NPM should be shipped with more function updates, and it may requires some time. At present, if using the npm version of Kekule.js, you can still use the "require() + window.THREE" way.