Using smilesDrawer with React?

[kathrynloving]

I'm attempting to use this in a gatsby site, but keep getting "document not defined" errors. I have the import at the top of my .js template, and the apply call near the bottom, and some canvas tags in the template, e.g.

import SmilesDrawer from 'smiles-drawer'
<canvas width="200" height="200" data-smiles={molecule}></canvas>
SmilesDrawer.apply()

Here's the error when I "npm run build". I thought someone here might have tips for getting this working. Thanks!

---

error Building static HTML for pages failed

See our docs page on debugging HTML builds for help https://goo.gl/yL9lND

43 | SmilesDrawer.apply = function(options, selector='canvas[data-smiles]', themeName='light', onError=null) { 44 | let smilesDrawer = new Drawer(options);

45 | let elements = document.querySelectorAll(selector); | ^ 46 | 47 | for (var i = 0; i < elements.length; i++) { 48 | let element = elements[i];

WebpackError: ReferenceError: document is not defined

• app.js:45 Object../node_modules/smiles-drawer/app.js.SmilesDrawer.apply [lib]/[smiles-drawer]/app.js:45:1

[daenuprobst]

Sorry for the late reply. In case you are still experiencing problems: This looks like you are using server side rendering. The problem is, that the document is, of course, not yet available. the apply() function relies on the page already being rendered. In addition, rendering to an offscreen canvas is not possible as of yet (which would, AFAIK, be the case with SSR).

However, I am planning to add OffscreenCanvas functionality as soon as it becomes available in all major browsers.