Web interface does not work on clean buster install Mac OS various browsers

Please follow the below template, it will help us to help you!

This is a clean install on a new buster and new pi-hole

Expected Behaviour:

web interface shows stats.

Actual Behaviour:

what I see is similar to
https://github.com/pi-hole/pi-hole/issues/3354

diagnosing this further it appears to be a mismatch in the Bootstrap code used in the web interface .


I am not sure what version you expect, but what is /admin/style/vendor/bootstrap.css is not it

Debug Token:

https://tricorder.pi-hole.net/qqojvnl3z7

What OS and browser are you using to view the web admin interface? Please post a screen shot of what you see in the web admin interface from this browser (not the web inspector part).

I have tried this on Mac Firefox, safari, and Chrome (where the debugger was running). The image was identical to the older post I cited

Since I use bootstrap in my website development I am familiar with the type of error I am seeing.

What is behind the interface appears to be working. You can log in and the list of options changes as you expect. The problem is exactly what I would expect if the bootstrap code failed as indicated by the debugger.

So the question is who is providing the bootstrap distribution and if this is standard buster release is the version what you expect. Normally for web development we would load the code from a standard release drop. For example (for bootstrap 4 which is what I normally use)

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>

However that requires internet access so I understand using a local copy.

I note that with several installation of Pi-hole (various versions running currently) on Buster, I don't see this problem on any browsers or OS's (Windows, Mac with the three browsers you are using).

Something is locally different on your install, it appears.

This does not appear to be one of the dependencies we require and install.

Are you referring to one of these files (Buster latest version):

ls -lha /var/www/html/admin/style/vendor/bootstrap/css

total 656K
drwxr-xr-x 2 root root 4.0K Dec 31 08:42 .
drwxr-xr-x 5 root root 4.0K Aug 5 2018 ..
-rw-r--r-- 1 root root 119K Dec 31 08:42 bootstrap.min.css
-rw-r--r-- 1 root root 528K Dec 31 08:42 bootstrap.min.css.map

This is the beginning of the file in my Raspbian Buster and Armbian Buster installs.

 cat /var/www/html/admin/style/vendor/bootstrap/css/bootstrap.min.css
/*!
 * Bootstrap v3.4.1 (https://getbootstrap.com/)
 * Copyright 2011-2019 Twitter, Inc.
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
 *//*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css
...

Silly question, have you tried in incognito mode and/or with all extensions disabled?

Again I want to emphasize this is a clean (new chip loaded by buster creator on mac then updated) and then pihole was installed with your web installer

Silly question, have you tried in incognito mode and/or with all extensions disabled?

No actually a valid question. Yes to the first, no to the second, but there are no extensions that should interfere (I have been using pihole for years and only ran into trouble after an upgrade. The system at that point had so many problems I started from scratch even with a new chip)

what do set as the root of your html access?
/var/html/
/var/html/admin
/var/html/
/var/www/html/pihole/
the diagnostic is consistent with not finding the js files ( which are in admin)

I don't know where the problem you cited occurred, but sqlite3 is installed.
pi@pi-dns:~ $ sudo apt-get install sqlite3
Reading package lists... Done
Building dependency tree
Reading state information... Done
sqlite3 is already the newest version (3.27.2-3+deb10u1).
0 upgraded, 0 newly installed, 0 to remove and 0 not upgraded.

sorry all paths should be /var/www/html. Your html starts loading at /scripts so it needs to either be based at /admin or /pihole

Try disabling them all just in case, just to rule out any client side extensions.

Admin page's root is /var/www/html/admin and from there, all the scripts/css etc required are within subdirectories. (edit: the admin directory is a 1:1 clone of the repo on github)

The web interface works... else we'd have had loads of reports about this. So there is certainly something other about your setup, we just need to get to the bottom of what. Not saying it's something you've done, btw, just need to rule everything out.

Also. what address are you using to access the admin interface?

Does it work if you use http://pi.hole/admin/? or http://ip.address/admin/?

Disabling did not make a difference (as we both expected), but that eliminates that as a source

I usually use the ip address, but the other did not change the results

Again I am communicating with your html server. The index page is just not able to load bootstrap

Yeah, this is what I'm not understanding at all. (Or indeed able to reproduce!)

image

but your scripts access bootstrap as

note this a clickable link. If you click it a blank page comes up

What MacOS are you running? Do you have another OS that you can use to load the page?

catalina I will fire up my vm and try on windows, but I think that is a Looooong shot

What does your network tab look like in chrome devtools with cache disabled and JS selected (per my screenshot)

For comparison only, MacOS Mojave (I don't have problems on either Catalina or Big Sur, I just happen to be sitting at this Mac with Mojave):

Firefox latest:

Safari latest:

Chrome latest:

interesting .... I fired up windows 10 and it worked on both edge and chrome

but edge on the mac does not work

in the chrome debugger I get fails on several of the files.

I now suspect there is some interaction with the virus software on the system (however I run Norton on both the PC and mac). I need to go offline to research that.

Good luck