# Pluto and WGLMakie error

**URL:** <https://discourse.julialang.org/t/pluto-and-wglmakie-error/86093>\
**Category:** Visualization\
**Tags:** pluto, wglmakie\
**Created:** [August 21, 2022, 4:12pm UTC](https://discourse.julialang.org/t/pluto-and-wglmakie-error/86093 "2022-08-21T16:12:58Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![contradict](https://avatars.discourse-cdn.com/v4/letter/c/ac91a4/32.png) [@contradict](https://discourse.julialang.org/u/contradict)\
**Post date:** [August 21, 2022, 4:12pm UTC](https://discourse.julialang.org/t/pluto-and-wglmakie-error/86093/1 "2022-08-21T16:12:58Z")

</div>

I am getting a new error when trying to use WGLMakie inside Pluto and no plot output. I haven’t been able to find a discussion of this error and it seems to happen in a new environment with just Pluto.

```julia
julia> versioninfo()
Julia Version 1.8.0
Commit 5544a0fab76 (2022-08-17 13:38 UTC)
Platform Info:
  OS: Linux (x86_64-linux-gnu)
  CPU: 8 × Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
  WORD_SIZE: 64
  LIBM: libopenlibm
  LLVM: libLLVM-13.0.1 (ORCJIT, skylake)
  Threads: 1 on 8 virtual cores
Environment:
  LD_PRELOAD = /usr/lib/x86_64-linux-gnu/libstdc++.so.6
  JULIA_REVISE_INCLUDE = 1

(jl_qZwls3) pkg> st
Status `/tmp/jl_qZwls3/Project.toml`
  [c3e4b0f8] Pluto v0.19.11

```

A notebook with these two cells:

```julia
begin
    using JSServe, WGLMakie
    Page()
end

```

```julia
scatter(rand(3), rand(3)

```

> **Produces this error in the REPL**
>
> ```julia
> julia> Pluto.run()
> [ Info: Loading...
> ┌ Info:
> └ Opening http://localhost:1234/?secret=U2MFmdDN in your default browser... ~ have fun!
> ┌ Info:
> │ Press Ctrl+C in this terminal to stop Pluto
> └
> Gtk-Message: 08:52:56.311: Failed to load module "canberra-gtk-module"
> Gtk-Message: 08:52:56.312: Failed to load module "canberra-gtk-module"
> From worker 2: Key does not map to a local path (is not registered via `register_local_file`): /assetserver/107b1f20827cb4700f4afc10aee1e5b3a38b5339-JSServe.js line 162 > Function
> From worker 2: Stacktrace:
> From worker 2: [1] error(s::String)
> From worker 2: @ Base ./error.jl:35
> From worker 2: [2] assetserver_to_localfile
> From worker 2: @ ~/.julia/packages/JSServe/nr6yD/src/dependencies.jl:22 [inlined]
> From worker 2: [3] replace_url(match_str::SubString{String})
> From worker 2: @ JSServe ~/.julia/packages/JSServe/nr6yD/src/http.jl:48
> From worker 2: [4] _replace(io::IOBuffer, repl::typeof(JSServe.replace_url), str::String, r::UnitRange{Int64}, pattern::Base.RegexAndMatchData)
> From worker 2: @ Base ./strings/util.jl:665
> From worker 2: [5] replace(str::String, pat_repl::Pair{Regex, typeof(JSServe.replace_url)}; count::Int64)
> From worker 2: @ Base ./strings/util.jl:706
> From worker 2: [6] #replace#450
> From worker 2: @ ./strings/util.jl:775 [inlined]
> From worker 2: [7] replace(s::SubString{String}, pat_f::Pair{Regex, typeof(JSServe.replace_url)})
> From worker 2: @ Base ./strings/util.jl:775
> From worker 2: [8] JSServe.JSException(js_data::Dict{Any, Any})
> From worker 2: @ JSServe ~/.julia/packages/JSServe/nr6yD/src/types.jl:150
> From worker 2: [9] handle_ws_message(session::JSServe.Session, message::Vector{UInt8})
> From worker 2: @ JSServe ~/.julia/packages/JSServe/nr6yD/src/http.jl:67
> From worker 2: [10] handle_ws_connection(application::JSServe.Server, session::JSServe.Session, websocket::WebSockets.WebSocket{Sockets.TCPSocket})
> From worker 2: @ JSServe ~/.julia/packages/JSServe/nr6yD/src/http.jl:99
> From worker 2: [11] websocket_handler(context::NamedTuple{(:routes, :application, :request, :match), Tuple{JSServe.Routes, JSServe.Server, HTTP.Messages.Request, RegexMatch}}, websocket::WebSockets.WebSocket{Sockets.TCPSocket})
> From worker 2: @ JSServe ~/.julia/packages/JSServe/nr6yD/src/http.jl:130
> From worker 2: [12] apply_handler(::Function, ::NamedTuple{(:routes, :application, :request, :match), Tuple{JSServe.Routes, JSServe.Server, HTTP.Messages.Request, RegexMatch}}, ::WebSockets.WebSocket{Sockets.TCPSocket})
> From worker 2: @ JSServe ~/.julia/packages/JSServe/nr6yD/src/server.jl:38
> From worker 2: [13] delegate(routes::JSServe.Routes, application::JSServe.Server, request::HTTP.Messages.Request, args::WebSockets.WebSocket{Sockets.TCPSocket})
> From worker 2: @ JSServe ~/.julia/packages/JSServe/nr6yD/src/server.jl:64
> From worker 2: [14] #14
> From worker 2: @ ~/.julia/packages/JSServe/nr6yD/src/server.jl:171 [inlined]
> From worker 2: [15] upgrade(f::JSServe.var"#14#16"{JSServe.Server}, stream::HTTP.Streams.Stream{HTTP.Messages.Request, HTTP.ConnectionPool.Transaction{Sockets.TCPSocket}})
> From worker 2: @ WebSockets ~/.julia/packages/WebSockets/QcswW/src/HTTP.jl:201
> From worker 2: [16] stream_handler(application::JSServe.Server, stream::HTTP.Streams.Stream{HTTP.Messages.Request, HTTP.ConnectionPool.Transaction{Sockets.TCPSocket}})
> From worker 2: @ JSServe ~/.julia/packages/JSServe/nr6yD/src/server.jl:170
> From worker 2: [17] #invokelatest#2
> From worker 2: @ ./essentials.jl:729 [inlined]
> From worker 2: [18] invokelatest
> From worker 2: @ ./essentials.jl:726 [inlined]
> From worker 2: [19] #26
> From worker 2: @ ~/.julia/packages/JSServe/nr6yD/src/server.jl:302 [inlined]
> From worker 2: [20] macro expansion
> From worker 2: @ ~/.julia/packages/HTTP/aTjcj/src/Servers.jl:415 [inlined]
> From worker 2: [21] (::HTTP.Servers.var"#13#14"{JSServe.var"#26#28"{JSServe.Server}, HTTP.ConnectionPool.Transaction{Sockets.TCPSocket}, HTTP.Servers.Server{Nothing, Sockets.TCPServer}, HTTP.Streams.Stream{HTTP.Messages.Request, HTTP.ConnectionPool.Transaction{Sockets.TCPSocket}}})()
> 
> ```

> **And this output in the Javascript console**
>
> ```julia
> Pluto.jl, by Fons van der Plas (https://github.com/fonsp), Mikołaj Bochenski (https://github.com/malyvsen), Michiel Dral (https://github.com/dralletje) and friends 🌈 [edit:1:9](http://localhost:1234/edit?id=57235660-2169-11ed-2b9d-dff1be882c49)
> 
> Launch parameters:
> 
> Object { notebook_id: "57235660-2169-11ed-2b9d-dff1be882c49", statefile: undefined, statefile_integrity: undefined, notebookfile: undefined, notebookfile_integrity: undefined, disable_ui: false, preamble_html: undefined, isolated_cell_ids: undefined, binder_url: undefined, pluto_server_url: undefined, … }
> 
> [editor.dc52606e.js:903:1334](http://localhost:1234/editor.dc52606e.js)
> 
> Waiting for socket to open... 8:53:13 AM [editor.1bfa0624.js:1:18637](http://localhost:1234/editor.1bfa0624.js)
> 
> Hottt 0 false [editor.dc52606e.js:1:14661](http://localhost:1234/editor.dc52606e.js)
> 
> null
> 
> Socket opened 8:53:15 AM [editor.1bfa0624.js:1:18532](http://localhost:1234/editor.1bfa0624.js)
> 
> Hello? [editor.1bfa0624.js:1:20730](http://localhost:1234/editor.1bfa0624.js)
> 
> Hello! [editor.1bfa0624.js:1:20787](http://localhost:1234/editor.1bfa0624.js)
> 
> Client object:
> 
> Object { send: async u(s, n, o, a)
> 
> , session_options: {…}, version_info: {…}, notebook_exists: true, kill: null }
> 
> [editor.1bfa0624.js:1:20927](http://localhost:1234/editor.1bfa0624.js)
> 
> Sending update_notebook request... [editor.dc52606e.js:741:10048](http://localhost:1234/editor.dc52606e.js)
> 
> New restart recommended message: null [editor.dc52606e.js:741:21802](http://localhost:1234/editor.dc52606e.js)
> 
> New restart required message: null [editor.dc52606e.js:741:22074](http://localhost:1234/editor.dc52606e.js)
> 
> Received update_notebook request [editor.dc52606e.js:741:10204](http://localhost:1234/editor.dc52606e.js)
> 
> Loading mathjax!! [editor.dc52606e.js:741:21484](http://localhost:1234/editor.dc52606e.js)
> 
> Websocket not in readystate! [107b1f20827cb4700f4afc10aee1e5b3a38b5339-JSServe.js:307:29](http://localhost:9284/assetserver/107b1f20827cb4700f4afc10aee1e5b3a38b5339-JSServe.js)
> 
> CONNECTED!!: ws://localhost:9284/de22c62c-e317-470a-b25a-39dda5bca591/a246/ [107b1f20827cb4700f4afc10aee1e5b3a38b5339-JSServe.js:447:25](http://localhost:9284/assetserver/107b1f20827cb4700f4afc10aee1e5b3a38b5339-JSServe.js)
> 
> Loading failed for the <script> with source “https://unpkg.com/three@0.136.0/build/three.js”. [edit:1:1](http://localhost:1234/edit?id=57235660-2169-11ed-2b9d-dff1be882c49)
> 
> Object { to_register: {…}, to_remove: [] }
> 
> [107b1f20827cb4700f4afc10aee1e5b3a38b5339-JSServe.js:336:29](http://localhost:9284/assetserver/107b1f20827cb4700f4afc10aee1e5b3a38b5339-JSServe.js)
> 
> Error during running onjs callback Callback: function setup(scenes){ const canvas = __eval_context__ [0] const scene_id = 7552351885750588882 const renderer = WGLMakie.threejs_module(canvas, '12879067562189653619', 800, 600) if ( renderer ) { const three_scenes = scenes.map(x=> WGLMakie.deserialize_scene(x, canvas)) const cam = new THREE.PerspectiveCamera(45, 1, 0, 100) WGLMakie.start_renderloop(renderer, three_scenes, cam, 30) JSServe.on_update('6596981693993003032', w_h => { // `renderer.setSize` correctly updates `canvas` dimensions const pixelRatio = renderer.getPixelRatio(); renderer.setSize(w_h[0] / pixelRatio, w_h[1] / pixelRatio); }) } else { const warning = WEBGL.getWebGLErrorMessage(); __eval_context__ [1].removeChild(canvas) __eval_context__ [2].appendChild(warning) } } [107b1f20827cb4700f4afc10aee1e5b3a38b5339-JSServe.js:205:17](http://localhost:9284/assetserver/107b1f20827cb4700f4afc10aee1e5b3a38b5339-JSServe.js)
> 
> ReferenceError: THREE is not defined
> 
> threejs_module http://localhost:9284/assetserver/b2d95aaad5c30c83bb9db748146c307c69c16170-wglmakie.js:656
> 
> setup http://localhost:9284/assetserver/107b1f20827cb4700f4afc10aee1e5b3a38b5339-JSServe.js line 162 > Function:7
> 
> run_js_callbacks http://localhost:9284/assetserver/107b1f20827cb4700f4afc10aee1e5b3a38b5339-JSServe.js:248
> 
> process_message http://localhost:9284/assetserver/107b1f20827cb4700f4afc10aee1e5b3a38b5339-JSServe.js:349
> 
> process_message http://localhost:9284/assetserver/107b1f20827cb4700f4afc10aee1e5b3a38b5339-JSServe.js:369
> 
> process_message http://localhost:9284/assetserver/107b1f20827cb4700f4afc10aee1e5b3a38b5339-JSServe.js:340
> 
> onmessage http://localhost:9284/assetserver/107b1f20827cb4700f4afc10aee1e5b3a38b5339-JSServe.js:451
> 
> [107b1f20827cb4700f4afc10aee1e5b3a38b5339-JSServe.js:206:17](http://localhost:9284/assetserver/107b1f20827cb4700f4afc10aee1e5b3a38b5339-JSServe.js)
> 
> Error: Promised response from onMessage listener went out of scope 12 [background.js:841:170](moz-extension://a972c188-06b0-4b7a-b289-bca7e61770ba/dist/background.js)
> 
> ```

The url `https://unpkg.com/three@0.136.0/build/three.js` loads fine if I visit it directly despite failing to load in the log above.

In addition, there is an error displayed in Pluto “error in websocket handler!”