✊🏿 Black Lives Matter. Please consider donating to Black Girls Code today.
🐇 Announcing Dash VTK for 3d simulation graphics. Check out the March webinar.

Issue in Electron built version

Graphing Library Plotly.js
#1

I’m using the plotly.js library to display charts in my application. While the library works fine when running either serve script, the build script, or the electron:serve scripts, everything works just fine. However, when I build the application using electron:build , Electron fails to load the webpage. The console contains the error message cannot load property 'document' of undefined caused by the line of code displayed in the screenshot. This line of code has been directly lifted from the plotly.js file found within the package.

To reproduce the error, simply create a new project using vue cli, and then add the plugin electron-builder which will take care of everything. Then install plotly.js-dist and try to display a chart in the main component. The resulting built application (AppImage) gives a blank page with the following error:

Screenshot_20191113_223722
Screenshot_20191113_223722914×610 50.2 KB

Screenshot_20191113_223803
Screenshot_20191113_223803914×610 94.4 KB

I dug around a bit and it seems that the strict mode used in the built version of plotly is causing the issue, since this has not been yet binded to anything. I tried to look for a version of plotly that came with D3 as its dependency and not built into it, hoping that the build system can deduce the right course of action, but there doesn’t seem to be any.

I’d really appretiate your help. Plotly is crucial to my application and I really don’t see any alternative for it.

#2

Could you please tell us which version of plotly.js you are using?

#3

I found a solution to the problem, and it doesn’t have anything to do with plotly at all, so sorry about that :slight_smile:
But in case anyone wonders here from google, the problem lies within electron-builder. The plugin attempts to bundle everything using webpack, but plotly.js-dist should not be shipped that way. You have to define it as an external library (using the option of the same name in vue.config.js in order to load the library without any changes.

#4

Hi, I have the same problem as you, and was hoping you could elaborate more on your solution. Essentially I have an electron app I am building that started out as a simple Vue webapp that I later converted to an electron app using vue-cli-electron-builder plugin.

I am displaying graphs and charts and so I am using poltly.js-dist to do so, and everything works fine when I simply run the serve command, however, when I build using the electron:build command I get the same error as you regarding the undefined property in plotly.

I can’t seem to find a tutorial on how to solve this, and am hoping you can help as a last resort before I switch over to the more complex D3.

#5

Hi, I have same error there but don’t know how to “define it as an external library” in vue.config.js. Would you please show some example code of doing it? Thanks a lot… :rofl:

#6

Create vue.config.js if it doesn’t exist already and define the plotly package as an external:

module.exports = {
    pluginOptions: {
        electronBuilder: {
            externals: ['plotly.js-dist']
        }
    }
}
#7

It worked! Thanks!!!