Leaflet and Plotly widgets generate error

Support
,
1

Hello everyone. I am an R user migrating from Hugo-Learn to Hugo-doks theme. I am attempting to use Leaflet and Plotly widgets deployed on Netlify.

I have existing deployments on netlify using Leaflet and Plotly e.g. https://www.anest.uk/8whitepaper/pricycles/

However Hugo-doks uses npm and - the way I am using it - it is less tightly coupled with Rstudio, so instead of Rmarkdown I write markdown and even a little html as below.

On localhost both leaflet and plotly render using an iframe referencing a leaf bundle with html: files ~5MB. So the following renders fine locally (Windows):

<iframe seamless src="leafmap/index.html" width="100%" height="500"></iframe>`
<iframe seamless src="plotly/index.html" width="100%" height="500"></iframe>`

However deployed to netlify there are errors: “anestuk-doksf.netlify.app refused to connect” for both leaflet and plotly.

In a support thread on doks forum https://github.com/h-enk/doks/discussions/461 the author gave some hints/alternatives,

  1. ./layouts/index.headers: script-src ‘self’ https://cdn.plot.ly/plotly-latest.min.js;
  2. Laboratory is an experimental Firefox extension: could help you with remaining CSP issues
  3. You could also install the Plotly npm package (recommended method)

I have attempted 1) but the error remains, 2) gives a very minimal ‘generated CSP policy’ of default-src ‘none’ but I don’t really know how to use it and 3) is probably even further beyond my grasp. In fact all of this is well beyond my grasp, frankly!

There are similar queries before in this community such as
https://answers.netlify.com/t/runtime-error-after-pushing-hugo-site/18734
https://answers.netlify.com/t/plotly-charts-and-some-leaflet-maps-missing-from-website/30828/4
However although ‘solved’ I’m not clear how to apply the information they contain.

I am unclear whether to give up on these two widgets and just use static images, or whether the solution is within reach using a ‘cookbook’ set of steps.

Any help would be most gratefully received!

Minimal mods to doks starter template, (a) add widgets (b) apply patch (1) above to ./layouts/index.headers https://github.com/amberalpha/doksf

On netlify autodeployed from github, showing error: https://anestuk-doksf.netlify.app/blog/widgets/

2

Do you really need the CSP rule?

If you remove that, does it work fine?

3

Many thanks for your response!

I have removed the Content-Security-Policy line, commit, deploy - but the ‘refused to connect’ errors remain. I have checked that the edits have committed/deployed correctly…

4

I don’t think the changes are live, I’m still seeing this:

image
image1140×306 52.9 KB

5

I’ve checked the commit ‘no csp’ on github, also that an added text string ‘no csp’ has gone live i.e. shows up online in the blog entry just above ‘leaflet’. If the added content is live, I assume the index.headers has gone live in continuous deployment?

6

I checked your repo and looks like I found the problem. The file that you’ve stored in the repo gets overwritten in Node Module installation stage.

This is what gets installed:

image
image1812×980 108 KB

I’m not sure what can be done in this case. My advise would be to remove the index.headers file outside of Node Modules folder so that it can be overwritten in a different way.