Using ChemWidget.Viewer3D in a React/Webpack/npm or yarn environment

[richardoptibrium]

Hi,

I'm trying to see how possible it is to integrate the Kekule 3D viewer into a React component. I can:

import {
	Kekule,
} from 'kekule';

and attempt to:

	Kekule.Widget.autoLauncher.execute(document.getElementById('chemViewer3D'));

But I get: "Three.js not available, try to include it through the <script> tag or import the module by Kekule.externalResourceManager.register method" I have tried installing 'three' and 'react-threejs' neither with much success so far.

Can anyone offer a code sample CodePen or similar that illustrates how I can do this please? I don't want to have to add a script tag for three.js if I can help it.

My objective is just to be able to load smiles structures and view in 3d, I already tried the Kekule molecule editor so it seems to make sense to try the Kekule 3d offering too.

[partridgejiang]

Hi @richardoptibrium, when using with import or require, Three.js will not add a global THREE variable, so Kekule.js can not be aware of its existence. To solve that, you have to explicitly register it with the Kekule.externalResourceManager:

import * as THREE from 'three';
import {Kekule} from 'kekule';
Kekule.externalResourceManager.register('three.js', THREE);

After that, the 3D molecule should be displayed properly.

[richardoptibrium]

Thank you partridgejiang, I'll try that now.

[richardoptibrium]

I get the following unfortunately:

Uncaught TypeError: e.getAttribute is not a function
at s.getElemWidgetClass (kekule.min.js:1:1)
at s.executeOnElem (kekule.min.js:1:1)
at s.execute (kekule.min.js:1:1)
at ThreeDView.componentDidMount (ThreeDView.js:40:1)
at commitLifeCycles (react-dom.development.js:19814:1)
at commitLayoutEffects (react-dom.development.js:22803:1)
at HTMLUnknownElement.callCallback (react-dom.development.js:188:1)
at Object.invokeGuardedCallbackDev (react-dom.development.js:237:1)
at invokeGuardedCallback (react-dom.development.js:292:1)
at commitRootImpl (react-dom.development.js:22541:1)
at unstable_runWithPriority (scheduler.development.js:653:1)
at runWithPriority$1 (react-dom.development.js:11039:1)
at commitRoot (react-dom.development.js:22381:1)
at finishSyncRender (react-dom.development.js:21807:1)
at performSyncWorkOnRoot (react-dom.development.js:21793:1)
at react-dom.development.js:11089:1
at unstable_runWithPriority (scheduler.development.js:653:1)
at runWithPriority$1 (react-dom.development.js:11039:1)
at flushSyncCallbackQueueImpl (react-dom.development.js:11084:1)
at flushSyncCallbackQueue (react-dom.development.js:11072:1)
at scheduleUpdateOnFiber (react-dom.development.js:21199:1)
at Object.enqueueSetState (react-dom.development.js:12639:1)
at App.push../node_modules/react/cjs/react.development.js.Component.setState (react.development.js:471:1)
at App.js:121434:1

[richardoptibrium]

But that was caused by me trying to use a React reference instead of document.getElementById.

[partridgejiang]

The viewer widget can not be built on React virtual DOM, so here you have to pass concrete DOM element to Kekule.Widget.autoLauncher.execute. You can also create the viewer widget directly by JavaScript code:

let viewer = new Kekule.ChemWidget.Viewer3D(document);  // the concrete document object of DOM
viewer.appendToElem(document.body);