# Embedding cells in an Electron App

**URL:** <https://talk.observablehq.com/t/embedding-cells-in-an-electron-app/2792>\
**Category:** Help\
**Created:** [January 29, 2020, 7:06pm UTC](https://talk.observablehq.com/t/embedding-cells-in-an-electron-app/2792 "2020-01-29T19:06:39Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![Guillaume-Levrier](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/guillaume-levrier/32/2629_2.png) [@Guillaume-Levrier](https://talk.observablehq.com/u/Guillaume-Levrier)\
**Post date:** [January 29, 2020, 7:06pm UTC](https://talk.observablehq.com/t/embedding-cells-in-an-electron-app/2792/1 "2020-01-29T19:06:39Z")

</div>

Following the Observable meetup in January, I thought of a way Observable could make my life a lot easier. I’m building an Electron app that helps researchers to request some APIs (i.e. Scopus) and display the results as D3 graphs just by clicking buttons. A new feature I’m implementing is a D3 slider, so that people don’t need to alternate between that Electron App and their PowerPoint slides. And since it’s a D3 slider, slides could contain observable cells. Or so I thought.

This is how I’m trying to create the cells:

```
const createObsCell = (slide,id,userName,notebookName) => {
  // Create a DIV in the DOM
  var cell = document.createElement("DIV");
  cell.id = "observablehq-"+id; 
  document.getElementById(slide).append(cell);

  // Create a path for the define script
  let modStorePath = userDataPath + "/flatDatasets/"+userName+"+"+notebookName+".js";

  // Check if already accessed in the past and hence already available
  if (fs.existsSync(modStorePath)) {

require = require('esm')(module);
var define = require(modStorePath);
const inspect = Inspector.into("#observablehq-"+id);
(new Runtime).module(define, name => (name === "chart") && inspect());
  
  // If not, download it from the Observable API  
  } else {

  let optionsRequest = {
// Prepare options for the Request-Promise-Native Package
uri:"https://api.observablehq.com/"+userName+"/"+notebookName+".js?v=3", // URI to be accessed
headers: { "User-Agent": "Request-Promise" }, // User agent to access is Request-promise
json: false // don't automatically parse as JSON
  };

  rpn(optionsRequest) // RPN stands for Request-promise-native (Request + Promise)
.then(mod =>{
  // Write the file in the app's user directory
  fs.writeFile(modStorePath, mod, "utf8", err => {
    if (err) throw err;
    require = require('esm')(module);
    var define = require(modStorePath);
    const inspect = Inspector.into("#observablehq-"+id);
    (new Runtime).module(define, name => (name === "chart") && inspect());
  });
})
  }
}

```

The error I get when I try  
`createObsCell('xtype','761b1ced','@jashkenas','global-alcohol-consumption-2015')`  
is the following

PANDORAE/node\_modules/@observablehq/runtime/dist/runtime.umd.js:2 Uncaught TypeError: e is not a function  
at zt.value (PANDORAE/node\_modules/@observablehq/runtime/dist/runtime.umd.js:2)  
at createObsCell (slider.js:20)  
at :1:1

Any idea how I could fix that, or do things differently in a way that is safe-ish in an Electron context? I’m using Electron V5.0.3 and Runtime V4.6.4.

---

<div class="post-metadata">

**Author:** ![Guillaume-Levrier](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/guillaume-levrier/32/2629_2.png) [@Guillaume-Levrier](https://talk.observablehq.com/u/Guillaume-Levrier)\
**Post date:** [February 4, 2020, 12:15am UTC](https://talk.observablehq.com/t/embedding-cells-in-an-electron-app/2792/2 "2020-02-04T00:15:39Z")

</div>

Found the solution. `define` as loaded by esm is in fact `define.default` which should hence be ran as `runtime.module( **define.default** , name => (name === "chart") && inspect());`